iT邦幫忙

2022 iThome 鐵人賽

DAY 14
0
Modern Web

從0開始系列 第 14

從0開始爬CSS - 表格欄位

  • 分享至 

  • xImage
  •  

再繼續之前先補充一下


表格

  1. 標題位置 : caption-side
    之前在HTML的表格有先講過一點點,現在是要說說他的位置改變
    有2個設定值,都可以猜到吧,top、bottom
    https://ithelp.ithome.com.tw/upload/images/20220929/20151919aG0xEuSAy6.png

  2. 框線模式 : border-collapse
    有2個設定值,分開(separate)、重合(collapse)
    https://ithelp.ithome.com.tw/upload/images/20220929/20151919BXzGi2Nj6t.png
    重合版
    https://ithelp.ithome.com.tw/upload/images/20220929/20151919jWuvMSgk3E.png

  3. 編排方式 : table-layout
    有2個設定值,固定(fixed)、自動(auto)
    自動是根據內容決定儲存格長度,固定則是可以自己設定儲存格長度
    https://ithelp.ithome.com.tw/upload/images/20220929/20151919KuFtdTQdND.png
    (題外話:好醜……

  4. 框線間距 : border-spacing
    設定值直接輸入長度就可以了!
    https://ithelp.ithome.com.tw/upload/images/20220929/20151919QzBdDr5WDm.png

  5. 空白儲存格 : empty-cells
    當然有2種設定值啦,就是預設顯示(show)、隱藏(hide)
    https://ithelp.ithome.com.tw/upload/images/20220929/20151919G2sbyln634.png
    隱藏後
    https://ithelp.ithome.com.tw/upload/images/20220929/20151919F4oB0UNQ9e.png


多欄位排版 : column-

  1. 欄位數量/欄位寬度 : column-count/width
    這邊放在一起講的原因是兩者之間只能選一個,前者直接決定數量,後者決定欄位的寬度
    這個是直接決定欄位的寬度,所以他會直接分段
    https://ithelp.ithome.com.tw/upload/images/20220929/201519198HhXyGtIfb.png
    直接決定數量,強制整齊!
    https://ithelp.ithome.com.tw/upload/images/20220929/20151919d3VOhuhwnv.png

  2. 欄位間距 : column-gap
    https://ithelp.ithome.com.tw/upload/images/20220929/20151919yz0jXQPIBy.png

  3. 欄位分隔線 : column-rule-
    有3個可以設定的地方,style、width、color
    https://ithelp.ithome.com.tw/upload/images/20220929/20151919S3bda1WsV6.png
    https://ithelp.ithome.com.tw/upload/images/20220929/20151919108gG20ftr.png

  4. 換欄 : break-
    也是3個設定值,inside、before、after
    有點像欄位的分區、分段
    https://ithelp.ithome.com.tw/upload/images/20220929/20151919RAZlNPeeix.png
    這裡是column-count的數值不同
    https://ithelp.ithome.com.tw/upload/images/20220929/20151919L0ipIaq7bZ.png

  5. 跨欄顯示 : column-span
    這個屬性是讓設定區塊不受其他影響,獨立出來的意思
    https://ithelp.ithome.com.tw/upload/images/20220929/20151919NeF7vvX93m.png


突然想到我也有追日本明星/images/emoticon/emoticon25.gif


上一篇
從0開始爬CSS - 顏色漸層&Box Model
下一篇
從0開始爬CSS - 框線、寬高、定位方式
系列文
從0開始30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言