表格樣式

設計 HTML 表格的外觀並不是世界上最光鮮的工作，但有時我們都必須做。本文提供了使 HTML 表格看起來更美觀的指南，並重點介紹了一些特定的表格樣式技術。

先決條件 HTML 基礎知識（學習 HTML 簡介），瞭解 HTML 表格，以及對 CSS 工作原理的瞭解（先學習 CSS 的入門知識）。
目標 學習如何有效地設定 HTML 表格的樣式。

典型的 HTML 表格

讓我們從一個典型的 HTML 表格開始。我說典型 — 大多數 HTML 表格示例都是關於鞋子、天氣或員工的；我們決定透過將其與來自英國的著名朋克樂隊聯絡起來，使事情變得更加有趣。標記如下所示

html
<table>
  <caption>
    A summary of the UK's most famous punk bands
  </caption>
  <thead>
    <tr>
      <th scope="col">Band</th>
      <th scope="col">Year formed</th>
      <th scope="col">No. of Albums</th>
      <th scope="col">Most famous song</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Buzzcocks</th>
      <td>1976</td>
      <td>9</td>
      <td>Ever fallen in love (with someone you shouldn't've)</td>
    </tr>
    <tr>
      <th scope="row">The Clash</th>
      <td>1976</td>
      <td>6</td>
      <td>London Calling</td>
    </tr>

    <!-- several other great bands -->

    <tr>
      <th scope="row">The Stranglers</th>
      <td>1974</td>
      <td>17</td>
      <td>No More Heroes</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="2">Total albums</th>
      <td colspan="2">77</td>
    </tr>
  </tfoot>
</table>

由於諸如 scope、<caption>、<thead>、<tbody> 等功能，表格標記得很好，易於設定樣式，並且可訪問。不幸的是，它在螢幕上呈現時看起來不好（在 punk-bands-unstyled.html 上檢視實際效果）。

an unstyled table showing a summary of Uk's famous punk bands

僅使用預設瀏覽器樣式，它看起來很擁擠，難以閱讀，而且很無聊。我們需要使用一些 CSS 來修復它。

樣式化表格

讓我們一起完成設定表格示例的樣式。

  1. 首先，建立 示例標記 的本地副本，下載兩張圖片 (noise 和 leopardskin)，並將三個生成的的檔案放在本地計算機上的工作目錄中。
  2. 接下來，建立一個名為 style.css 的新檔案，並將其儲存到與其他檔案相同的目錄中。
  3. 透過將以下 HTML 行放在 <head> 中，將 CSS 連結到 HTML。
    html
    <link href="style.css" rel="stylesheet" />

間距和佈局

我們首先需要解決間距/佈局問題 — 預設的表格樣式非常擁擠！為此，將以下 CSS 新增到您的 style.css 檔案中。

css
/* spacing */

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: 3px solid purple;
}

thead th:nth-child(1) {
  width: 30%;
}

thead th:nth-child(2) {
  width: 20%;
}

thead th:nth-child(3) {
  width: 15%;
}

thead th:nth-child(4) {
  width: 35%;
}

th,
td {
  padding: 20px;
}

需要注意的最重要的部分如下所示

  • table-layout 的值為 fixed 通常是您在表格上設定的一個好主意，因為它使表格在預設情況下表現得更加可預測。通常，表格列的尺寸取決於其包含的內容，這會導致一些奇怪的結果。使用 table-layout: fixed，您可以根據其標題的寬度調整列的大小，然後根據需要處理其內容。這就是我們使用 thead th:nth-child(n) (:nth-child) 選擇器（“選擇在 <thead> 元素內的序列中作為 <th> 元素的第 n 個子元素”）選擇四個不同的標題併為其設定固定百分比寬度的原因。整列的寬度遵循其標題的寬度，為調整表格列的大小提供了一種好方法。Chris Coyier 在 固定表格佈局 中更詳細地討論了這種技術。我們將此與 width 的值為 100% 結合在一起，這意味著表格將填充放置它的任何容器，並且具有良好的響應能力（儘管它仍然需要做更多工作才能使其在窄螢幕寬度上看起來很好）。
  • border-collapse 的值為 collapse 是任何表格樣式工作的標準最佳實踐。預設情況下，當您在表格元素上設定邊框時，它們之間將會有間距，如下圖所示： 一個 2x2 表格，顯示預設邊框間距，沒有邊框摺疊 這樣看起來不太好（儘管這可能是您想要的樣式，誰知道呢？）。使用 border-collapse: collapse; 設定後，邊框會摺疊成一個，看起來好多了： 一個 2x2 表格，將 border-collapse 屬性設定為 collapse，顯示邊框摺疊成一個
  • 我們在整個表格周圍設定了一個 border，這是必需的，因為我們稍後會在表格標題和頁尾周圍設定一些邊框 — 當表格外部沒有邊框並且最終出現間隙時，它看起來真的很奇怪且不連貫。
  • 我們在 <th> 和 <td> 元素上設定了一些 padding — 這給資料項提供了一些呼吸空間，使表格看起來更易讀。

