HTML Table 表格

HTML 網頁設計不可或缺的元素就是表格(Table),通常表格用來做版面的排版,而表格的用法包含了幾個重要的標籤,分別是 table、tr 與 td 這幾個重點,組合起來才是個完整的表格,以下做個簡單的表格範例。
<table border="1">
 <tr>
 <td>這裡可以放表格內容</td>
 </tr>
</table>
呈現結果如下
這裡可以放表格內容

範例中使用了<table> 與 </table> 的標籤把內容包起來,<tr></tr> 標籤代表的是一行,而 <td></td> 標籤則代表一列,為了清楚呈現,我們還為 table 加上了 border="1" 的設定,這代表這個 table 的邊框粗細是 1,在實際使用上你也可以設定為其它的値,例如 border="0" 則不會顯示邊框。請注意 HTML 語法都必須用一個開始標籤與一個結束標籤把內容包起來,開始標籤與結束標籤是對等的,缺一不可。

除了可以寫一個單純的表格之外,我們還可以設定 table 的寬度、高度或邊框樣式,要做這些設定,你必須先了解幾個能夠控制表格的元素,例如 width、border、background ... 等。
  • width:控制 table 的寬度
  • border:控制 table 邊框的粗細
  • background:控制背景圖片
  • colspan:控制儲存格橫跨幾個欄位
  • rowspan:控制儲存格垂直跨幾個欄位
接著我們寫幾個範例

兩個欄位的 table 表格範例
<table width="300" border="1">
 <tr>
 <td>這裡是第一個欄位</td>
 <td>這裡是第二個欄位</td>
 </tr>
</table>
呈現結果如下
這裡是第一個欄位這裡是第二個欄位


兩行兩欄位的 Table 表格範例
<table border="1">
 <tr>
 <td>這裡是第一行的第一個欄位</td>
 <td>這裡是第一行的第二個欄位</td>
 </tr>
 <tr>
 <td>這裡是第二行的第一個欄位</td>
 <td>這裡是第二行的第二個欄位</td>
 </tr>
</table>
呈現結果如下
這裡是第一行的第一個欄位這裡是第一行的第二個欄位
這裡是第二行的第一個欄位這裡是第二行的第二個欄位

接著我們把第一行變成一個欄位
<table border="1">
 <tr>
 <td colspan="2">這裡是第一行</td>
 </tr>
 <tr>
 <td>這裡是第二行的第一個欄位</td>
 <td>這裡是第二行的第二個欄位</td>
 </tr>
</table>
呈現結果如下
這裡是第一行
這裡是第二行的第一個欄位這裡是第二行的第二個欄位

最後做一個兩欄位的 Table,第一個欄位 rowspan="2",第二個欄位有兩行
<table border="1">
 <tr>
 <td rowspan="2">這是第一個欄位</td>
 <td>這裡是第二個欄位第一行</td>
 </tr>
 <tr>
 <td>這裡是第二個欄位第二行</td>
 </tr>
</table>
呈現結果
這是第一個欄位這裡是第二個欄位第一行
這裡是第二個欄位第二行


延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012
PHP Smarty MySQL JQuery Apache W3C