J.J.'s Blogs

J.J. Huang   2019-05-24   Web   瀏覽次數：次   {{moment(1558676880000).fromNow()}}

Web - 第十五章 | HTML 表格基礎知識

📑 目錄
  1. 什麼是表格？
    1. 表格如何工作？
    2. 表格風格
    3. 什麼時候你不應該使用HTML表格?
    4. 動手建立：第一個表格
  2. 使用<th>元素添加標題
  3. 允許單元格跨越多個行和列
  4. 為表格中的列提供共同的樣式

常常在寫網頁上面的表格，總是會遇到要有標題的表格、要合併儲存格、要跨行跨列、樣式⋯等等。因為不熟悉的關係，常常花很多時間在搜尋方面，希望透過這一系列的了解，可以增加自己的技術能力。

什麼是表格？

表格是由行和列組成的結構化資料集(表格資料)，它能夠使你簡捷迅速地查找某個表示不同類型資料之間的某種關係的值 。比如說，某個人和他的年齡，一天或是一周，當地游泳池的時間表 。

成員 年齡
J.J. 18
K.K. 28
L.L 30

星期日 星期一 星期二 星期三 星期四 星期五 星期六
紀錄 備註 事情 處理 隨便 約會 出差
紀錄 備註 事情 處理 隨便 約會 出差

表格如何工作？

表格的一個特點就是嚴格. 通過在行和列的標題之間進行視覺關聯的方法，就可以讓訊息能夠很簡單地被解讀出來。​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌​‌‌​‌​‌‌​‌​​​​‌‌‌​‌​​​‌‌​‌‌​‌​‌‌​‌‌​​​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​​​​​​‌‌​​​‌​​‌‌‌​​‌​​‌‌​​​​​​‌‌​‌​‌​​‌‌​​‌​​​‌‌​‌​​​​‌​‌‌​‌​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌‌​​​‌​​‌‌​‌​‌

觀察下面的示例表格，然後找一個單數人稱代詞，這個單數人稱代詞是用於第三人稱的, 用於女性的, 用作句子中的對象. 你可以把相應的行和列的標題關聯起來，找到答案。

Web - 第十五章 - 圖 1 (01)

即使是盲人也可以解析HTML 表格中的資料，一個成功的HTML 表格應該做到無論用戶是視力正常還是視力受損，都能提高用戶的體驗。​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌​‌‌​‌​‌‌​‌​​​​‌‌‌​‌​​​‌‌​‌‌​‌​‌‌​‌‌​​​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​​​​​​‌‌​​​‌​​‌‌‌​​‌​​‌‌​​​​​​‌‌​‌​‌​​‌‌​​‌​​​‌‌​‌​​​​‌​‌‌​‌​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌‌​​​‌​​‌‌​‌​‌

表格風格

沒有套css

套用css

你也許會注意到一件事情，上面的表格看上去可讀性不是很好。
為了能夠讓表格在網頁上有效,你需要提供一些CSS的樣式訊息，以及盡可能好的HTML固定結構。​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌​‌‌​‌​‌‌​‌​​​​‌‌‌​‌​​​‌‌​‌‌​‌​‌‌​‌‌​​​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​​​​​​‌‌​​​‌​​‌‌‌​​‌​​‌‌​​​​​​‌‌​‌​‌​​‌‌​​‌​​​‌‌​‌​​​​‌​‌‌​‌​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌‌​​​‌​​‌‌​‌​‌

你可以瀏覽Styling tables來了解CSS的部分。

什麼時候你不應該使用HTML表格?

簡單來說,使用表格佈局而不使用CSS layout techniques是很糟糕的。

主要的理由有以下幾個:​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌​‌‌​‌​‌‌​‌​​​​‌‌‌​‌​​​‌‌​‌‌​‌​‌‌​‌‌​​​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​​​​​​‌‌​​​‌​​‌‌‌​​‌​​‌‌​​​​​​‌‌​‌​‌​​‌‌​​‌​​​‌‌​‌​​​​‌​‌‌​‌​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌‌​​​‌​​‌‌​‌​‌

  • 表格佈局減少了視覺受損的用戶的可訪問性 : 屏幕閱讀器 ,被盲人所使用,解析存在於HTML頁面上的標籤，然後為用戶讀出其中的內容。因為對於佈局來說，表格不是一個正確的工具，使用的標記比使用CSS佈局技術更複雜,所以屏幕閱讀器的輸出會讓他們的用戶感到困惑。
  • 表格會產生很多標籤 :正如剛才提到的,表格佈局通常會比正確的佈局技術涉及更複雜的標籤結構，這會導致代碼變得更難於編寫、維護、調試.
  • 表格不能自動響應 :當你使用正確的佈局容器(比如<header>, <section>, <article>,或是 <div>),它們的默認寬度是父元素的100%.而表格的的默認大小是根據其內容而定的。因此，需要採取額外的措施來獲取表格佈局樣式，以便有效地在各種設備上工作。

動手建立：第一個表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
html {
  font-family: sans-serif;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(200,200,200);
  letter-spacing: 1px;
  font-size: 0.8rem;
}

