表格其实就是很多的小单元格，而这些小单元格很有次序的排列着，它们有很多行，很多列。这些由行列组成的布局，就叫表格，表格是 table 标签 来定义的。
html 表格示例:
姓名
性别
年龄
张三
男
40
李四
女
32
html 表格
表格由 <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> 标记 的s cop e 属性 ：专门用来区分行 名称 和列 名称 。如：<th? s cop e='row'> 或 <th? s cop e='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-b ott om: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-b ott om: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?s cop e="col">2005</th>
????????<th?s cop e="col">2006</th>
????????<th?s cop e="col">2007</th>
????????<th?s cop e="col">2008</th>
????</tr>
????</thead>
????<tbody>
????<tr>
????????<th?s cop e="row">拨款</th>
????????<td>11,980</td>
????????<td>12,650</td>
????????<td>9,700</td>
????????<td>10,600</td>
????</tr>
????<tr>
????????<th?s cop e="row">捐款</th>
????????<td>4,780</td>
????????<td>4,989</td>
????????<td>6,700</td>
????????<td>6,590</td>
????</tr>
????<tr>
????????<th?s cop e="row">投资</th>
????????<td>8,000</td>
????????<td>8,100</td>
????????<td>8,760</td>
????????<td>8,490</td>
????</tr>
????<tr>
????????<th?s cop e="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 - 2008 ? 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 布局也可以做到，但是总没有表格来得方便。