iT邦幫忙

2021 iThome 鐵人賽

DAY 11
0
Modern Web

網頁設計入門筆記系列 第 11

Day11表格(HTML)

  • 分享至 

  • xImage
  •  

HTML表格

顧名思義 就是一個可以放入資料的容器 並且以表格的形式呈現給使用者
是個重要的功能 需要小小的練習才可以對表格更有概念 是個常用的標籤

他就好像Excel一樣有行有列的表格 舉個例子

    <table>
        <tr>
          <th>人名</th>
          <th>身高</th>
          <th>體重</th>
          
        </tr>
        <tr>
          <td>阿醜</td>
          <td>176cm</td>
          <td>50kg</td>
        </tr>
        <tr>
          <td>阿扁</td>
          <td>168cm</td>
          <td>100kg</td>
        </tr>
        <tr>
          <td>阿歪</td>
          <td>180cm</td>
          <td>90kg</td>
        </tr>
    </table>
      

https://ithelp.ithome.com.tw/upload/images/20210911/20129404GMxYYyGLtu.jpg

介紹一下這個程式碼

  • table主要用來包住整個格式的結構
  • tr(table row)用來定義表格的橫列
  • td(table data)用來定義表格的直排 也就是每一格的資料
  • th(table head)和td差不多 但用來強調他是欄位的標題

colspan 和 rowspan

colspan用來水平合併多行 rowspan用來垂直合併多列

例如

<table>
            <tr>
              <th>人名</th>
              <th>身高</th>
              <th>興趣</th>
              
            </tr>
            <tr>
              <td>阿醜</td>
              <td>176cm</td>
              <td rowspan="3">打球</td>
            </tr>
            <tr>
              <td>阿扁</td>
              <td>168cm</td>
             
            </tr>
            <tr>
              <td>阿歪</td>
              <td>180cm</td>
              
            </tr>
        </table>

https://ithelp.ithome.com.tw/upload/images/20210911/20129404e8OBzOtLxC.jpg
假如他們三個都愛打球 那麼我在阿醜的那行加入了rowspan直排合併=3
那麼他們三個人的格子就會變成一個大方塊
但因為還沒有套用css 他還沒有邊框 可能還看得不明顯


上一篇
Day10輸入input(HTML)
下一篇
Day12幫HTML穿衣服囉(CSS)
系列文
網頁設計入門筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言