td, th {
  border: 1px solid rgb(190,190,190);
  padding: 10px 20px;
}

th {
  background-color: rgb(235,235,235);
}

td {
  text-align: center;
}

tr:nth-child(even) td {
  background-color: rgb(250,250,250);
}

tr:nth-child(odd) td {
  background-color: rgb(245,245,245);
}

caption {
  padding: 10px;
}
  • 每一個表格的內容都包含在這兩個標籤中: <table></table>.在你的HTML的<body>中添加這些內容。
  • 在表格中，最小的內容容器是單元格,是通過 <td>元素建立的(‘td’代表’table data’).把下面的內容添加到你的表格標籤中。
1
<td>這是第一個表格</td>

Web - 第十五章 - 圖 2 (02)

如果我們想要一行四個單元格，我們需要把這組標籤拷貝三次，更新你表中的內容，讓它看起來是這樣的。

1
2
3
4
<td>這是第一個表格</td>
<td>這是第二個表格</td>
<td>這是第三個表格</td>
<td>這是第四個表格</td>

Web - 第十五章 - 圖 3 (03)​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌​‌‌​‌​‌‌​‌​​​​‌‌‌​‌​​​‌‌​‌‌​‌​‌‌​‌‌​​​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​​​​​​‌‌​​​‌​​‌‌‌​​‌​​‌‌​​​​​​‌‌​‌​‌​​‌‌​​‌​​​‌‌​‌​​​​‌​‌‌​‌​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌‌​​​‌​​‌‌​‌​‌

你會看到,單元格不會放置在彼此的下方,而是自動與同一行上的其他單元格對齊.每個 <td>元素建立一個單獨單元格，它們共同組成了第一行。我們添加的每個單元格都使行的長度變長。

如果想讓這一行停止增加，並讓單元格從第二行開始，我們需要使用 <tr>元素(‘tr’代表’table row’)。

1
2
3
4
5
6
7
8
9
10
11
12
<tr>
  <td>這是第一個表格</td>
  <td>這是第二個表格</td>
  <td>這是第三個表格</td>
  <td>這是第四個表格</td>
</tr>
<tr>
  <td>這是第一個表格</td>
  <td>這是第二個表格</td>
  <td>這是第三個表格</td>
  <td>這是第四個表格</td>
</tr>

Web - 第十五章 - 圖 4 (04)​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌​‌‌​‌​‌‌​‌​​​​‌‌‌​‌​​​‌‌​‌‌​‌​‌‌​‌‌​​​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​​​​​​‌‌​​​‌​​‌‌‌​​‌​​‌‌​​​​​​‌‌​‌​‌​​‌‌​​‌​​​‌‌​‌​​​​‌​‌‌​‌​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌‌​​​‌​​‌‌​‌​‌


使用<th>元素添加標題

當標題明顯突出的時候，你可以更加簡單地找到你想找的資料，設計上也會看起來更好。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<tr>
    <td>&nbsp;</td>
    <td>陳大明</td>
    <td>小叮噹</td>
    <td>送會喬</td>
    <td>李重機</td>
  </tr>
  <tr>
    <td>性別</td>
    <td>男</td>
    <td>男</td>
    <td>女</td>
    <td>男</td>
  </tr>
  <tr>
    <td>年齡</td>
    <td>16</td>
    <td>9</td>
    <td>10</td>
    <td>5</td>
  </tr>
<tr>

Web - 第十五章 - 圖 5 (05)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<tr>
    <th>&nbsp;</th>
    <td>陳大明</td>
    <td>小叮噹</td>
    <td>送會喬</td>
    <td>李重機</td>
  </tr>
  <tr>
    <th>性別</th>
    <td>男</td>
    <td>男</td>
    <td>女</td>
    <td>男</td>
  </tr>
  <tr>
    <th>年齡</th>
    <td>16</td>
    <td>9</td>
    <td>10</td>
    <td>5</td>
  </tr>
<tr>

Web - 第十五章 - 圖 6 (06)​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌​‌‌​‌​‌‌​‌​​​​‌‌‌​‌​​​‌‌​‌‌​‌​‌‌​‌‌​​​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​​​​​​‌‌​​​‌​​‌‌‌​​‌​​‌‌​​​​​​‌‌​‌​‌​​‌‌​​‌​​​‌‌​‌​​​​‌​‌‌​‌​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌‌​​​‌​​‌‌​‌​‌

注:即使你不給表格添加你自己的樣式，表格標題也會帶有一些默認樣式：加粗和居中，讓標題可以突出顯示。


允許單元格跨越多個行和列

有時我們希望單元格跨越多行或多列。就像是Excel表裡面的合併儲存格的功能。

表格中的標題和單元格有 colspan 和 rowspan屬性，這兩個屬性可以幫助我們實現這些效果。這兩個屬性接受一個沒有單位的數字值，數字決定了它們的寬度或高度是幾個單元格。比如, colspan=”2”使一個單元格的寬度是兩個單元格。​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌​‌‌​‌​‌‌​‌​​​​‌‌‌​‌​​​‌‌​‌‌​‌​‌‌​‌‌​​​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​​​​​​‌‌​​​‌​​‌‌‌​​‌​​‌‌​​​​​​‌‌​‌​‌​​‌‌​​‌​​​‌‌​‌​​​​‌​‌‌​‌​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌‌​​​‌​​‌‌​‌​‌

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<tr>
   <th colspan="2">動物</th>
