HTML 表格
你可以使用 HTML 創(chuàng)建表格。
表格
表格由 <table> 標(biāo)簽來(lái)定義。每個(gè)表格均有若干行（由 <tr> 標(biāo)簽定義），每行被分割為若干單元格（由 <td> 標(biāo)簽定義）。字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線(xiàn)、表格等等。
<table border="1"> <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>
在瀏覽器顯示如下：
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
表格和邊框?qū)傩?/h2>
如果不定義邊框?qū)傩�，表格將不顯示邊框。有時(shí)這很有用，但是大多數(shù)時(shí)候，我們希望顯示邊框。
使用邊框?qū)傩詠?lái)顯示一個(gè)帶有邊框的表格：
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
表格的表頭
表格的表頭使用 <th> 標(biāo)簽進(jìn)行定義。
大多數(shù)瀏覽器會(huì)把表頭顯示為粗體居中的文本：
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</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>
在瀏覽器顯示如下：
| Heading | Another Heading |
|---|---|
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
表格中的空單元格
在一些瀏覽器中，沒(méi)有內(nèi)容的表格單元顯示得不太好。如果某個(gè)單元格是空的（沒(méi)有內(nèi)容），瀏覽器可能無(wú)法顯示出這個(gè)單元格的邊框。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td></td>
<td>row 2, cell 2</td>
</tr>
</table>
瀏覽器可能會(huì)這樣顯示：
注意：這個(gè)空的單元格的邊框沒(méi)有被顯示出來(lái)。為了避免這種情況，在空單元格中添加一個(gè)空格占位符，就可以將邊框顯示出來(lái)。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td> </td>
<td>row 2, cell 2</td>
</tr>
</table>
在瀏覽器中顯示如下：
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 2 |
更多實(shí)例
- 沒(méi)有邊框的表格
- 本例演示一個(gè)沒(méi)有邊框的表格。
- 表格中的表頭(Heading)
- 本例演示如何顯示表格表頭。
- 空單元格
- 本例展示如何使用 " " 處理沒(méi)有內(nèi)容的單元格。
- 帶有標(biāo)題的表格
- 本例演示一個(gè)帶標(biāo)題 (caption) 的表格
- 跨行或跨列的表格單元格
- 本例演示如何定義跨行或跨列的表格單元格。
- 表格內(nèi)的標(biāo)簽
- 本例演示如何顯示在不同的元素內(nèi)顯示元素。
- 單元格邊距(Cell padding)
- 本例演示如何使用 Cell padding 來(lái)創(chuàng)建單元格內(nèi)容與其邊框之間的空白。
- 單元格間距(Cell spacing)
- 本例演示如何使用 Cell spacing 增加單元格之間的距離。
- 向表格添加背景顏色或背景圖像
- 本例演示如何向表格添加背景。
- 向表格單元添加背景顏色或者背景圖像
- 本例演示如何向一個(gè)或者更多表格單元添加背景。
- 在表格單元中排列內(nèi)容
- 本例演示如何使用 "align" 屬性排列單元格內(nèi)容,以便創(chuàng)建一個(gè)美觀的表格。
- 框架(frame)屬性
- 本例演示如何使用 "frame" 屬性來(lái)控制圍繞表格的邊框。