HTML: 展示資訊的Table

在網站上，我們經常都會用到table來展示不同的資訊。想要使用table，我們可以透過：

<table></table>

想要在table上展示數據，我們可以透過：table row。table row是指在table上的每一個欄。

<table>
   <tr>欄1</tr>
   <tr>欄2</tr>
   <tr>欄3<tr>
</table>

在每一欄上，我們可以加入<td>，<td>是指table data，我們把數據加入到每一欄之上。

<table>
   <tr>
      <td>Isaac</td>
      <td>創業</td>
   </tr>
   <tr>
      <td><td>
   </tr>
</table>

有時候，我們需要在每一個table上加入標題，以識別該欄位關於什麼。我們可以透過<th></th>並在裡面加入attribute scope=”row/”col”以識別這個標題是row的標題還是column的標題。

<table>
   <tr>
      <td scope='col'>名稱</td>
      <td scope='col'>職業</td>
   </tr>
   <tr>
      <td>Isaac<td>
      <td>創業家<td>
   </tr>
</table>

有時候，某些欄位會橫跨數個cell，例如：日歷中，我們可能會有數個小時進行會議。這樣，會議便會霸佔數個欄位。我們可以透過colspan=”2″ 這個attribute去實現目標。

<table>
  <tr>
    <th>Monday</th>
    <th>Tuesday</th>
    <th>Wednesday</th>
  </tr>
  <tr>
    <td style='text-align: center;' colspan='2'>Demo Day</td>
    <td>Back in Town</td>
  </tr>
</table>

table會以上面的形式展示。同樣原理也可以用在row之上。只需使用在<td>加上<td rowspan=’2’></td>即可。

想把資訊弄得更整理，可以透過<thead>以及<tfoot>來使數據展示變得更有序。

<thead>
    <tr>
      <th>Quarter</th>
      <th>Revenue</th>
      <th>Costs</th>
    </tr>
  </thead>

<tfoot>
    <tr>
      <th>Total</th>
      <td>$22M</td>
      <td>$12.5M</td>
    </tr>
  </tfoot>