</tr>
<tr>
   <th colspan="2">河馬</th>
</tr>
<tr>
   <th rowspan="2">馬</th>
   <td>母馬</td>
</tr>
<tr>
   <td>種馬</td>
</tr>
<tr>
   <th colspan="2">鱷魚</th>
</tr>
<tr>
   <th rowspan="2">雞</th>
   <td>母雞</td>
</tr>
<tr>
   <td>公雞</td>
</tr>

Web - 第十五章 - 圖 7 (07)

  • colspan 讓 “動物”、”河馬”、和”鱷魚”佔2個單元格的寬度。
  • rowspan 讓 “馬”、”雞”佔2個單元格的高度。

為表格中的列提供共同的樣式

HTML有一種方法可以定義整列資料的樣式訊息：就是 <col>和 <colgroup>元素。它們存在是因為如果你想讓一列中的每個資料的樣式都一樣，那麼你就要為每個資料都添加一個樣式，這樣的做法是令人厭煩和低效的。你通常需要在列中的每個 <td>或 <th>上定義樣式，或者使用一個複雜的選擇器，比如:nth-child()。

1
2
3
4
5
6
7
8
9
10
11
12
<tr>
   <th>第一天</th>
   <th style="background-color: yellow">第二天</th>
</tr>
<tr>
   <td>蘋果</td>
   <td style="background-color: yellow">橘子</td>
</tr>
<tr>
   <td>葡萄</td>
   <td style="background-color: yellow">芭樂</td>
</tr>

Web - 第十五章 - 圖 8 (08)​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌​‌‌​‌​‌‌​‌​​​​‌‌‌​‌​​​‌‌​‌‌​‌​‌‌​‌‌​​​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​​​​​​‌‌​​​‌​​‌‌‌​​‌​​‌‌​​​​​​‌‌​‌​‌​​‌‌​​‌​​​‌‌​‌​​​​‌​‌‌​‌​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌‌​​​‌​​‌‌​‌​‌

這樣不太理想，因為我們不得不在列中的每個單元格中重複那些樣式訊息(在真實的項目中，我們或許會設置一個 class包含那三個單元格，然後在一個單獨的樣式表中定義樣式).為了捨棄這種做法，我們可以只定義一次，在 <col>元素中。<col> 元素被規定包含在 <colgroup>容器中，而<colgroup>就在 <table>標籤的下方。我們可以通過如下的做法來建立。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<table>
   <colgroup>
      <col>
      <col style="background-color: yellow">
   </colgroup>
   <tr>
      <th>第一天</th>
      <th>第二天</th>
   </tr>
   <tr>
      <td>蘋果</td>
      <td>橘子</td>
   </tr>
   <tr>
      <td>葡萄</td>
      <td>芭樂</td>
   </tr>
</table>

我們使用了兩個 <col>來定義“列的樣式”，每一個<col>都會制定每列的樣式，對於第一列，我們沒有採取任何樣式，但是我們仍然需要添加一個空的 <col> 元素，如果不這樣做，那麼我們的樣式就會應用到第一列上，這和我們預想的不一樣。

如果你想把這種樣式訊息應用到每一列，我們可以只使用一個 <col>元素，不過需要包含span屬性。​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌​‌‌​‌​‌‌​‌​​​​‌‌‌​‌​​​‌‌​‌‌​‌​‌‌​‌‌​​​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​​​​​​‌‌​​​‌​​‌‌‌​​‌​​‌‌​​​​​​‌‌​‌​‌​​‌‌​​‌​​​‌‌​‌​​​​‌​‌‌​‌​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌‌​​​‌​​‌‌​‌​‌

1
2
3
<colgroup>
  <col style="background-color: yellow" span="2">
</colgroup>

colspan 和 rowspan, span需要一個無單位的數字值，用來製定你想要讓這個樣式應用到表格中多少列。

這邊轉載了大量的文章和內容，但是每個部分我都有實際去做過，並了解過。這邊轉載主要是做筆記記錄。

註：以上參考了
MDN web docs 的 HTML table basics 文章。
MDN web docs 的 Styling tables​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌​‌‌​‌​‌‌​‌​​​​‌‌‌​‌​​​‌‌​‌‌​‌​‌‌​‌‌​​​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​​​​​​‌‌​​​‌​​‌‌‌​​‌​​‌‌​​​​​​‌‌​‌​‌​​‌‌​​‌​​​‌‌​‌​​​​‌​‌‌​‌​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌‌​​​‌​​‌‌​‌​‌

📚 相關文章

📄 公開段落採 CC BY 3.0 TW 授權，可自由轉載引用，需署名出處。
🔒 付費 / 會員段落 © J.J. Huang，保留所有權利，禁止轉載。