表格

<aside> 💡

HTML 表格可以參考廖建翔老師的書 (第五章)。

</aside>

td / table data

在<table>裡，至少要有<td>，<td>就是table data，才可以成為一個有效的table。我們先設框線(border)為1，方便我們看清楚表格的範圍。

<aside> 📢

注意，不在td裡的內容，都不會視為table的一部分。

</aside>

  <h1>產品表格</h1>
  <table **border="1"**>
    <td>產品A</td>1
    <td>100元</td>2
    <td>50</td>3
    <td>這是一個優質產品A</td>4
  </table>

image.png

tr / table row

當我們有多筆資料時，不是利用<p>或<br>，而是利用<tr>來換行，<tr>就是table row，當我們沒有設定寬度時，每個欄位的寬度會以欄位最長的內容為主。當內容太長的時候，也會自動換行。

  <h1>產品表格</h1>
  <table border="1">
    <tr>
      <td>產品A</td>
      <td>100元</td>
      <td>50</td>
      <td>這是一個優質產品A</td>
    </tr>
    <tr>
      <td>產品B</td>
      <td>2000元</td>
      <td>5</td>
      <td>這是一個非常優質產品B</td>
    </tr>
    <tr>
      <td>產品C</td>
      <td>150元</td>
      <td>20</td>
      <td>這是一個優質產品C</td>
    </tr>
  </table>

image.png

th / table heading

當我們的表格有標題的時候，可以利用<th>來標示，<th>就是table heading。

  <h1>產品表格</h1>
  <table border="1">
    <tr>
      <th>產品名稱</th>
      <th>價格</th>
      <th>數量</th>
      <th>描述</th>
    </tr>
    <tr>
      <td>產品A</td>
      <td>100元</td>
      <td>50</td>
      <td>這是一個優質產品A</td>
    </tr>
    <tr>
      <td>產品B</td>
      <td>2000元</td>
      <td>5</td>
      <td>這是一個非常優質的產品B</td>
    </tr>
    <tr>
      <td>產品C</td>
      <td>150元</td>
      <td>20</td>
      <td>這是一個優質產品C</td>
    </tr>
  </table>

image.png

colspan、rowspan

可利用colspan或rowspan設定跨行或跨列。

  <h1>產品表格</h1>
  <table border="1">
    <tr>
      <th>產品類別</th>
      <th>產品名稱</th>
      <th>價格</th>
      <th>數量</th>
      <th>描述</th>
    </tr>
    <tr>
      <td rowspan="2">類別1</td>
      <td>產品A</td>
      <td>100元</td>
      <td>50</td>
      <td>這是一個優質產品A</td>
    </tr>
    <tr>
      <td>產品B</td>
      <td>2000元</td>
      <td>5</td>
      <td>這是一個非常優質的產品B</td>
    </tr>
    <tr>
      <td>類別2</td>
      <td>產品C</td>
      <td>150元</td>
      <td>20</td>
      <td>這是一個優質產品C</td>
    </tr>
  </table>

image.png