HTML 表格

在 HTML 你可以建立表格

例子

表格
此例說明如何在 HTML 文件內建立表格

表格邊
此例說明不同的表格邊

(你可以找到更多的例子在本頁下方)

表格

表格是由 <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>

上述原始碼在瀏覽器上會是這樣：

表格及邊的屬性

如果你沒有指定邊的屬性，表格不會顯示任何的邊。有時候這是有用的，但大多時候你需要將邊顯示出來

要顯示表格的邊，你需要設定邊的屬性

<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>

顯示在瀏覽器上將是：

表格內的空格

沒內容的表格空格在大多數的瀏覽器上並不會顯示的很好。

<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></td>
</tr>
</table>

顯示在瀏覽器上將是：

請注意圍在空格上的邊不見了

要避免如此，增加一個保留空格(&nbsp;)到空的資料空格，讓邊能看得到。 

<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>&nbsp;</td>
</tr>
</table>

顯示在瀏覽器上將是：

基本摘要 - 有用的提示

更多的例子

無邊表格
此例說明無邊表格.

表格內標題
此例說明如何顯示表格內的標題

空  格
此例說明如何使用 "&nbsp;" 來處理沒有內容的空格

表格上的標題
此例說明表格上的標題

超過一欄或一列的表格空格
此例說明如何設定超過一欄或一列的表格空格

表格內的標示
此例說明如何顯示表格內有不同的元素

增加空格空間
此列說明如何使用"cellpadding" 在表格內的的內容及邊上增加更多的空間

增加空格距離
此例說明如何使用 cellspacing 來增加表格內之間的距離　

在表格內增加背景顏色或圖片
此例說明如何在表格內增加背景顏色

在空格內增加背景顏色或圖片
此例說明如何一個或多個表格的空格上增加背景顏色

物品在表格空格內擺放的位置
此例說明如何使用 "align" 屬性來排列表格的內容，以增加表格的可看性　

框架屬性
此例說明如何使用框架 "frame" 屬性來控制表格的框

Table Tags