上一篇有介紹到列表了,今天要來介紹表格

開始之前先給大家看一下組成元件:
<table> </table>: 宣告表格
<caption> </caption>: 表格標題 (Optional)
<th> </th>: 表格欄位標題 (Optional)
<tr> </tr>: 表格列
<td> </td>: 表格欄

都看懂了?好!那今天就到這裡(欸

看完元件,相信大家對表格有點概念了吧:不了解沒關係,我這裡一步一步帶你來了解(最後面有付codepen,看完可以來練習一下):

1.首先你要知道你想要什麼樣的表格,主要分成兩種:標題在上的表格和標題在左的表格

如果你想要標題在上方,那就簡單了:

<table >
    <tr>
    <th>123</th>
    <th>123</th>
    <th>123</th>
  </tr>
  <tr>
    <td>123</td>
    <td>123</td>
    <td>123</td>
  </tr>
  <tr>
    <td>123</td>
    <td>123</td>
    <td>123</td>
  </tr>

那如果今天你想要標題在左邊:

<table>
  <tr>
    <th>123</th>
    <td>123</td>
    <td>123</td>
  </tr>
  <tr>
    <th>123</th>
    <td>123</td>
    <td>123</td>
  </tr>
  <tr>
    <th>123</th>
    <td>123</td>
    <td>123</td>
  </tr>
</table>

看出差異了嗎?沒錯<th>標籤就是標題的標籤,所以今天你要標題在左邊就是把每一列的第一個元素標籤改成<th>就對了!

記住當你今天使用了<th>標籤後文字會被粗體化,如果發現表格內的內容有被粗體化現象就知道不小心寫錯搂!

還不了解沒關係,我這裡有付codepen,幫助大家了解