网页设计与开发实验课件第6章 表格

主要内容熟悉表格的常用属性，制作表格利用表格来容纳表格式数据利用表格进行页面的排版布局6.1表格简介表格在网站应用中非常广泛，几乎所有的HTML页面中都或多或少地采用表格，表格可以方便灵活地实现对网页的排版，可以把相互关联的信息元素集中定位，使浏览页面的人一目了然，赏心悦目。所以说要制作好网页，就要学好表格，熟练掌握和运用表格的各种属性。6.2.1表格基本标记表格标签在HTML语法中，表格主要通过3个标签来构成：<table>、<tr>、<td>。基本语法：

<table><tr><td>…</td>…</tr><tr><td>…</td>…</tr>…</table>6.2.1表格基本标记<!--实例6-1代码--><html><head><title>定义表格</title></head><body><tablewidth="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>数据结构</td><td>Web开发实验</td></tr></table></body></html>6.2.1表格基本标记6.2.2表格标题表格标题就是对表格内容的简单说明，用<caption>标签实现。基本语法：<caption>…</caption>

6.2.2表格标题<!--程序6-2-->…<tablewidth="600"border="1"><caption>课程表</caption><tr><!--表格第一行--><td>节次</td><td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td></tr>…</table6.2.2表格标题6.2.3表格表头表头指表格的第一行，文字样式为居中、加粗，通过<th>标签实现。基本语法：

<table><tr><th>…</th>…</tr><tr><td>…</td>…</tr>…</table>6.2.3表格表头<!--程序6-3-->…<tablewidth="600"border="1"><caption>课程表</caption><tr><!--表格表头--><th>节次</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr>…</table>6.2.3表格表头6.3表格修饰表格是网页布局中的重要元素，它有丰富的属性，可以对其进行相关设置。6.3.1设置表格的边框属性表格的边框默认情况下表格边框为0，可以通过给表格添加属性及属性值，实现为表格设置边框线以及美化表格的目的，常见属性如表6-2所示。基本语法：<tableborder=””bordercolor=””><!--程序6-4-->…<tablewidth="600"border="1"bordercolor="#00FF00">…</table>6.3.2设置表格的宽度和高度表格的宽度和高度默认情况下，表格的宽度和高度会根据内容自动调整。基本语法：<tablewidth=””height=””><!--程序6-5->…<tablewidth="600"height="200"border="1">…</table>6.3.2设置表格的宽度和高度6.3.3设置表格背景表格背景表格背景默认为白色，根据网页设计要求，设置bgcolor属性，可以设定表格背景颜色，以增加视觉效果。基本语法：<tablebgcolor=””><!--程序6-7-->…<tablewidth="600"border="1"bgcolor="#f5f5dc">…</table>6.3.4设置表格的背景图像表格背景图像表格背景图像可以是GIF、JPEG或PNG三种图像格式。基本语法：<tablebackgruond=””><!--程序6-7-->…<tablewidth="600"border="1"background="kechengbiao.gif">…</table>6.3.5设置边框样式边框的样式在前面我们使用border属性时，每个单元格之间以及表格本身会出现边框，我们可以利用frame属性控制应该显示哪些表格边框，利用rules属性控制应该显示哪些内部边框。基本语法：<tableframe=””rules=””><!--程序6-8-->…<tablewidth=”600"border="1"frame="hsides"rules="all">…</table>6.3.5设置边框样式6.3.6设置表格单元格间距单元格的间距通过cellspacing属性可以调整表格的单元格和单元格之间的间距，使得表格布局不会显得过于紧凑。基本语法：<tablecellspacing=""><!--程序6-9-->…<tablewidth="600"border="1"cellspacing="15">…</table>6.3.6设置表格单元格间距6.3.7设置表格单元格边距单元格边距单元格边距是指单元格中的内容与单元格边框的距离。基本语法：<tablecellpadding=""><!--程序6-10-->…<tablewidth="600"border="1"cellspacing="15"cellpadding="10">…</table>6.3.7设置表格单元格边距6.3.8设置表格的水平对齐属性水平对齐在水平方向上，可以设置表格的对齐方式为：left居左、center居中、right

居右。如果没特别进行设置，则默认为居左。基本语法：<tablealign=””><!--程序6-11-->…<tablewidth="600"border="1"align="center">…</table>6.4设置表格行的属性

