Download presentation
Presentation is loading. Please wait.
1
第7章 表 格 清华大学出版社
2
主要内容 熟悉表格的常用属性，制作表格 利用表格来容纳表格式数据 利用表格进行页面的排版布局
3
6.1表格简介 表格在网站应用中非常广泛，几乎所有的HTML页面中都或多或少地采用表格，表格可以方便灵活地实现对网页的排版，可以把相互关联的信息元素集中定位，使浏览页面的人一目了然，赏心悦目。所以说要制作好网页，就要学好表格，熟练掌握和运用表格的各种属性。
4
6.2.1表格基本标记 在HTML语法中，表格主要通过3个标签来构成：<table>、<tr>、<td>。 基本语法： <table> <tr> <td>…</td> … </tr> </table>
5
6.2.1表格基本标记 <!--实例6-1代码--> <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> <!--表格第二行-->
6
6.2.1表格基本标记 <td>第12节</td> <td>体育</td>
<td>Web开发</td> </tr> <tr> <!--表格第二行--> <td>第34节</td> <td>数据结构</td> <td>Web开发实验</td> </table> </body> </html>
7
6.2.1表格基本标记
8
6.2.2表格标题 表格标题，就是对表格内容的简单说明，用<caption>标签实现。 基本语法：
<caption>…</caption>
9
6.2.2表格标题 <!--程序6-2--> … <table width="600" border="1">
<caption>课程表</caption> <tr> <!--表格第一行--> <td>节次</td> <td>星期一</td> <td>星期二</td> <td>星期三</td> <td>星期四</td> <td>星期五</td> </tr> </table
10
6.2.2表格标题
11
6.2.3表格表头 表头，指表格的第一行，文字样式为居中、加粗显示，通过<th>标签实现。 基本语法：
<table> <tr> <th>…</th> … </tr> <td>…</td> </table>
12
6.2.3表格表头 <!--程序6-3--> … <table width="600" border="1">
<caption>课程表</caption> <tr> <!--表格表头--> <th>节次</th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> </table>
13
6.2.3表格表头
14
6.2.4设置划分结构的表格 <thead>…</thead>
为了清楚区分表格结构，将一个表格分三个部分在网页上显示出来，HTML语言规定了<thead>、<tbody>、<tfoot>3个标签分别对应于表格的表首、表主体和表尾。 基本语法： <thead>…</thead> <tbody>…</tbody> <tfoot>…</tfoot>
15
6.2.4设置划分结构的表格 <!--程序6-4--> <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> </thead> <tfoot> <!--表格的页脚--> <tr><td colspan="6">适用时间：2008~2009第一学期083007班</td></tr> </tfoot>
16
6.2.4设置划分结构的表格 <tbody> <!--表格表体--> <tr>
<td>第12节</td> <td>体育</td> <td>大学英语</td> <td>高等数学</td> <td>数据结构实验</td> <td>Web开发</td> </tr> <td>第34节</td> <td>数据结构</td> <td>Web开发实验</td> </tbody> </table> </body> </html>
17
6.2.4设置划分结构的表格
18
6.3表格修饰 表格是网页布局中的重要元素，它有丰富的属性，可以对其进行相关设置。
19
6.3.1设置表格的边框属性 默认情况下表格边框为0，可以通过给表格添加属性及属性值，实现为表格设置边框线以及美化表格的目的，常见属性如表6-3所示。 基本语法： <table border=” ” bordercolor=” ” bordercolorlight=” ” bordercolordark=” ” >
20
6.3.1设置表格的边框属性 <!--程序6-5--> …
<table width="600" border="1" bordercolor ="#00FF00" bordercolorlight＝"#FF0000" bordercolordark="#0000FF"> </table>
21
6.3.2设置表格的宽度和高度 默认情况下，表格的宽度和高度会根据内容自动调整。 基本语法：
<table width=” ” height=” ”>
22
6.3.2设置表格的宽度和高度 <!--程序6-6--> …
<table width="600" height="200" border="1"> </table>
23
6.3.2设置表格的宽度和高度
24
6.3.3 设置表格背景 表格背景默认为白色，根据网页设计要求，设置bgcolor属性，可以设定表格背景颜色，以增加视觉效果。 基本语法：
<table bgcolor=” ”>
25
6.3.3 设置表格背景 <!--程序6-7--> …
<table width="600" border="1" bgcolor="#f5f5dc"> </table>
26
6.3.4 设置表格的背景图像 表格背景图像可以是GIF、JPEG或PNG三种图像格式。 基本语法：
<table backgruond=” ”>
27
6.3.4 设置表格的背景图像 <!--程序6-8--> …
<table width="600" border="1" background ="kechengbiao.gif"> </table>
28
6.3.5 设置边框样式 在前面我们使用border属性时，每个单元格之间以及表格本身会出现边框，我们可以利用frame属性控制应该显示哪些表格边框，利用rules属性控制应该显示哪些内部边框。 基本语法： <table frame=” ” rules=” ”>
29
6.3.5 设置边框样式 <!--程序6-9--> …
<table width=”600" border="1" frame="hsides" rules ="all"> </table>
30
6.3.5 设置边框样式
31
6.3.6 设置表格单元格间距 通过cellspacing属性可以调整表格的单元格和单元格之间的间距，使得表格布局不会显得过于紧凑。
基本语法： <table cellspacing=" ">
32
6.3.6 设置表格单元格间距 <!--程序6-10--> …
<table width="600" border="1" frame="hsides" rules ="all" cellspacing="15"> </table>
33
6.3.6 设置表格单元格间距
34
6.3.7设置表格单元格边距 单元格边距是指单元格中的内容与单元格边框的距离。 基本语法：
<table cellpadding=" ">
35
6.3.7设置表格单元格边距 <!--程序6-11--> …
<table width="600" border="1" frame="hsides" rules ="all" cellspacing="15" cellpadding="10"> </table>
36
6.3.7设置表格单元格边距
37
6.3.8设置表格的水平对齐属性 在水平方向上，可以设置表格的对齐方式为：居左、居中、 居右。如果没特别进行设置，则默认为居左排列。
在水平方向上，可以设置表格的对齐方式为：居左、居中、 居右。如果没特别进行设置，则默认为居左排列。 基本语法： <table align=” ”>
38
6.3.8设置表格的水平对齐属性 <!--程序6-12--> …
<table width="600" border="1" align="center"> </table>
39
6.4设置表格行的属性 6.4设置表格行的属性 <tr>的属性用于设定表格中某一行的属性。
40
6.4.1行内容水平 基本语法： <tr align=” ”>…</tr> <!--程序6-13->
<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>
41
6.4.1行内容水平 <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>Web开发实验</td> <tr><td colspan="6">适用时间：2008~2009第一学期083007班</td></tr> </table> </body> </html>
42
6.4.1行内容水平
43
6.4.2行内容垂直对齐 基本语法： <tr valign=” ”>…</tr>
<!--程序6-14--> <html> <head> <title>设定表格行内容垂直对齐</title> </head> <body> <table width="600" height="200" border="1" align="center"> <caption>课程表</caption> <tr valign="top"> … <tr>
44
6.4.2行内容垂直对齐 <tr valign="bottom"> … </tr>
<tr><td colspan="6">适用时间：2008~2009第一学期083007班</td></tr> </table> </body> </html>
45
6.4.2行内容垂直对齐
46
6.5 设置表格中某一单元格的属性 <td>的属性用于设定表格中某一单元格的属性
47
6.5.1设置单元格跨行 单元格的rowspan属性可实现单元格的跨行合并（纵向合并）。 基本语法：
<td rowspan=” ”>…</td>
48
6.5.1设置单元格跨行 <!--程序6-15--> <html> <head>
<title>设定跨行的表格</title> </head> <body> <table width="600" border="1" cellpadding="0" cellspacing="0" align="center"> <caption>课程表</caption> <tr> <th>节次</th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> <td>第12节</td> <td>体育</td>
49
6.5.1设置单元格跨行 <td>大学英语</td> <td>高等数学</td>
<td rowspan=“2” valign=“middle”>数据结构</td> <!--此处定义了一个单元格 占了两行--> <td>Web开发</td> </tr> <tr> <td>第34节</td> <td>数据结构</td> <!--此处开始少了一个单元格，因为上一行已经定义--> <td>Web开发实验</td> <tr><td colspan="6">适用时间：2008~2009第一学期083007班</td></tr> </table> </body> </html>
50
6.5.1设置单元格跨行
51
6.5.2设置单元格跨列 colspan属性可以进行单元格的跨列合并（横向合并）。 基本语法：
<td colspan=" ">…</td>
52
6.5.2设置单元格跨列 <!--程序6-16--> <html> <head>
<title>设定跨列的表格</title> </head> <body> <table width="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> <!---此表格行和上下两行相比少了一列定义，但最后一个单元格实际上占了两列--> <td>第12节</td> <td>体育</td> <td>大学英语</td> <td>高等数学</td>
53
6.5.2设置单元格跨列 <td colspan="2" align="center">数据结构</td> <!--此处定义了一个单元格占了两列--> <!--此处开始少了一个单元格，因为上一单元格已经定义--> </tr> <tr> <td>第34节</td> <td>大学英语</td> <td>高等数学</td> <td>数据结构</td> <td>数据结构实验</td> <td>Web开发实验</td> <tr><td colspan="6">适用时间：2008~2009第一学期083007班</td></tr> </table> </body> </html>
54
6.5.2设置单元格跨列
55
6.6表格嵌套 表格嵌套就是根据插入元素的需要，在一个表格的某个单元格里再插入一个若干行和列的表格。对嵌套表格，可以像对任何其他表格一样进行格式设置，但是其宽度受它所在单元格的宽度的限制。利用表格的嵌套，一方面可以编辑出复杂而精美的效果，另一方面可根据布局需要来实现精确的编排。不过，需要注意的是，嵌套层次越多，网页的载入速度就会越慢。
56
6.6表格嵌套 <!--程序6-17--> <html> <head>
<title>表格嵌套</title> </head> <body> <table width="700" border="1" cellpadding="0" cellspacing="0" align="center"> <caption>课程表</caption> <tr> <td width="100">083007班</td> <td> <!-- 此处嵌套了一个班的课程表--> <table width="100%" border="1" cellpadding="0" cellspacing="0" frame="void">
57
6.6表格嵌套 <th>节次</th> <th>星期一</th>
<tr> <td>第12节</td> <td>体育</td> <td>大学英语</td> <td>高等数学</td> <td>数据结构</td> <td>Web开发</td> </tr>
58
6.6表格嵌套 <td>第34节</td> <td>大学英语</td>
<td>Web开发实验</td> </tr> </table> </td> <tr> <td>083008班</td> <td> <!—此处省略了嵌套的课程表，内容同上--> </body> </html>
59
6.6表格嵌套
60
6.7小实例 一些设计人员喜欢使用表格来进行页面布局，因为它的效果在不同的浏览器中更容易保持一致，虽然目前更流行的是利用“DIV+CSS”技术进行页面布局。
61
6.7小实例 <!--程序6-18--> <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> <td> <table border="1" width=100% height="200">
62
6.7小实例 <tr><td> </td></tr>
</table> </td> <td>内容一</td> <td>内容二</td> </tr> <tr> <td colspan="3" align="center">版权信息</td> </body> </html>
63
6.7小实例
64
小结 本章主要介绍了表格制作时用到的常用属性以及取值情 况，在这里提两点注意事项： 1. 在创建复杂的表格之前，最好对它进行规划，比如可以
先用笔在纸上设计页面； 2. 使用表格排版网页时，要尽量细化表格，不要把整个网页 放在一个大的表格里，因为表格内有一些载入较慢的元素（比如计数器）时，往往会延迟整个表格的显示。这是由 IE的显示特性决定的，只有当表格内所有元素全部载入 后，整个表格才得以显示。针对这个特点，我们可以将整
65
小结 个页面分成几块，例如通用的上(放置Logo、Banner、 Menu等等)、中(放置页面内容)、下(放置版权信息等等)
结构，将每一部分由单独的表格来实现，这样比较好。
66
Thank You !
Similar presentations
