表格相关元素
HTML 5保留了定义表格的如下标签。
➢ <table>：用于定义表格，<table.../>元素只能包含0个或1个<caption.../>子元素（定义表格标题），0个或1个<thead.../>子元素（定义表格头），0个或1个<tfoot.../>子元素（定义表格脚），多个<tr.../>子元素（定义表格行），多个<tbody.../>子元素（定义表格体）。该元素还可以指定如下几个属性。
□ cellpadding：指定单元格内容和单元格边框之间的间距。该属性值既可是像素值，也可是百分比。
□ cellspacing：指定单元格之间的间距。该属性值既可是像素值，也可是百分比。
□ width：指定表格的宽度，该属性值既可是像素值，也可是百分比。
➢ <caption>：用于定义表格标题，该元素只能包含文本、图片、超链接、文本格式化元素和表单控件元素等。
➢ <tr>：定义表格行，该元素只能包含<td.../>或者<th.../>两种元素。
➢ <td>：定义单元格，该元素里可以再次插入一个表格。除此之外，该元素还可以指定如下几个属性。
□ colspan：指定该单元格跨多少列，该属性值就是一个简单数字。
□ rowspan：指定此单元格可横跨的行数。
□ height：指定该单元格的高度，该属性值既可是像素值，也可是百分比。
□ width：指定该单元格的宽度，该属性值既可是像素值，也可是百分比。
➢ <th>：定义表格页眉的单元格，和<td>标签的用法几乎完全一样，只是浏览器呈现<th.../>元素时有一定差别。
➢ <tbody>：定义表格的主体，该元素只能包含<tr.../>子元素。使用<tbody>标签，可以将一个表格分为几个独立的部分。<tbody.../>元素可以将表格中的一行或几行合并成一组，当我们使用Ajax编程时常常需要动态修改表格中某几行，这就需要使用<tbody.../>元素了。在<tbody.../>元素中，必须使用<tr.../>子元素来定义表格行，<tbody.../>元素本身并不会生成任何输出内容。一旦我们使用<tbody.../>将多行定义为一组，一个<tbody.../>元素就是表格中一个独立的部分，即不能从一个<tbody.../>跨越到另一个<tbody.../>中。
➢ <thead>：定义表格头，用法与<tbody.../>基本相似，指定功能稍有差别。
➢ <tfoot>：定义表格脚，用法与<tbody.../>基本相似，指定功能稍有差别。
➢ <col>：该元素用于为表格中的一个或多个列指定属性值。该元素只能出现在<table.../>元素或<colgroup.../>元素内。该元素还可指定如下属性。
□ span：指定该列可横跨多少列。
➢ <colgroup>：该元素用于为表格中的一个或多个列指定属性值。该元素只能出现在<table.../>元素或<colgroup.../>元素内。
提示
当创建某个表格时，也许希望拥有一个标题行，可以是多个数据行组成的组，以及位于底部的一个统计行。这样就可以让浏览器能对表格标题和页脚之间的表格内容进行滚动。而且，当打印长表格内容时，表格头和表格脚将被打印在包含表格数据的每个页面上。
如果决定使用<thead.../>和<tfoot.../>元素，建议按如下次序来使用它们：<thead../>、<tfoot.../>、<tbody.../>，浏览器自动会将<tfoot.../>元素的内容呈现在表格最下面。不仅如此，只能在<table.../>元素内使用这些标签。
<col.../>元素是个空元素，它自己本身并不产生表格列。如需创建表格列，必须在<tr.../>元素内定义<td.../>元素。<col.../>元素只是为表格中指定列整体指定属性值，因此一旦在<table.../>中使用<col.../>为表格列指定属性，<col.../>定义的表格列数就应与表格内实际包含的列数相等。
<colgroup.../>的作用只是用于组织多个<col.../>元素，当使用<colgroup.../>组织多个<col.../>元素时，<colgroup.../>上指定的属性将对它所包含的所有<col.../>元素有效。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 简单表格 </title>
</head>
<body>
<table style="width:400px" border="1">
<caption><b>疯狂Java体系图书</b></caption>
<tr>
<th>书名</th>
<th>作者</th>
</tr>
<tr>
<td>疯狂Java讲义</td>
<td>李刚</td>
</tr>
<tr>
<td>轻量级Java EE企业应用实战</td>
<td>李刚</td>
</tr>
</table>
</body>
</html>
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 跨行、跨列的表格 </title>
</head>
<body>
<table style="width:240px" border="1">
<tr>
<td rowspan="2">跨2行的单元格</td>
<td>普通单元格</td>
</tr>
<tr>
<td>普通单元格</td>
</tr>
<tr>
<td colspan="2">跨2列的单元格</td>
</tr>
<tr>
<td>普通单元格</td>
<td>普通单元格</td>
</tr>
</table>
</body>
</html>
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 带tbody的表格 </title>
</head>
<body>
<table border="1" style="width:400px">
<caption><b>疯狂Java体系图书</b></caption>
<thead>
<tr>
<th>书名</th>
<th>作者</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2" style="text-align:right">现总计：2本图书</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>疯狂Java讲义</td>
<td>李刚</td>
</tr>
<tr>
<td>轻量级Java EE企业应用实战</td>
<td>李刚</td>
</tr>
</tbody>
</table>
</body>
</html>
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 带col的表格 </title>
</head>
<body>
<!-- 设置表格背景色为黑色，单元格之间的间距为1px
通过设置背景色为黑色可以实现边框效果
-->
<table style="background-color:black;
border-collapse:separate;border-spacing:1px;">
<caption><b>疯狂Java体系图书</b></caption>
<!-- 定义所有列的背景色都是白色 -->
<colgroup style="background-color:white;">
<!-- 设置第一列宽160px -->
<col style="width:160px"/>
<!-- 定义横跨两列，设置这两列各宽100px -->
<col span="2" style="width:100px"/>
</colgroup>
<thead>
<tr>
<th>书名</th>
<th>作者</th>
<th>价格</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3" style="text-align:right">现总计：2本图书</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>疯狂Java讲义</td>
<td>李刚</td>
<td>109</td>
</tr>
<tr>
<td>轻量级Java EE企业应用实战</td>
<td>李刚</td>
<td>89</td>
</tr>
</tbody>
</table>
</body>
</html>
注：本博客内容节选自李刚编著的疯狂HTML 5/CSS 3/JavaScript讲义 ，详细内容请参阅书籍。