2-17:HTML 表格標籤的用法

HTML 中建立表格需使用 <table> 標籤,並搭配 <tr><th><td> 等標籤來呈現每一列與每一格的資料。

範例:

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年齡</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>18</td>
      <td>台北</td>
    </tr>
    <tr>
      <td>小華</td>
      <td>20</td>
      <td>高雄</td>
    </tr>
  </tbody>
</table>

 

標籤說明

  • 表格的開始<table>與結束</table>
  • tr 列(row)
  • th 存放表格標題的儲存格
  • td 存放資料的儲存格(column)
  • thead,tbody,tfoot 群組化儲存格
  • caption 表格標題
  • colspan,rowspan 儲存格的合併

 

表格邊框與寬度

預設的表格不會顯示邊框,我們可以用 border 屬性或 CSS 來加上:

<table border="1" width="100%">
  <!-- 表格內容 -->
</table>

不過會建議邊框跟寬度都是讓 css 調整會比較好。

 

合併儲存格技巧(colspan、rowspan)

有時候我們會希望讓某個儲存格橫跨多欄或多列,可以用 colspanrowspan 屬性來達成。

橫向合併欄位(colspan):

<tr>
  <td colspan="2">合併了兩欄</td>
</tr>

 

直向合併列(rowspan):

<tr>
  <td rowspan="2">合併兩列</td>
  <td>第一列</td>
</tr>
<tr>
  <td>第二列</td>
</tr>