此時，我們的表格已經看起來好多了

a semi-styled table with spacing to make the data more legible and showing a summary of Uk's famous punk bands

一些簡單的排版

現在我們將對文字進行一些整理。

首先，我們在 Google Fonts 上找到了一種適合關於朋克樂隊的表格的字型。如果您願意，可以去那裡找到另一種；您只需要用 Google Fonts 提供的元素替換我們提供的 <link> 元素和自定義 font-family 宣告。

首先，將以下 <link> 元素新增到您的 HTML 頭部，位於您現有的 <link> 元素的正上方。

html
<link
  href="https://fonts.googleapis.com/css?family=Rock+Salt"
  rel="stylesheet"
  type="text/css" />

現在將以下 CSS 新增到您的 style.css 檔案中，位於之前新增的內容下方。

css
/* typography */

html {
  font-family: "helvetica neue", helvetica, arial, sans-serif;
}

thead th,
tfoot th {
  font-family: "Rock Salt", cursive;
}

th {
  letter-spacing: 2px;
}

td {
  letter-spacing: 1px;
}

tbody td {
  text-align: center;
}

tfoot th {
  text-align: right;
}

這裡沒有什麼特定於表格的東西；我們通常只是調整字型樣式以使其更易讀。

  • 我們設定了一個全域性無襯線字型堆疊；這純粹是一個風格選擇。我們還在 <thead> 和 <tfoot> 元素內的標題上設定了自定義字型，以呈現一種粗獷的朋克風格。
  • 我們在標題和單元格上設定了一些 letter-spacing，因為我們覺得它有助於提高可讀性。同樣，這主要是一個風格選擇。
  • 我們使 <tbody> 內的表格單元格中的文字居中對齊，以便它們與標題對齊。預設情況下，單元格的 text-align 值為 left，標題的值為 center，但通常將它們設定為相同的對齊方式看起來更好。標題字型上的預設粗體權重足以區分它們的外觀。
  • 我們使 <tfoot> 內的標題右對齊，以便它在視覺上更好地與其資料點相關聯。

結果看起來更整潔了

a styled table with a global sans-serif font stack and good spacing to make the data more legible and showing a summary of Uk's famous punk bands

圖形和顏色

現在進入圖形和顏色！由於表格充滿了朋克和態度，我們需要為其提供一些明亮的、引人注目的樣式以適合它。別擔心，您不必讓您的表格如此醒目 — 您可以選擇更微妙、更精緻的樣式。

首先，將以下 CSS 新增到您的 style.css 檔案中，同樣位於底部。

css
/* graphics and colors */

thead,
tfoot {
  background: url(leopardskin.jpg);
  color: white;
  text-shadow: 1px 1px 1px black;
}

thead th,
tfoot th,
tfoot td {
  background: linear-gradient(to bottom, rgb(0 0 0 / 10%), rgb(0 0 0 / 50%));
  border: 3px solid purple;
}

同樣，這裡沒有什麼特定於表格的東西，但值得注意一些事情。

我們在 <thead> 和 <tfoot> 上添加了一個 background-image，並將標題和頁尾中所有文字的 color 更改為白色（併為其提供了 text-shadow），以便它們可讀。您應該始終確保文字與背景形成鮮明的對比，以便它們可讀。