6.4设置表格行的属性<tr>的属性用于设定表格中某一行的属性。6.4.1行内容水平对齐基本语法：<tralign=””>…</tr><!--程序6-12-><html><head><title>设定表格水平对齐</title></head><body><tablewidth="600"border="1"align="center"><caption>课程表</caption><tralign="center"><th>节次</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th>6.4.1行内容水平对齐<th>星期五</th><tr><tralign="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>数据结构</td><td>Web开发实验</td></tr><tr><tdcolspan="6">适用时间：2020~2021第一学期203007班</td></tr></table></body></html>6.4.1行内容水平对齐6.4.2行内容垂直对齐基本语法：<trvalign=””>…</tr><!--程序6-13--><html><head><title>设定表格行内容垂直对齐</title></head><body><tablewidth="600"height="200"border="1"align="center"><caption>课程表</caption><trvalign="top">…<tr>6.4.2行内容垂直对齐<trvalign="bottom">…</tr><tr><!--表格第二行-->…</tr><tr><tdcolspan="6">适用时间：2020~2021第一学期203007班</td></tr></table></body></html>6.4.2行内容垂直对齐6.5设置表格中某一单元格的属性<td>的属性用于设定表格中某一单元格的属性6.5.1设置单元格跨行跨行合并单元格的rowspan属性可实现单元格的跨行合并（纵向合并）。基本语法：<tdrowspan=””>…</td>6.5.1设置单元格跨行<!--程序6-14--><html><head><title>设定跨行的表格</title></head><body><tablewidth="600"border="1"cellpadding="0"cellspacing="0"align="center"><caption>课程表</caption><tr><th>节次</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><tr><tr><td>第12节</td><td>体育</td>6.5.1设置单元格跨行<td>大学英语</td><td>高等数学</td><tdrowspan=“2”valign=“middle”>数据结构</td><!--此处定义了一个单元格占了两行--><td>Web开发</td></tr><tr><td>第34节</td><td>大学英语</td><td>高等数学</td><td>数据结构</td><!--此处开始少了一个单元格，因为上一行已经定义--><td>Web开发实验</td></tr><tr><tdcolspan="6">适用时间：2020~2021第一学期203007班</td></tr></table></body></html>6.5.1设置单元格跨行6.5.2设置单元格跨列跨列合并colspan属性可以进行单元格的跨列合并（横向合并）。基本语法：<tdcolspan="">…</td>6.5.2设置单元格跨列<!--程序6-15--><html><head><title>设定跨列的表格</title></head><body><tablewidth="600"border="1"cellpadding="0"cellspacing="0"align="center"><caption>课程表</caption><tr><th>节次</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><tr><tr><!---此表格行和上下两行相比少了一列定义，但最后一个单元格实际上占了两列-->6.5.2设置单元格跨列<td>第12节</td><td>体育</td><td>大学英语</td><td>高等数学</td><tdcolspan="2"align="center">数据结构</td><!--此处定义了一个单元格占了两列--><!--此处开始少了一个单元格，因为上一单元格已经定义--></tr><tr><td>第34节</td><td>大学英语</td><td>高等数学</td><td>数据结构</td><td>数据结构实验</td><td>Web开发实验</td></tr><tr><tdcolspan="6">适用时间：2020~2021第一学期203007班</td></tr></table></body></html>6.5.2设置单元格跨列6.6表格嵌套表格嵌套就是根据插入元素的需要，在一个表格的某个单元格里再插入一个若干行和列的表格。对嵌套表格，可以像对任何其他表格一样进行格式设置，但是其宽度受它所在单元格的宽度的限制。利用表格的嵌套，一方面可以编辑出复杂而精美的效果，另一方面可根据布局需要来实现精确的编排。!注意:嵌套层次越多，网页的载入速度就会越慢。6.6表格嵌套

<!--程序6-16--><html><head><title>表格嵌套</title></head><body><tablewidth="700"border="1"cellpadding="0"cellspacing="0"align="center"><caption>课程表</caption><tr><tdwidth="100">203007班</td><td><!--此处嵌套了一个班的课程表--><tablewidth="100%"border="1"cellpadding="0"cellspacing="0"frame="void"><tr>6.6表格嵌套

<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>6.6表格嵌套

<td>第34节</td><td>大学英语</td><td>高等数学</td><td>数据结构</td><td>数据结构实验</td><td>Web开发实验</td></tr></table></td></tr><tr><td>203008班</td><td><!—此处省略了嵌套的课程表，内容同上--></td></tr></table></body></html>6.6表格嵌套6.7小实例一些设计人员喜欢使用表格来进行页面布局，因为它的效果在不同的浏览器中更容易保持一致，虽然目前更流行的是利用“DIV+CSS”技术进行页面布局。6.7小实例<!--程序6-17--><html><head><title>利用表格实现页面布局</title></head><body><tableborder="1"width="650"align="center"><tr><tdwidth="150"height="80">网站标