<table>表格

• 表格由 <table>标签来定义
• 行由 <tr>标签定义
• 列由 <td>标签定义

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

<table border="0">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

显示效果

表格标签

表格表头

表格的表头使用 <th>标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本：

<table border="1">
<tr>
<th>标签</th>
<th>描述</th>
</tr>
<tr>
<td><textarea><table></textarea></td>
<td>定义表格</td>
</tr>
<tr>
<td><textarea><th></textarea></td>
<td>定义表格的表头</td>
</tr>
</table>

显示效果

表格边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
使用 border 属性来显示一个带有边框的表格：
border=0或者没有border属性，表格将不显示边框，border属性后的数值为表格边框的宽度。

表格标题

使用<caption>标签来显示一个带有标题的表格：

<table border="1">
<caption>Table</caption>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

显示效果

表格页眉页脚

<thead> 元素应该与<tbody> 和<tfoot> 元素结合起来使用，用来规定表格的各个部分（表头、主体、页脚）。

通过使用这些元素，使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

<thead> 标签必须被用在以下情境中：作为 <table> 元素的子元素，出现在 <caption>、<colgroup> 和 <thead> 元素之后，<tbody>、 <tfoot> 和 <tr> 元素之前。

<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>

表格列的组

<colgroup> 标签用于对表格中的列进行组合，以便对其进行格式化。
通过使用 <colgroup> 标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。
只能在 <table> 元素之内，在任何一个 <caption> 元素之后，在任何一个 <thead>、<tbody>、<tfoot>、<tr> 元素之前使用 <colgroup> 标签。
如果想对 <colgroup> 中的某列定义不同的属性，请在 <colgroup> 标签内使用 <col> 标签。

<table border="1">
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</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>5869207</td>
<td>My first CSS</td>
<td>$49</td>
</tr>
</table>

显示效果

表格合并单元格

定义跨行或跨列的表格单元格。

对列的合并使用colspan属性

<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>

显示效果

对行的合并使用rowspan属性

<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
<th>Sex:</th>
<td>male</td>
</tr>
</table>

显示效果

单元格边距

创建单元格内容与其边框之间的空白。
使用cellpadding属性增加单元格边距

<table border="1" cellpadding="20">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

显示效果

单元格间距

增加单元格之间的距离。
使用cellspacing属性增加单元格边距

<table border="1" cellspacing="20">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

显示效果