iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 16
1

HTML <table> 元件代表表格數據──換句話說,就是透過二維資料表來呈現資訊。
早期 table 是同時拿來做網站排版與資料呈現,在 html、div 出現之後,慢慢回歸資料呈現的使用。永遠的 table,改變的只有使用它的方式。

來看看 table 的樣子吧!

<table>
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
</table>

上面的表格,如果加上框線,在網頁上會是這樣子的呈現

Header content 1 Header content 2
Body content 1 Body content 2
Footer content 1 Footer content 1

有發現什麼嗎?
在 Html 上面的內容,如果沒有特別設定,在瀏覽器應該都會是由上往下逐一呈現,照理說 Body 跟 Footer 這兩列應該要對調過來才對,因為在 table 裡你會發現順序是 thead --> tfoot --> tbody

這其實是 Html5 之前的規定,在 HTML5 之後已經允許 tfoot 可以放到 tbody 之後了。[1]

Table 在 HTML5 之前存在的 Attributes

已棄用的 原本用途 HTML5 建議改用
align html元素如何環繞table(例) 改用CSS float設定
bgcolor 設定背景色 改用CSS background-color設定
border 表格的邊框寬度(例) 改用CSS border設定
cellpadding 表格內容跟邊緣的寬度(例) 改用CSS padding設定
cellspacing 格與格之間的距離(例) 改用CSS設定
frame 規定圍繞表格的邊框哪些是可見的(例) 改用CSS設定
rules 規定內側哪些邊框式可見的(例) 改用CSS設定
summary 表格摘要(例)
width 規定表格的寬度 改用CSS設定

這裡面我覺得最特別的是 align ,因為他有等同 float 文繞圖的效果,大家可以到上面的例子連結去實驗一下把 p 裡面的文字加長,就可以看到文繞圖效果。

Table 的 合併

列的合併 colspan

<table border="1">
    <caption>電話簿</caption>
    <tr>
        <th>姓名</th>
        <th colspan=2>电话</th>
        <th>地址</th>
    </tr>
    <tr>
        <td>Gary</td>
        <td>0988-123123</td>
        <td>0986-898989</td>
        <td>台北市三重區中華北路一段190-5號</td>
    </tr>
    <tr>
        <td>Howard</td>
        <td colspan=2>0966-188188</td>
        <td>台南市永康區中華北路一段190-3號</td>
    </tr>
</table>

列的合併是寫在同一個 tr 裡面的儲存格,例如這個例子裡,電話需要兩列,因此在 th 只會看到三行 <th> ,然後在中間的 th 加上 colspan=2 ,即表示將兩列 th 合併。
結果如下:

欄的合併 rowspan

<table border=1>
    <caption>電話簿</caption>
    <tr>
      <th>姓名</th>
      <td>塌客</td>
      <td>露西</td>
      <td>奈特</td>
      <td>查理</td>
      <td>史奴比</td>
    </tr>
    <tr>
      <th rowspan=2>電話</th>
      <td>0911-456789</td>
      <td rowspan=2>0933-567489</td>
      <td>0944-567289</td>
      <td rowspan=2>0966-123578</td>
      <td rowspan=2>0966-123578</td>
    </tr>
    <tr>
      <td>0922-345678</td>
      <td>0955-123589</td>
    </tr>
</table>

要注意的是合併的欄位 rowspan 要寫在上面那一欄,下面那一欄則不需要寫任何東西。因此會看到第二個 tr 裡面都是資料,第三個 tr 只有兩個 td。
結果如下:

Table 的 CSS 屬性

border:設定 table 的邊框

格式為 border: 粗細 樣式 顏色;

border-collapse:決定是否折疊表格的邊框

表格預設會有一個邊框的寬度,透過設定 border-collapse: collapse; 可以將邊框摺疊成單線。(如圖右)

border-spacing:指定相鄰單元格的邊界之間的距離

border-spacing 只能寫成一個值,或兩個值。

//一個值
border-spacing: 10px; 四邊都一樣的距離

//兩個值(與一般的上下、左右不同,是寫成左右、上下)
border-spacing: 10px 50px; 左右 10px 上下 50px 

w3school範例

caption-side:指定表格標題的位置

值有:top 與 bottom

empty-cells:指定是否在表格中的空單元格上顯示邊框和背景

值有:hide 與 show,使用 hide 可以隱藏沒有內容的單元格(包含邊框和背景)。

table-layout:設置表格佈局算法

值有:auto | fixed | initial | inherit
在設定單元格的寬度之後,針對table再加上 table-layout:fixed; 可以固定單元格的寬度,不會因為資料的長度而改變單元格的長度。

可以參考 w3school 的範例

以上是 Table 的小介紹。各位看倌明天見囉~

參考資料:
[1] https://www.w3.org/TR/html51/tabular-data.html#tabular-data
[2] https://www.w3schools.com/tags/tag_table.asp
[3] https://www.w3schools.com/css/css_table.asp


上一篇
Day15:小事之 HTML 語意化標籤 下篇
下一篇
Day17:小事之 HTML table responsive
系列文
前端路上那些重要與不重要的小事30

2 則留言

0
SunAllen
iT邦高手 1 級 ‧ 2018-01-04 14:18:10

塌客 <=請問是 塔客 還是 台客 的意思XD

他其實是史奴比漫畫裡面的那隻黃色小鳥,全名是"糊塗塌客"~XDDD
沒想到居然有人問這個問題,太特別了,哈哈~

SunAllen iT邦高手 1 級 ‧ 2018-01-04 14:36:52 檢舉

原來是史奴比...唉...我比較熟日漫XD 誤會了...orz

0
Chris
iT邦新手 5 級 ‧ 2018-01-06 14:13:25

許願: Excel 的涷結窗格怎麼做?

XDDD~居然還許願(抖

我要留言

立即登入留言