<table> 表格標籤

<table>
  <tr>
    <td>水果</td>
    <td>蔬菜</td>
  </tr>
  <tr>
    <td>蘋果</td>
    <td>花椰菜</td>
  </tr>
  <tr>
    <td>橘子</td>
    <td>高麗菜</td>
  </tr>
</table>

也可以用 <th> 來做表格

<table>
  <tr>
     <th>海鮮</th>
     <th>肉類</th>
  </tr>
  <tr>
     <td>螃蟹</td>
     <td>雞肉</td>
  </tr>
  <tr>
     <td>蝦子</td>
     <td>牛肉</td>
  </tr>
</table>

<thead> <tbody> <tfoot>

加強HTML表格語意 (semantic) 確認表格不同目的區塊

<table>
  <thead>
    <tr>
      <th>科目</th>
      <th>分數</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>國文</td>
      <td>70</td>
    </tr>
    <tr>
      <td>數學</td>
      <td>80</td>
    </tr>
    <tr>
      <td>英文</td>
      <td>90</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>總成績</th>
      <td>85</td>
    </tr>
  </tfoot>
</table>

合併儲存格

搭配CSS表格樣式

table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
  text-align: center;
  padding: 15px;
}

• colspan 水平儲存格

<table>
  <tr>
    <td colspan="2">成績單</td>
  </tr>
  <tr>
    <td>科目</td>
    <td>分數</td>
  </tr>
  <tr>
    <td>國文</td>
    <td>100</td>
  </tr>
  <tr>
    <td>數學</td>
    <td>90</td>
  </tr>
  <tr>
    <td>英文</td>
    <td>80</td>
  </tr>
</table>

• rowspan 垂直儲存格

<table>
  <tr>
    <td>姓名</td>
    <td>年齡</td>
    <td>性別</td>
    <td>地址</td>
  </tr>
  <tr>
    <td>鐵熊</td>
    <td>25</td>
    <td rowspan="2">男</td>
    <td>台北</td>
  </tr>
  <tr>
    <td>阿寶</td>
    <td>27</td>
    <td>高雄</td>
  </tr>
</table>

資料來源:Html表格