因为不了解table，就入主为先了，以为table不好用，后来发现是因为自己对于table里面的标签不熟悉的原因。特此一记。
HTML有10个表格相关标签。下面是一个带有简介的列表，但是首先，文档要被正确的定义在HTML 4.01/XHTML 1或HTML 5下面:
-
<caption> 定义表格标题
-
<col> 为表格的列定义属性
-
<colgroup> 定义表格列的分组
-
<table> 定义表格
-
<tbody> 定义表格主体
-
<td> 定义一个单元格
-
<tfoot> 定义表格的表注(底部)
-
<th> 定义表格的表头
-
<thead> 定义表格的表头
-
<tr> 定义表格的行
一个基本的表格结构如下:
它包含一个标题、头部、主体和底部。正确的HTML元素顺序是：
-
<table>
-
<caption>
-
<thead>
-
<tfoot>
-
<tbody>
你也可以使用<col>和<colgroup>来定义表格的列或为列分组：
-
<table>
-
<caption>
-
<colgroup>
-
<col>
-
<thead>
-
<tfoot>
-
<tbody>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>重新认识table</title>
<style>
body{font-size:14px;text-align:center; line-height:24px;}
.warp_tb{ border-collapse:collapse; width:550px; border-bottom:1px dashed #ccc; }
.warp_tb tr{ border-bottom:1px dashed #ccc;width:550px;}
.warp_table{ border-collapse:collapse; width:550px; border:1px solid #ddd; }
.warp_table td,.warp_table th,.warp_table tfoot,.warp_table thead,warp_table thead{border:1px solid #ddd;}
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" class="warp_tb">
<tr>
<th scope="col">姓名</th>
<th scope="col">身高</th>
<th scope="col">体重</th>
<th scope="col">班级</th>
</tr>
<tr>
<td>1.98</td>
<td>1.98</td>
<td>90kg</td>
<td>三四</td>
</tr>
<tr>
<td>1.98</td>
<td>1.98</td>
<td>90kg</td>
<td>三四</td>
</tr>
</table><br />
<table border="0" cellspacing="0" cellpadding="0" class="warp_table">
<tr>
<td>没有特点的table</td>
<td>没有特点的table</td>
<td>没有特点的table</td>
</tr>
<tr>
<td>没有特点的table</td>
<td>没有特点的table</td>
<td>没有特点的table</td>
</tr>
<tr>
<td>没有特点的table</td>
<td>没有特点的table</td>
<td>没有特点的table</td>
</tr>
</table><br />
<table border="0" cellspacing="0" cellpadding="0" class="warp_table">
<tr>
<th scope="row">姓名</th>
<td>没有特点的table</td>
<td>没有特点的table</td>
</tr>
<tr>
<th scope="row">性别</th>
<td>没有特点的table</td>
<td>没有特点的table</td>
</tr>
<tr>
<th scope="row">自我介绍</th>
<td>没有特点的table</td>
<td>没有特点的table</td>
</tr>
</table><br />
<table border="0" cellspacing="0" cellpadding="0" class="warp_table">
<tr>
<th scope="col">身高</th>
<th scope="col">体重</th>
<th scope="col">班级</th>
</tr>
<tr>
<td>1.98</td>
<td>90kg</td>
<td>三四</td>
</tr>
<tr>
<td>1.98</td>
<td>90kg</td>
<td>三四</td>
</tr>
</table><br />
<table border="0" cellspacing="0" cellpadding="0" class="warp_table">
<tr>
<th scope="col">编号</th>
<th scope="col">姓名</th>
<th scope="col">学号</th>
</tr>
<tr>
<th scope="row">1</th>
<td>武清区</td>
<td>223</td>
</tr>
<tr>
<th scope="row">2</th>
<td>刘易阳</td>
<td>123</td>
</tr>
</table><br />
<table border="0" cellspacing="0" cellpadding="0" cla
ss="warp_table">
<caption>Table caption here</caption>
<colgroup span="1" style="background:#f5f5f5;"/>
<colgroup span="2" style="background:#EFEFEF;"/>
<!– Table Header–>
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
</tr>
</thead>
<!– Table Footer–>
<tfoot>
<tr>
<td>Foot 1</td>
<td>Foot 2</td>
<td>Foot 3</td>
</tr>
</tfoot>
<!– Table Body–>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</tbody>
</table>
</body>
</html>
