WEB DESIGNS
4<caption> 标签
定义和用法
caption 元素定义表格标题。 caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。 通常这个标题会被居中于表格之上。
实例
<table border="6"> <caption>我的标题</caption> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table>
thead、tfoot 以及 tbody 元素对表格中的行进行分组。
当创建某个表格时，希望拥有一个标题行，一些带有数据的行，以及位于 底部的一个总计行。 这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。 当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张 页面上。
<th>Savings</th>
<td>$180</td>
<tbody> <tr> <td>January</td> </tr> <tr> <td>February</td> </tr> </tboห้องสมุดไป่ตู้y> </table>
<td>$100</td>
<td>$80</td>
WEB DESIGNS
WEB DESIGNS
2<table> 标签的 border 属性
定义和用法
border 属性规定规定围绕表格的边框的宽度。 border 属性会为每个单元格应用边框，并用边框围绕表格。 <table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> 如果 border 属性的值发生改变，那么只有表格周围边框的尺寸会发生变 化。表格内部的边框则是 1 像素宽。 提示：设置 border="0"，可以显示没有边框的表格。
CS
第6章 表格
田兵 软件工程系 tianbing2001@
目录
6.1~6.6
WEB DESIGNS
1 <table> 标签
定义和用法
<table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。 tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
WEB DESIGNS
实例
带有 thead、tbody 以及 tfoot 元素的 HTML 表格：
<table border="1"> <thead> <tr> <th>Month</th> </tr> </thead> <tfoot> <tr> <td>Sum</td> </tr> </tfoot>
WEB DESIGNS
6.<td> 标签的 rowspan 属性
定义和用法
rowspan 属性规定单元格可横跨的行数。
实例
表格单元横跨两行的表格： <table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100.00</td> <td rowspan="2">$50</td> </tr> <tr> <td>February</td> <td>$10.00</td> </tr> </table>
WEB DESIGNS
3<th> 标签
定义和用法
定义表格内的表头单元格。 HTML 表单中有两种类型的单元格：
• 表头单元格 - 包含表头信息（由 th 元素创建） • 标准单元格 - 包含数据（由 td 元素创建）
th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素 内的文本通常是左对齐的普通文本。
WEB DESIGNS
5<td> 标签的 colspan 属性
定义和用法
colspan 属性规定单元格可横跨的列数。
实例
表格单元横跨两列的表格： <table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td colspan="2">January</td> </tr> <tr> <td colspan="2">February</td> </tr> </table>
WEB DESIGNS
阅读书中6.6的综合例子 6.9-6.12例子
本章结束！
WEB DESIGNS
WEB DESIGNS
实例 普通的 HTML 表格，包含两行两列：
<html> <body> <table border="1"> <tr> <th>Company</th> <th>Address</th> </tr> <tr> <td>Apple, Inc.</td> <td>1 Infinite Loop Cupertino, CA 95014</td> </tr> </table> </body> </html>
更复杂的 HTML 表格也可能包括 caption、col、colgroup、 thead、tfoot 以及 tbody 元素。
WEB DESIGNS
一个简单的 HTML 表格，包含两行两列：
<table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table>
thead 元素应该与 tbody 和 tfoot 元素结合起来使用。 tbody 元素用于对 HTML 表格中的主体内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。
注释：
如果使用 thead、tfoot 以及 tbody 元素，就必须使用全部的 元素。 它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以 在收到所有数据前呈现页脚了。 必须在 table 元素内部使用这些标签。
WEB DESIGNS
7. <thead> 标签
定义和用法
<thead> 标签定义表格的表头。 该标签用于组合 HTML 表格的表头内容。
提示和注释：
注释：<thead> 内部必须拥有 <tr> 标签！ 注释：<thead>、<tbody> 以及 <tfoot> 很少被使用，这是因为糟糕的浏览 器支持。