我們還在標題和頁尾中的 <th> 和 <td> 元素上添加了一個線性漸變，以營造出一種不錯的紋理，併為這些元素提供了明亮的紫色邊框。擁有多個巢狀元素非常有用，這樣您就可以將樣式疊加在一起。是的，我們可以使用多個背景影像將背景影像和線性漸變都放在 <thead> 和 <tfoot> 元素上，但我們決定將其分開，以有利於不支援多個背景影像或線性漸變的舊版瀏覽器。

斑馬條紋

我們想專門設立一個部分來向您展示如何實現 **斑馬條紋** — 交替的顏色行，使您更容易解析和閱讀表格中的不同資料行。將以下 CSS 新增到您的 style.css 檔案的底部。

css
/* zebra striping */

tbody tr:nth-child(odd) {
  background-color: #ff33cc;
}

tbody tr:nth-child(even) {
  background-color: #e495e4;
}

tbody tr {
  background-image: url(noise.png);
}

table {
  background-color: #ff33cc;
}
  • 之前您看到了 :nth-child 選擇器用於選擇特定的子元素。它也可以被賦予一個公式作為引數，以便它會選擇一系列元素。公式 2n+1 將選擇所有奇數編號的子元素（1、3、5 等），公式 2n 將選擇所有偶數編號的子元素（2、4、6 等）。我們在程式碼中使用了 odd 和 even 關鍵字，它們的作用與上述公式完全相同。在本例中，我們為奇數行和偶數行提供了不同的（鮮豔的）顏色。
  • 我們還在所有正文行上添加了一個重複的背景瓷磚，這只是一些噪點（一個半透明的 .png，上面有一些視覺失真），以提供一些紋理。
  • 最後，我們為整個表格提供了純色背景，以便不支援 :nth-child 選擇器的瀏覽器仍然可以為其正文行提供背景。

這種色彩爆炸產生了以下外觀。

a well styled table with a repeating background in the body rows and the entire table a solid background to make the data showing a summary of Uk's famous punk bands more appealing

現在，這可能有點過頭，不合您的口味，但我們要說明的是，表格不必枯燥乏味且學術性。

設定標題的樣式

關於我們的表格，還有一件事要做 — 設定標題的樣式。為此，將以下內容新增到您的 style.css 檔案的底部。

css
/* caption */

caption {
  font-family: "Rock Salt", cursive;
  padding: 20px;
  font-style: italic;
  caption-side: bottom;
  color: #666;
  text-align: right;
  letter-spacing: 1px;
}

這裡沒有什麼特別之處，除了 caption-side 屬性，其值為 bottom。這會導致標題被定位在表格的底部，這與其他宣告一起為我們提供了最終外觀（在 punk-bands-complete.html 上檢視實際效果）。

a white background below the styled table containing a caption of what the table is about. "a summary of Uk's famous punk bands" in this case

表格樣式快速提示

在繼續之前，我們想為您提供一個快速列表，其中包含上面說明的最有用要點。

  • 使您的表格標記儘可能簡單，並保持靈活性，例如，透過使用百分比，這樣設計更具響應能力。
  • 使用 table-layout: fixed 建立更可預測的表格佈局，允許您透過在標題 (<th>) 上設定 width 來輕鬆設定列寬。
  • 使用 border-collapse: collapse 使表格元素的邊框相互摺疊，產生更整潔、更容易控制的外觀。
  • 使用 <thead>、<tbody> 和 <tfoot> 將表格分解成邏輯塊，並提供額外的 CSS 應用位置，以便在需要時更輕鬆地將樣式疊加在一起。
  • 使用斑馬條紋使交替行更易於閱讀。
  • 使用 text-align 對齊您的 <th> 和 <td> 文字，以使內容更整潔易懂。

測試您的技能！

您已閱讀完本文，但您還記得最重要的資訊嗎？在繼續之前，您可以找到一些進一步的測試以驗證您是否保留了這些資訊 - 請參見 測試您的技能：表格。

總結

現在我們已經完成了表格樣式的學習，我們需要其他事情來打發時間。下一篇文章探討了 除錯 CSS - 如何解決諸如佈局不符合預期或屬性未按預期應用的問題。這包括使用瀏覽器 DevTools 來尋找解決問題方法的資訊。