网页中使用表格
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网页制作实例教程（第3版）
4.1 制作表格网页
4.1.2 导入表格
“文件”菜单→“导入”→ “表格式数据” 。
网页制作实例教程（第3版）
4.1 制作表格网页
4.1.3 表格数据排序
排序不能对合并的单元格进行
网页制作实例教程（第3版）
4.2 设置表格属性
4.2.1 选取表格
1，选取整个表格 3，选取表格的列 2，选取表格的行 4，选取表格里的单元格
例4-4 表格中插入背景图像和文字
网页制作实例教程（第3版）
4.3 设置单元格属性
4.3.1 单元格属性面板
4.3.2 单元格常用操作
1，合并单元格 2，拆分单元格 3，使单元格跨行或跨列 4，减少行宽和减少列宽 5，设置单元格背景色 6，设置单元格背景图像 7，在单元格输入文字或图像 8，用单元格制作高度为1像素的直线
网页制作实例教程（第3版）
4.5 表格的HTML标记
<tr> <td align="left"> 张三</td> <td align="center">女</td> <td align="right">90</td> </tr> <tr> <td align="left">李四</td> <td align="center">男</td> <td align="right">98</td> </tr> </table> </body> </html>
网页制作实例教程（第3版）
网页制作实例教程（第3版）
网页制作实例教程（第3版）
4.5 表格的HTML标记
例4-7 使用表格标记
<html> <head><title>使用表格标记</title></head> <body> <table border="1" align="center" width=70%> <caption align="right" valign="bottom"> 潍坊学院英语教育05级1班 </caption> <tr> <th colspan="3" bgcolor="#CCCCCC">期中考试成绩表</th> </tr> <tr> <td align="center">姓名</td> <td align="center">性别</td> <td align="center">分数</td> </tr>
网页制作实例教程（第3版）
4.3 设置单元格属性
例4-5 用单元格产生直线
网页制作实例教程（第3版）
4.4 用表格布局网页
1，嵌套表格：嵌套表格是在表格里面插入表格 。 2，表格叠加：将几个宽度相同相互独立的表格叠放在一起 。
网页制作实例教程（第3版）
4.5 表格的HTML标记
表格的标记主要有： 1，表格的开始和结束标记<table>与</table> 2，表格行开始和结束标记<tr>与</tr> 3，表格单元格开始和结束标记<td>与</td>。 4，表格标题单元格开始和结束标记<th>与</th> 表格标记的层次关系是，最外层是表格标记，第2层是表格的行标记， 里面是单元格标记。
格
步骤：在“插入”面板选“常用”卡→单击 “表格”按钮。
网页制作实例教程（第3版）
4.1 制作表格网页
3．“表格”对话框
“表格”对话框分3部分：表格大小、标题、辅助功能。
网页制作实例教程（第3版）
4.1 制作表格网页
4.1.2 导入表格
凡是要导入到网页中的表格数据，数据源文件本身的排列必须有一定 的规则，如果是txt格式的文件，同一行的每两个数据之间要有分隔符，而 且同一文件的分隔符要相同。分隔符可以是逗号、冒号、分号、Tab键、空 格键等。 能导入表格数据格式的文件类型有：word、Excel、文本文件，等。
4.2.2 表格属性面板
网页制作实例教程（第3版）
4.2 设置表格属性
4.2.3 编辑表格的命令
网页制作实例教程（第3版）
4.2 设置表格属性
4.2.4 表格编辑
1，添加行或列 2，删除行或列 3，改变表格宽度 4，表格对齐 5，表格边框 6，表格背景图像
网页制作实例教程（第3版）
4.2 设置表格属性
（4）bgcolor属性，定义表格背景色。 （5）background属性，定义表格背景图像。 （6）wigth属性，定义表格宽度，单位有百分比和像素两种。 （7）height属性，定义表格高度，通常不定义表格高度。
网页制作实例教程（第3版）
4.5 表格的HTML标记
2．<tr>标记 定义表格中行开始和行结束，是双标记，表格有几行，就有几对<tr>和</tr>标记。 <tr>标记的常用属性如下： （1）align属性，定义水平对齐方式，取值有：left、center、right。 （2）valign属性，定义垂直对齐方式，取值有：top、middle、bottom。 （3）bgcolor属性，定义行的背景色。 （4）bordercolor属性，定义行的边框色。 3．<td>标记和<th>标记 <td>标记和<th>标记都用来定义单元格，用<th>和</th>定义的单元格为 表格的标题单元格，单元格中的文字用黑体，并且居中显示。用<td>和</td>
（3）colspan属性，定义单元格向右打通的栏数，在行的方向合并单元格。
（4）rpwspan属性，定义单元格向下打通的栏数，在列的方向合并单元格。 （5）width属性，定义单元格的宽度，单位用像素或百分比。 （6）height属性，定义单元格的高度，单位用像素或百分比。 （7）nowrap属性，禁止单元格的内容自动换行。 （8）bgcolor属性，定义单元格的背景色。 （9）background属性，定义单元格的背景图像。
定义的单wenku.baidu.com格为普通单元格。
表的列由每行包含的单元格数目决定。
网页制作实例教程（第3版）
4.5 表格的HTML标记
<td>标记和<th>标记的常用属性如下： （1）align属性，定义单元格内容水平对齐，取值有：left、center、right。 （2）valign属性，定义单元格内容垂直对齐，取值有：top、middle、bottom。
网页制作实例教程（第3版）
4.5 表格的HTML标记
1．<table>标记 定义表格开始和结束的标记，是双标记。 <table>标记的常用属性如下： （1）border属性，定义边框宽度，单位是像素。 （2）bordercolor属性，定义边框颜色。
（3）align属性，定义表格在页面的水平位置，可取值为left、right、center。
网页制作实例教程（第3版）
4.5 表格的HTML标记
<td>标记和<th>标记的常用属性如下： （1）align属性，定义单元格内容水平对齐，取值有：left、center、right。 （2）valign属性，定义单元格内容垂直对齐，取值有：top、middle、bottom。 （3）colspan属性，定义单元格向右打通的栏数，在行的方向合并单元格。 （4）rpwspan属性，定义单元格向下打通的栏数，在列的方向合并单元格。 （5）width属性，定义单元格的宽度，单位用像素或百分比。 （6）height属性，定义单元格的高度，单位用像素或百分比。 （7）bgcolor属性，定义单元格的背景色。 （8）background属性，定义单元格的背景图像。 4．<caption>标记 定义表格标题，标题内容显示在表格外面，默认显示在表格上方中间。是双标记。 （1）align属性，取值为right、left、middle，设置标题水平位置，默认居中。 （2）valign属性，取值为top、bottom，确定标题在表格上方还是在表格下方。
网页制作实例教程 (第3版)
——网页中使用表格（第4章）
主编：潘明寒
本章要点：
1，表格与单元格的基本操作 2，表格与单元格的属性
3，表格与单元格标记
4，使用表格数据
网页制作实例教程（第3版）
4.1 制作表格网页
4.1.1 插入表格
1．用菜单命令新建表格
步骤：“插入”菜单→“表格”。
2．用插入面板的“表格”按钮新建表
4.6 上机实验
<head> <head><title>上机实验4-2</title></head> <body > <table width="650" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="300" height="400"> <img src="image/tu-1.jpg" width="300" height="400"> </td> <td valign="top" background="image/tu-2.jpg"> <p> </p> <font size="4" color="#006600"><p> 世界上最远的距离 <br> 不是生与死的距离 <br> 而是我站在你面前 <br> 你不知道我爱你 <br> 世界上最远的距离 <br> 不是我站在你面前你不知道我爱你 <br>
网页制作实例教程（第3版）
4.6 上机实验
4.6.1 实验1-网页中使用导航图像
实验要求： （1）用表格布局页面。 （2）设置表格背景图像。 （3）制作横向导航条。 （4）在表格中插入文字和图像。
网页制作实例教程（第3版）
4.6 上机实验
4.6.2 实验2-用HTML代码制作表格网页
网页制作实例教程（第3版）
网页制作实例教程（第3版）
4.6 上机实验
而是爱到痴迷却不能说我爱你 <br> 世界上最远的距离<br> 不是我不能说我爱你<br> 而是想你痛彻心脾却只能深埋心底 <br> 世界上最远的距离<br> 不是我不能说我想你<br> 而是彼此相爱却不能够在一起<br> 世界上最远的距离<br> 不是彼此相爱却不能够在一起<br> 而是明知道真爱无敌却装作毫不在意<br> </font> </td> </tr> </table> </body> </html>