第六章 表格
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第六章表格
表格是网页制作中一种常用的页面布局工具。
通过表格可以精确地控制网页各元素在网页中的位置，从而方便页面的排版和布局，所以，表格布局是网页排版的一种方式。
1 表格简介
表格在网站应用中非常广泛，几乎所有的HTML页面中都或多或少地采用表格，表格可以方便灵活地实现对网页的排版，可以把相互关联的信息元素集中定位，使浏览页面的人一目了然，赏心悦目。
2 表格标记
2.1 表格基本标记
在HTML语法中，表格主要通过3个标签来构成：<table>、<tr>、<td>。
格式：
<table>
<tr>
<td>…</td>
…
</tr>
<tr>
<td>…</td>
…
</tr>
…
</table>
✓<table>代表表格的开始，</table>表示表格的结束
✓<tr>代表行的开始，</tr>代表行的结束。
✓<td>….</td>之间是单元格的内容，可以是文字，也可以是其它标记，如一个按钮等。
<td>标记必须放在<tr>标记内
✓在一个表格中，<tr>的个数代表表格的行数，每对<tr>…</tr>之间<td>的个数代表该行的单元格数。
实例1.html，设计一个简单课程表格。
<html>
<head>
<title>定义表格</title>
</head>
<body>
<table width="600" border="1">
<tr> <!--表格第一行-->
<td>节次</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
</tr>
<tr> <!--表格第二行-->
<td>第12节</td>
<td>体育</td>
<td>大学英语</td>
<td>高等数学</td>
<td>电子商务网站运营</td>
<td>Web应用技术</td>
</tr>
<tr> <!--表格第二行-->
<td>第34节</td>
<td>大学英语</td>
<td>高等数学</td>
<td>电子商务案例</td>
<td>Web应用技术</td>
<td>电子商务安全</td>
</tr>
</table>
</body>
</html>
网页效果如图6-1所示。
图6-1定义表格
2.2 表格标题
表格标题，就是对表格内容的简单说明，用<caption>标记实现。
格式：<caption>…</caption>
实例2.html。
<html>
<head>
<title>定义表格标题</title>
</head>
<body>
<table width="600" border="1">
<caption>课程表</caption>
<tr> <!--表格第一行--> <td>节次</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
</tr>
<tr> <!--表格第二行--> <td>第12节</td>
<td>体育</td>
<td>大学英语</td>
<td>高等数学</td>
<td>数据结构实验</td>
<td>Web开发</td>
</tr>
<tr> <!--表格第二行--> <td>第34节</td>
<td>大学英语</td>
<td>高等数学</td>
<td>数据结构</td>
<td>数据结构</td>
<td>Web开发实验</td>
</tr>
</table>
</body>
</html>
网页效果如图6-2所示。
图6-2设定表格标题
2.3 表格表头
表头，指表格的第一行，文字样式为居中、加粗显示，通过<th>标签实现。
格式：
<table>
<tr>
<th>…</th>
…
</tr>
<tr>
<td>…</td>
…
</tr>
…
</table>
实例3.html。
<html>
<head>
<title>定义表格</title>
</head>
<body>
<table width="600" border="1">
<caption>课程表</caption>
<tr> <!--表格第一行-->
<th>节次</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr> <!--表格第二行-->
<td>第12节</td>
<td>体育</td>
<td>大学英语</td>
<td>高等数学</td>
<td>电子商务网站运营</td>
<td>Web应用技术</td>
</tr>
<tr> <!--表格第二行-->
<td>第34节</td>
<td>大学英语</td>
<td>高等数学</td>
<td>电子商务案例</td>
<td>Web应用技术</td>
<td>电子商务安全</td>
</tr>
</table>
</body>
</html>
网页效果如图6-3所示。
图6-3设定表格的表头
2.4 设置划分结构的表格
为了清楚区分表格结构，将一个表格分三个部分在网页上显示出来，HTML 语言规定了<thead>、<tbody>、<tfoot>3个标签分别对应于表格的表首、表主体和表尾。
格式：
<thead>…</thead>
<tbody>…</tbody>
<tfoot>…</tfoot>
✓<thead>标记用于定义表格的表首样式，<tbody>标记用于定义表格的主体的样式，<tfoot>标记用于定义表格的表尾的样式。
✓必须使用全部的元素，它们的出现次序是thead、tfoot、tbody，必须在table元素内使用这些标记。
实例4.html，使用了上面的三个标记，将网页结构划分成了三个部分。
<html>
<head>
<title>定义表格结构</title>
</head>
<body>
<table width="600" border="1">
<caption>课程表</caption>
<thead><!--表格标题-->
<tr>
<th>节次</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tfoot><!--表格页脚-->
<tr><td colspan="6">适用时间：2009～2010第二学期0901班</td></tr>
</tfoot>
<tbody><!--表格表体-->
<tr>
<td>第12节</td>
<td>体育</td>
<td>大学英语</td>
<td>高等数学</td>
<td>电子商务网站运营</td>
<td>Web应用技术</td>
</tr>
<tr> <!--表格第二行-->
<td>第34节</td>
<td>大学英语</td>
<td>高等数学</td>
<td>电子商务案例</td>
<td>Web应用技术</td>
<td>电子商务安全</td>
</tr>
</tbody>
</table>
</body>
</html>
页脚中出现的<td colspan=6>标记，其中colspan属性表示合并6个单元格，这是为了和表头标题保持一致。
网页效果如图6-4所示。
图6-4设定划分结构的表格
3表格属性
表格是网页布局中的重要元素，它有丰富的属性，可以对其进行相关设置。
常见属性如表6-1所示。
3.1 设置表格的边框属性
默认情况下表格边框为0，可以通过给表格添加border、bordercolor、
bordercolorlight、bordercolordark属性，为表格设置边框线以便美化表格。
格式：
<table border="" bordercolor="" bordercolorlight="" bordercolordark="">
实例5.html，设置了边框线border宽度为1、上边框颜色bordercolorlight和下边框颜色bordercolordark颜色。
<html>
<head>
<title>定义表格边框</title>
</head>
<body>
<table width="600" border="1" bordercolor="#00FF00"
bordercolordark="#0000FF">
<caption>课程表</caption>
<thead><!--表格标题-->
<tr>
<th>节次</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tfoot><!--表格页脚-->
<tr><td colspan="6">适用时间：2009～2010第二学期0901班</td></tr>
</tfoot>
<tbody><!--表格表体-->
<tr>
<td>第12节</td>
<td>体育</td>
<td>大学英语</td>
<td>高等数学</td>
<td>电子商务网站运营</td>
<td>Web应用技术</td>
</tr>
<tr> <!--表格第二行-->
<td>第34节</td>
<td>大学英语</td>
<td>高等数学</td>
<td>电子商务案例</td>
<td>Web应用技术</td>
<td>电子商务安全</td>
</tr>
</tbody>
</table>
</body>
</html>
网页效果如图6-5所示。
图6-5定义表格
3.2 设置表格的宽度和高度
格式：<table width="" height="">
✓width和height的属性值可以是像素或百分比。
✓对于非嵌套表格，百分比表示的是表格应该占据的浏览器窗口的百分比；对于嵌套表格，百分比表示的是相对嵌套表格所在的单元格宽度。
✓用百分比设置大小的表格会随着浏览器窗口或嵌套表格所在的单元格的大小变化而调整，而用像素设置大小的表格时绝对大小。
✓默认情况下，表格的宽度和高度会根据内容自动调整。
实例6.html，课程表格的宽度一直保持为600像素，但高度设定了200像素，每行的高度自动增加了。
<html>
<head>
<title>设置表格的宽度和高度</title>
</head>
<body>
<table width="600" height="300" border="1" >
<caption>课程表</caption>
<thead><!--表格标题-->
<tr>
<th>节次</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tfoot><!--表格页脚-->
<tr><td colspan="6">适用时间：2009～2010第二学期0901班</td></tr>
</tfoot>
<tbody><!--表格表体-->
<tr>
<td>第12节</td>
<td>体育</td>
<td>大学英语</td>
<td>高等数学</td>
<td>电子商务网站运营</td>
<td>Web应用技术</td>
</tr>
………………
</tbody>
</table>
</body>
</html>
网页效果如图6-6所示。
图6-6设置表格的宽度和高度
3.3 设置表格背景颜色
表格背景默认为白色，根据网页设计要求，设置bgcolor属性，可以设定表
格背景颜色，以增加视觉效果。
格式：<table bgcolor="">
bgcolor属性的值可以是6位十六进制数或该颜色的英文单词。
实例7.html。
<html>
<head>
<title>定义表格背景颜色</title>
</head>
<body>
<table width="600" border="1" bgcolor="#f5f5dc">
<caption>课程表</caption>
<thead><!--表格标题-->
<tr>
<th>节次</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
……………..
</tbody>
</table>
</body>
</html>
网页效果如图6-7所示。
图6-7定义表格背景颜色
3.4 设置表格的背景图像
表格背景图像可以是GIF、JPEG或PNG三种图像格式。
格式：<table backgruond="">
background属性值是背景图片文件的相对路径或完整路径。
实例8.html。
<html>
<head>
<title>定义表格背景图像</title>
</head>
<body>
<table width="600" border="1" background="img/background.jpg"> <caption>课程表</caption>
<thead><!--表格标题-->
<tr>
<th>节次</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
………..
</tbody>
</table>
</body>
</html>
网页效果如图6-8所示。
图6-8设置表格的背景图像
3.5 设置边框样式
使用border属性时，每个单元格之间以及表格本身会出现边框，可以利用frame属性控制应该显示哪些表格边框，利用rules属性控制应该显示哪些内部边框。
格式：<table frame="" rules="">
frame属性值如表6-2所示。
实例9.html，设定表格边框样式，只显示上下边框，将属性frame的值设置为hsides，隐藏左右边框，同时定义内部仅显示行边框，属性rules设置为rows。
<html>
<head>
<title>设置表格的宽度和高度</title>
</head>
<body>
<table width="600" border="1" frame="hsides" rules="rows">
<caption>课程表</caption>
<thead><!--表格标题-->
<tr>
<th>节次</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tfoot><!--表格页脚-->
<tr><td colspan="6">适用时间：2009～2010第二学期0901班</td></tr>
</tfoot>
<tbody><!--表格表体-->
<tr>
<td>第12节</td>
<td>体育</td>
<td>大学英语</td>
<td>高等数学</td>
<td>电子商务网站运营</td>
<td>Web应用技术</td>
</tr>
………………
</tbody>
</table>
</body>
</html>
网页效果如图6-9所示。
图6-9设定表格边框样式
3.6 设置表格单元格间距
通过cellspacing属性可以调整表格的单元格和单元格之间的间距，使得表格布局不会显得过于紧凑。
格式：<table cellspacing=" ">
单元格的间距以像素以单位，默认值是2。
实例10.html。
<html>
<head>
<title>定义表格单元格间距</title>
</head>
<body>
<table width="600" border="1" cellspacing="15">
<caption>课程表</caption>
<thead><!--表格标题-->
<tr>
<th>节次</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
……………..
</tbody>
</table>
</body>
</html>
网页效果如图6-10所示。
图6-10设定表格单元格间距
3.7 设置表格单元格边距
单元格边距是指单元格中的内容与单元格边框的距离。
格式：<table cellpadding=" ">
单元格的边距以像素为单位。
实例11.html。
<html>
<head>
<title>定义表格单元格边距</title>
</head>
<body>
<table width="600" border="1" cellpadding="15">
<caption>课程表</caption>
<thead><!--表格标题-->
<tr>
<th>节次</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
………..
</tbody>
</table>
</body>
</html>
网页效果如图6-11所示。
图6-11设置表格的背景图像
3.8 设置表格的水平对齐属性
在水平方向上，可以设置表格的对齐方式为：居左、居中、居右。
如果没特别进行设置，则默认为居左排列。
格式：<table align="">
align的值可以分别为left、right、center
实例12.html。
<html>
<head>
<title>设定表格水平对齐</title>
</head>
<body>
<table width="600" border="1" align="center"> <caption>课程表</caption>
<thead><!--表格标题-->
<tr>
<th>节次</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
………..
</tbody>
</table>
</body>
</html>
网页效果如图6-12所示。
图6-12设定表格水平对齐
4设置表格行的属性
<tr>的属性用于设定表格中某一行的属性。
4.1 行内容水平对齐
格式：
<tr align="">…</tr>
实例13.html。
<html>
<head>
<title>设定表格行的水平对齐</title>
</head>
<body>
<table width="600" border="1" align="center"> <caption>课程表</caption>
<tr align="center">
<th>节次</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr align="right">
<td>第12节</td>
<td>体育</td>
<td>大学英语</td>
<td>高等数学</td>
<td>电子商务网站运营</td>
<td>Web应用技术</td>
</tr>
<tr>
<td>第34节</td>
<td>大学英语</td>
<td>高等数学</td>
<td>电子商务案例</td>
<td>Web应用技术</td>
<td>电子商务安全</td>
</tr>
<tr><td colspan="6">适用时间：2009～2010第二学期0901班</td></tr> </table>
</body>
</html>
网页效果如图6-13所示。
图6-13行内容水平对齐
4.2 行内容垂直对齐
格式：<tr valign="">…</tr>
valign的值可以分别为居上top、居中middle和居下bottom，它的默认值是居中。
实例14.html，课程表格表头被设置为居上对齐，第二行被设置为居下对齐，第三行没有特别定义，默认居中对齐。
<html>
<head>
<title>设定表格行内容垂直对齐</title>
</head>
<body>
<table width="600" border="1" align="center">
<caption>课程表</caption>
<tr valign="top">
<th>节次</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr valign="bottom">
<td>第12节</td>
<td>体育</td>
<td>大学英语</td>
<td>高等数学</td>
<td>电子商务网站运营</td>
<td>Web应用技术</td>
</tr>
<tr>
<td>第34节</td>
<td>大学英语</td>
<td>高等数学</td>
<td>电子商务案例</td>
<td>Web应用技术</td>
<td>电子商务安全</td>
</tr>
<tr><td colspan="6">适用时间：2009～2010第二学期0901班</td></tr> </table>
</body>
</html>
网页效果如图6-14所示。
图6-14设定表格行内容垂直对齐
5 设置表格中某一单元格的属性
<td>的属性用于设定表格中某一单元格的属性。
5.1 设置单元格跨行
单元格的rowspan属性可实现单元格的跨行合并(纵向合并)。
格式：<td rowspan="">…</td>
rowspan的值为单元格跨越的行数。
如果创建跨越两行的单元格rowspan=2，那么在下一行中就不用定义相应的单元格，如果创建跨越三行的单元格rowspan=3，那么在下两行中就不用定义相应的单元格，以此类推。
实例15.html。
<html>
<head>
<title>设定跨行的表格</title>
</head>
<body>
<table width="600" border="1" align="center">
<caption>课程表</caption>
<tr valign="top">
<th>节次</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr valign="bottom">
<td>第12节</td>
<td>体育</td>
<td>大学英语</td>
<td>高等数学</td>
<td rowspan="2" valign="middle">电子商务网站运营</td><!--此处定义了一个单元格占了两行-->
<td>Web应用技术</td>
</tr>
<tr>
<td>第34节</td>
<td>大学英语</td>
<td>高等数学</td>
<td>电子商务案例</td>
<!--此处开始少了一个单元格，因为上一行已经定义-->
<td>电子商务安全</td>
</tr>
<tr><td colspan="6">适用时间：2009～2010第二学期0901班</td></tr> </table>
</body>
</html>
网页效果如图6-15所示。
图6-15设置表格的背景图像
5.2 设置单元格跨列
colspan属性可以进行单元格的跨列合并（横向合并）。
格式：<td colspan=" ">…</td>
colspan的值为单元格跨越的列数。
若在一行中创建跨越两列的单元格colspan=2，那么在该行中就应该少定义一个单元格，若在一行中创建跨越三列的单元格colspan=3，那么在该行中就少定义两个单元格，以此类推。
实例16.html。
<html>
<head>
<title>设定跨列的表格</title>
</head>
<body>
<table width="600" border="1" cellpadding="0" cellspacing="0" align="center">
<caption>课程表</caption>
<tr valign="top">
<th>节次</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr valign="bottom">
<td>第12节</td>
<td>体育</td>
<td>大学英语</td>
<td>高等数学</td>
<td colspan="2" align="center">电子商务网站运营</td>
<!--此处定义了一个单元格占了两列-->
<!--此处开始少了一个单元格，因为上一单元格已经定义--> </tr>
<tr>
<td>第34节</td>
<td>大学英语</td>
<td>高等数学</td>
<td>电子商务案例</td>
<td>Web应用技术</td>
<td>电子商务安全</td>
</tr>
<tr><td colspan="6">适用时间：2009～2010第二学期0901班</td></tr> </table>
</body>
</html>
网页效果如图6-16所示。
图6-16设定跨列的表格
6 表格嵌套
表格嵌套就是根据插入元素的需要，在一个表格的某个单元格里再插入一个若干行和列的表格。
对嵌套表格，可以像对任何其它表格一样进行格式设置，但是其宽度受它所在单元格的宽度的限制。
利用表格的嵌套，一方面可以编辑出复杂而精美的效果，另一方面可根据布局需要来实现精确的编排。
不过，需要注意的是，嵌套层次越多，网页的载入速度就会越慢。
实例17.html，在一张大表中嵌入了两个班的课程表。
先创建外围的表格，然后在合适的单元格插入已经调好效果的表格。
<html>
<head>
<title>表格嵌套</title>
</head>
<body>
<table width="850" border="1" cellpadding="0" cellspacing="0"
align="center">
<caption>课程表</caption>
<tr>
<td width="80">0901班</td>
<td>
<!-- 此处嵌套了一个班的课程表-->
<table width="100%" border="1" cellpadding="0" cellspacing="0"
frame="void">
<tr>
<th>节次</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<tr>
<tr>
<td>第12节</td>
<td>体育</td>
<td>大学英语</td>
<td>高等数学</td>
<td>电子商务概论</td>
<td>计算机网络技术</td>
</tr>
<tr>
<td>第34节</td>
<td>大学英语</td>
<td>高等数学</td>
<td>电子商务网站建设</td>
<td>电子商务系统分析</td>
<td>Web应用技术</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>0801班</td>
<td>
<table width="100%" border="1" cellpadding="0" cellspacing="0" frame="void">
<tr>
<th>节次</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<tr>
<tr>
<td>第12节</td>
<td>体育</td>
<td>大学英语</td>
<td>高等数学</td>
<td>电子商务与物流</td>
<td>电子商务系统开发</td>
</tr>
<tr>
<td>第34节</td>
<td>大学英语</td>
<td>统计学</td>
<td>软件工程</td>
<td>电子商务安全</td>
<td>网页设计与制作</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
网页效果如图6-17所示。
图6-17表格嵌套
7综合示例
一些设计人员喜欢使用表格来进行页面布局，因为它的效果在不同的浏览器中更容易保持一致，虽然目前更流行的是利用“DIV+CSS”技术进行页面布局。
实例18.html，利用表格嵌套来实现网页的布局。
<html>
<head>
<title>利用表格实现页面布局</title>
</head>
<body>
<table border="1" width="650" align="center">
<tr>
<td width="150" height="80">网站标志</td>
<td colspan="2">广告条</td>
</tr>
<tr>
<td>
<table border="1" width=100% height="200" frame="void">
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td>导航条</td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
</table>
</td>
<td>内容一</td>
<td>内容二</td>
</tr>
<tr>
<td colspan="3" align="center">版权信息</td>
</tr>
</table>
</body>
</html>
网页效果如图6-18所示。
图6-18利用表格实现页面布局。