HTML 表格

表格其实就是很多的小单元格，而这些小单元格很有次序的排列着，它们有很多行，很多列。这些由行列组成的布局，就叫表格，表格是 table 标签来定义的。

html 表格示例:

姓名	性别	年龄
张三	男	40
李四	女	32

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

HTML 表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格：

示例

<table border="1">
    <tr>
        <td>行 1, 列 1</td>
        <td>行 1, 列 2</td>
    </tr>
</table>

HTML 表格表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

示例

<table border="1">
    <tr>
        <th>表头一</th>
        <th>表头二</th>
    </tr>
    <tr>
        <td>行 1, 列 2</td>
    </tr>
    <tr>
        <td>行 2, 列 1</td>
        <td>行 2, 列 2</td>
    </tr>
</table>

HTML 表格标签

<table> 定义 HTML 表格

<thead> 标签定义表格的表头

<tbody> 标签表格主体（正文）

<tfoot> 标签定义表格的页脚（脚注或表注）

<tr> 元素定义表格行

<th> 元素定义表头

<td> 元素定义表格单元

<caption> 元素定义表格标题，必须紧随 table 标签之后。只能对每个表格定义一个标题，默认居中与表格之上

<col> 标签为表格中一个或多个列定义属性值。

<colgroup> 标签用于对表格中的列进行组合，以便对其进行格式化。

<table>标签中比较少见的属性和子标签：

summary 属性：用于概括整个表格的内容。它对于搜索引擎的机器人记录信息十分重要。

bordercolor 属性：用来设置表格边框的颜色。但它在不同的浏览器下显示的效果不一致。（不推荐使用bordercolor 属性，而推荐使用css 样式表的border 属性来进行设置）

cellspacing 属性：用来设置表格的单元格之间的间距。（推荐使用css 样式表的border-collapse 属性来进行设置）

<caption> 标记：表示表格的大标题，该标记可以出现在<table> 之间的任意位置。它对于搜索引擎的机器人记录信息十分重要。

<th> 标记：用于表示表格的行或者列的名称。

<th> 标记的scope 属性：专门用来区分行名称和列名称。如：<th scope='row'> 或 <th scope='col'>

<table>里还包含：<thead> 、<tbody> 、<tfoot> 标记。它们分别表示表格的表头，表正文，表脚。在打印网页内容的时候，如果表格很大，一页打印不完，<thead>和<tfoot>将在每一页出现。（注意：在IE 中无效，但在 Firefox 有效）

经典的表格代码如下：

<html>
<head>
<title>财政报表</title>
<style type="text/css">
<!--
.datalist{
    border:1px solid #429fff;    /* 表格边框 */
    font-family:Arial;
    border-collapse:collapse;    /* 边框重叠 */
}
.datalist tr:hover{
    background-color:#c4e4ff;   /* 动态变色,IE6下无效！*/
}
.datalist caption{
    padding-top:3px;
    padding-bottom:2px;
    font:bold 1.1em;
    background-color:#f0f7ff;
    border:1px solid #429fff;    /* 表格标题边框 */
}
.datalist th{
    border:1px solid #429fff;    /* 行、列名称边框 */
    background-color:#d2e8ff;
    font-weight:bold;
    padding-top:4px; padding-bottom:4px;
    padding-left:10px; padding-right:10px;
    text-align:center;
}
.datalist td{
    border:1px solid #429fff;    /* 单元格边框 */
    text-align:right;
    padding:4px;
}
-->
</style>
</head>
<body> 
<table class="datalist" summary="财政报表">
    <caption>财政报表 2005 - 2008</caption>
    <thead>
    <tr>
        <th> </th>
        <th scope="col">2005</th>
        <th scope="col">2006</th>
        <th scope="col">2007</th>
        <th scope="col">2008</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">拨款</th>
        <td>11,980</td>
        <td>12,650</td>
        <td>9,700</td>
        <td>10,600</td>
    </tr>
    <tr>
        <th scope="row">捐款</th>
        <td>4,780</td>
        <td>4,989</td>
        <td>6,700</td>
        <td>6,590</td>
    </tr>
    <tr>
        <th scope="row">投资</th>
        <td>8,000</td>
        <td>8,100</td>
        <td>8,760</td>
        <td>8,490</td>
    </tr>
    <tr>
        <th scope="row">募捐</th>
        <td>3,200</td>
        <td>3,120</td>
        <td>3,700</td>
        <td>4,210</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
       <td colspan="5">2008 年统计</td>
    </tr>
    </tfoot>
</table>
</body>
</html>

显示效果如下：

	2005	2006	2007	2008
拨款	11,980	12,650	9,700	10,600
捐款	4,780	4,989	6,700	6,590
投资	8,000	8,100	8,760	8,490
募捐	3,200	3,120	3,700	4,210
销售	28,400	27,100	27,950	29,050
杂费	2,100	1,900	1,300	1,760
总计	58,460	57,859	58,110	60,700
2008 年统计

注意：

IE6 只有<a>标记支持:hover 伪类，其余标签都不支持！

并且<a>标记的伪类有顺序：a:link -> a:visited -> a:hover -> a:active

其他说明

在现在 div 大行其道的时代，table 这个标签似乎很少被人提及，到处都是 div+css 布局的书以及博客文章，但其实 table 以及连带的其他表格标签依然在网页中占很重要的地位，特别是后台展示数据的时候表格运用是否熟练就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有条理，虽然 div 布局也可以做到，但是总没有表格来得方便。