HTML表格的基本結構
阿新 • • 發佈:2019-01-25
表格
表格由 <table> 標籤來定義。每個表格均有若干行(由 <tr> 標籤定義),每行被分割為若干單元格(由 <td> 標籤定義)。字母 td 指表格資料(table data),即資料單元格的內容。資料單元格可以包含文字、圖片、列表、段落、表單、水平線、表格等等。
<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 |
表格和邊框屬性
如果不定義邊框屬性,表格將不顯示邊框。有時這很有用,但是大多數時候,我們希望顯示邊框。
使用邊框屬性來顯示一個帶有邊框的表格:
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
表格的表頭
表格的表頭使用 <th> 標籤進行定義。
大多數瀏覽器會把表頭顯示為粗體居中的文字:
<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 |
表格中的空單元格
在一些瀏覽器中,沒有內容的表格單元顯示得不太好。如果某個單元格是空的(沒有內容),瀏覽器可能無法顯示出這個單元格的邊框。
<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>
瀏覽器可能會這樣顯示:
注意:這個空的單元格的邊框沒有被顯示出來。為了避免這種情況,在空單元格中新增一個空格佔位符,就可以將邊框顯示出來。
<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 |
更多例項
- 本例演示一個沒有邊框的表格。
- 本例演示如何顯示錶格表頭。
- 空單元格
- 本例展示如何使用 " " 處理沒有內容的單元格。
- 本例演示一個帶標題 (caption) 的表格
- 本例演示如何定義跨行或跨列的表格單元格。
- 本例演示如何顯示在不同的元素內顯示元素。
- 本例演示如何使用 Cell padding 來建立單元格內容與其邊框之間的空白。
- 本例演示如何使用 Cell spacing 增加單元格之間的距離。
- 本例演示如何向表格新增背景。
- 本例演示如何向一個或者更多表格單元新增背景。
- 本例演示如何使用 "align" 屬性排列單元格內容,以便建立一個美觀的表格。
- 本例演示如何使用 "frame" 屬性來控制圍繞表格的邊框。
表格標籤
表格 | 描述 |
---|---|
<th> | 定義表格的表頭。 |
<tr> | 定義表格的行。 |
<td> | 定義表格單元。 |
<col> | 定義用於表格列的屬性。 |