iT邦幫忙

2023 iThome 鐵人賽

DAY 11
0
Modern Web

30天前端學習筆記心得系列 第 11

Day11-Html表格

  • 分享至 

  • xImage
  •  

<table> 表格標籤

<tr> (table row)表格橫列
<td> (table data)表格直行
<th> 欄位標題 可以用來代替 <td>
<table>
  <tr>
    <td>水果</td>
    <td>蔬菜</td>
  </tr>
  <tr>
    <td>蘋果</td>
    <td>花椰菜</td>
  </tr>
  <tr>
    <td>橘子</td>
    <td>高麗菜</td>
  </tr>
</table>

https://ithelp.ithome.com.tw/upload/images/20230926/20163257NNTfwWgnKW.png

也可以用 <th> 來做表格

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

https://ithelp.ithome.com.tw/upload/images/20230926/20163257EDnO5sqWAH.png

<thead> <tbody> <tfoot>

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

<thead> (table header)表格標題
<tbody> (table body)表格內容
<tfoot> (table footer)表格頁尾
<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>

https://ithelp.ithome.com.tw/upload/images/20230926/20163257Y0SqxLHm4l.png

合併儲存格

搭配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>

https://ithelp.ithome.com.tw/upload/images/20230926/20163257uYbcvmKFo6.png

  • 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>

https://ithelp.ithome.com.tw/upload/images/20230926/20163257G3gVip1zia.png

資料來源:Html表格


上一篇
Day10-Html語意標籤
下一篇
Day12-Html表單
系列文
30天前端學習筆記心得34
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言