1.相关概念
（1）表格由 <table> 标签来定义；每个表格均有若干行，由 <tr> 标签定义；每行被分割为若干单元格，由 <td> 标签定义；字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
（2）表格的边框属性，如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。使用边框属性来显示一个带有边框的表格。
（3）表格的表头使用 <th> 标签进行定义，它类似于td，但是th是加粗的。
（4）表格中的空单元格，在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框，这个时候可以加个 让它显示。
2.案例
（1）表格的相关概念
<html>
<body>
<p>每个表格由 table 标签开始。</p><p>每个表格行由 tr 标签开始。</p><p>每个表格数据由 td 标签开始。</p>
<h4>一列：</h4>
<table border="1">
<tr> <td>100</td></tr>
</table>
<h4>一行三列：</h4>
<table border="1">
<tr> <td>100</td> <td>200</td> <td>300</td></tr>
</table>
<h4>两行三列：</h4>
<table border="1">
<tr> <td>100</td> <td>200</td> <td>300</td></tr>
<tr> <td>400</td> <td>500</td> <td>600</td></tr>
</table>
</body>
</html>
（2）表格的边框属性
<html>
<body>
<h4>带有普通的边框：</h4>
<table border="1">
<tr> <td>First</td> <td>Row</td> </tr>
<tr> <td>Second</td> <td>Row</td></tr>
</table>
<h4>带有粗的边框：</h4>
<table border="8">
<tr> <td>First</td> <td>Row</td></tr>
<tr> <td>Second</td> <td>Row</td></tr>
</table>
<h4>带有很粗的边框：</h4>
<table border="15">
<tr> <td>First</td> <td>Row</td></tr>
<tr> <td>Second</td> <td>Row</td></tr>
</table>
</body>
</html>
（3）没有边框的表格
<html>
<body>
<h4>这个表格没有边框：</h4>
<table>
<tr> <td>100</td> <td>200</td> <td>300</td></tr>
<tr> <td>400</td> <td>500</td> <td>600</td></tr>
</table>
<h4>这个表格也没有边框：</h4>
<table border="0">
<tr> <td>100</td> <td>200</td> <td>300</td></tr>
<tr> <td>400</td> <td>500</td> <td>600</td></tr>
</table>
</body>
</html>
（4）表格中的表头(Heading)
<html>
<body>
<h4>表头：</h4>
<table border="1">
<tr> <th>姓名</th> <th>电话</th> <th>电话</th></tr>
<tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td></tr>
</table>
<h4>垂直的表头：</h4>
<table border="1">
<tr> <th>姓名</th> <td>Bill Gates</td></tr>
<tr> <th>电话</th> <td>555 77 854</td></tr>
<tr> <th>电话</th> <td>555 77 855</td></tr>
</table>
</body>
</html>
（5）空单元格
<html>
<body>
<table border="1">
<tr> <td>Some text</td> <td>Some text</td></tr>
<tr> <td></td> <td>Some text</td></tr>
</table>
<p>正如您看到的，其中一个单元没有边框。这是因为它是空的。在该单元中插入一个空格后，仍然没有边框。</p>
<p>我们的技巧是在单元中插入一个 no-breaking 空格。</p>
<p>no-breaking 空格是一个字符实体。如果您不清楚什么是字符实体，请阅读关于字符实体的章节。</p>
<p>no-breaking 空格由和号开始 ("&")，然后是字符"nbsp"，并以分号结尾(";")。</p>
</body>
</html>
（6）带有标题的表格
<html>
<body>
<h4>这个表格有一个标题，以及粗边框：</h4>
<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>
</body>
（7）跨行或跨列的表格单元格
<html>
<body>
<h4>横跨两列的单元格：</h4>
<table border="1">
<tr> <th>姓名</th> <th colspan="2">电话</th> </tr>
<tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td></tr>
</table>
<h4>横跨两行的单元格：</h4>
<table border="1">
<tr> <th>姓名</th> <td>Bill Gates</td></tr>
<tr> <th rowspan="2">电话</th> <td>555 77 854</td></tr>
<tr> <td>555 77 855</td></tr>
</table>
</body>
</html>
（8）表格里面嵌套标签、表格、列表、内容
<html>
<body>
<table border="1">
<tr>
<td> <p>这是一个段落。</p> <p>这是另一个段落。</p> </td>
<td>这个单元包含一个表格：
<table border="1">
<tr> <td>A</td> <td>B</td> </tr>
<tr> <td>C</td> <td>D</td> </tr>
</table>
</td>
</tr>
<tr>
<td>这个单元包含一个列表：<ul> <li>苹果</li> <li>香蕉</li> <li>菠萝</li> </ul> </td>
<td>HELLO</td>
</tr>
</table>
</body>
</html>
（9）单元格边距(Cell padding)：内容与边框之间的距离
<html>
<body>
<h4>没有 cellpadding：</h4>
<table border="1">
<tr> <td>First</td> <td>Row</td></tr>
<tr> <td>Second</td> <td>Row</td></tr>
</table>
<h4>带有 cellpadding：</h4>
<table border="1" cellpadding="10">
<tr> <td>First</td> <td>Row</td></tr>
<tr> <td>Second</td> <td>Row</td></tr>
</table>
</body>
</html>
（10）单元格间距(Cell spacing)：单元格之间的距离
<html>
<body>
<h4>没有 cellspacing：</h4>
<table border="1">
<tr> <td>First</td> <td>Row</td></tr>
<tr> <td>Second</td> <td>Row</td></tr>
</table>
<h4>带有 cellspacing：</h4>
<table border="1" cellspacing="10">
<tr> <td>First</td> <td>Row</td></tr>
<tr> <td>Second</td> <td>Row</td></tr>
</table>
</body>
</html>
（11）向表格添加背景颜色或背景图像
<html>
<body>
<h4>背景颜色：</h4>
<table border="1" bgcolor="red">
<tr> <td>First</td> <td>Row</td></tr>
<tr> <td>Second</td> <td>Row</td></tr>
</table>
<h4>背景图像：</h4>
<table border="1" background="/i/eg_bg_07.gif">
<tr> <td>First</td> <td>Row</td></tr>
<tr> <td>Second</td> <td>Row</td></tr>
</table>
</body>
</html>
（12）向表格单元添加背景颜色或者背景图像
<html>
<body>
<h4>单元背景：</h4>
<table border="1">
<tr> <td bgcolor="red">First</td> <td>Row</td></tr>
<tr> <td background="/i/eg_bg_07.gif"> Second</td> <td>Row</td></tr>
</table>
</body>
</html>
（13）在表格单元中排列内容
<html>
<body>
<table width="400" border="1">
<tr> <th align="left">消费项目....</th> <th align="right">一月</th> <th align="right">二月</th> </tr>
<tr> <td align="left">衣服</td> <td align="right">$241.10</td> <td align="right">$50.20</td> </tr>
<tr> <td align="left">化妆品</td> <td align="right">$30.00</td> <td align="right">$44.45</td> </tr>
<tr> <td align="left">食物</td> <td align="right">$730.40</td> <td align="right">$650.00</td> </tr>
<tr> <th align="left">总计</th> <th align="right">$1001.50</th> <th align="right">$744.65</th> </tr>
</table>
</body>
</html>
（14）框架(frame)属性
<html>
<body>
<p><b>注释：</b>frame 属性无法在 Internet Explorer 中正确地显示。</p>
<p>Table with frame="box":</p>
<table frame="box">
<tr> <th>Month</th> <th>Savings</th> </tr>
<tr> <td>January</td> <td>$100</td> </tr>
</table>
<p>Table with frame="above":</p>
<table frame="above">
<tr> <th>Month</th> <th>Savings</th> </tr>
<tr> <td>January</td> <td>$100</td> </tr>
</table>
<p>Table with frame="below":</p>
<table frame="below">
<tr> <th>Month</th> <th>Savings</th> </tr>
<tr> <td>January</td> <td>$100</td> </tr>
</table>
<p>Table with frame="hsides":</p>
<table frame="hsides">
<tr> <th>Month</th> <th>Savings</th> </tr>
<tr> <td>January</td> <td>$100</td> </tr>
</table>
<p>Table with frame="vsides":</p>
<table frame="vsides">
<tr> <th>Month</th> <th>Savings</th> </tr>
<tr> <td>January</td> <td>$100</td> </tr>
</table>
</body>
</html>
（15）制作细线表格
<html>
<body>
<table width="400" height="400" border="0" bgcolor="black" cellspacing="1">
<tr>
<th align="center" bgcolor="white">消费项目</th>
<th align="center" bgcolor="white">一月</th>
<th align="center" bgcolor="white">二月</th>
</tr>
</table>
<p>分别设置表格的border/bgcolor/cellsapcing和单元格为上述参数，即可做出细线表格</p>
</body>
</html>
（16）表格的头部、主体、底部
<html>
<head>
<style type="text/css">
thead {color:green}
tbody {color:blue;height:50px}
tfoot {color:red}
</style>
</head>
<body>
<table border="1">
<thead>
<tr> <th>Month</th> <th>Savings</th> </tr>
</thead>
<tbody>
<tr> <td>January</td> <td>$100</td> </tr>
<tr> <td>February</td> <td>$80</td> </tr>
</tbody>
<tfoot>
<tr> <td>Sum</td> <td>$180</td> </tr> </tfoot>
</table>
</body>
</html>
（17）col 元素为表格中的三个列规定了不同的对齐方式：左--中--右
<html>
<body>
<table width="100%" border="1">
<col align="left" /> <col align="center" /> <col align="right" />
<tr>
<th>ISBN</th> <th>Title</th> <th>Price</th>
</tr>
<tr>
<td>3476896</td> <td>My first HTML</td> <td>$53</td>
</tr>
<tr>
<td>2489604</td> <td>My first CSS</td> <td>$47</td>
</tr>
</table>
</body>
</html>
（18）两个 colgroup 元素为表格中的三列规定了不同的对齐方式和样式
<html>
<body>
<table width="100%" border="1">
<colgroup span="2" align="left"></colgroup>
<colgroup align="right" style="color:#0000FF;"></colgroup>
<tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr>
<tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr>
<tr> <td>2489604</td> <td>My first CSS</td> <td>$47</td> </tr>
</table>
</body>
</html>