表格樣式

為 HTML 表格設定樣式並不是世界上最迷人的工作，但有時我們都不得不做。本文解釋瞭如何使 HTML 表格看起來美觀，並突出了一些特定的表格樣式技術。

預備知識	基本 HTML 語法和HTML 表格，CSS 值和單位以及大小調整。
學習成果	處理表格中的間距，包括邊框摺疊。清晰突出顯示不同的表格區域，包括標題、表頭、表體和表尾。如何實現斑馬條紋，以及為什麼它很有用。

一個典型的 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>
    <tr>
      <th scope="row">The Damned</th>
      <td>1976</td>
      <td>10</td>
      <td>Smash it up</td>
    </tr>
    <tr>
      <th scope="row">Sex Pistols</th>
      <td>1975</td>
      <td>1</td>
      <td>Anarchy in the UK</td>
    </tr>
    <tr>
      <th scope="row">Sham 69</th>
      <td>1976</td>
      <td>13</td>
      <td>If The Kids Are United</td>
    </tr>
    <tr>
      <th scope="row">Siouxsie and the Banshees</th>
      <td>1976</td>
      <td>11</td>
      <td>Hong Kong Garden</td>
    </tr>
    <tr>
      <th scope="row">Stiff Little Fingers</th>
      <td>1977</td>
      <td>10</td>
      <td>Suspect Device</td>
    </tr>
    <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>等特性，該表格標記良好，易於樣式化且易於訪問。不幸的是，它看起來不怎麼樣。只有預設的瀏覽器樣式，它顯得侷促、難以閱讀，而且有點無聊

我們需要使用一些 CSS 來解決這個問題。你可以使用 CSS 隨意地為表格設定樣式。例如，我們建立了這個相當“朋克”風格的設計

/* font import */
@import "https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap";

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

thead th {
  line-height: 1.5;
}

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;
}

/* 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;
}

/* graphics */
thead,
tfoot {
  background: url("https://mdn.github.io/learning-area/css/styling-boxes/styling-tables/leopardskin.jpg");
  color: white;
}

thead th,
tfoot th,
tfoot td {
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.5));
  border: 3px solid purple;
  text-shadow: 1px 1px 1px black;
}

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

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

tbody tr {
  background-image: url("https://mdn.github.io/learning-area/css/styling-boxes/styling-tables/noise.png");
}

table {
  background-color: #ff33cc;
}

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

然而，這個設計相當花哨。在本文中，我們將引導您使用表格設計的一些最佳實踐進行標記——如Web Typography: designing tables to be read not looked at中所述。

開始為我們的表格設定樣式

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

首先，將前面顯示的示例標記複製到本地，並將其儲存在本地計算機上的某個工作目錄中。
接下來，建立一個名為style.css的新檔案，並將其儲存在與您的其他檔案相同的目錄中。
將以下 HTML 程式碼行放置在您的<head>中，將 CSS 連結到 HTML
html
```
<link href="style.css" rel="stylesheet" />
```

將您的 HTML 載入到瀏覽器中，檢視其預設外觀。

更新字型

這是一個小點，與表格樣式沒有嚴格關係，但我們認為預設字型對於關於朋克樂隊的表格來說有點過於正式。透過新增以下規則來開始您的 CSS

css

html {
  font-family: "Helvetica", "Arial", sans-serif;
}

間距

我們需要對錶格做的第一件事是整理間距——預設的表格樣式太侷促了！為此，請將以下 CSS 新增到您的style.css檔案的底部

css

table {
  table-layout: fixed;
  width: 90%;
  margin: 10px auto;
  border-collapse: collapse;
}

th,
td {
  padding: 0.6em;
}

最重要的部分如下

通常，在表格上設定table-layout值為fixed是個好主意，因為它使表格預設行為更可預測。通常，表格列的大小往往根據其包含的內容量來確定，這會產生一些奇怪的結果。使用table-layout: fixed，您可以根據標題的寬度來設定列的大小，然後根據需要處理其內容。Chris Coyier 在Fixed Table Layouts中更詳細地討論了這項技術。
我們將固定佈局與90%的width和10px auto的margin結合起來。這些設定意味著表格將大部分填充視口並水平居中。
對於任何表格樣式工作來說，將border-collapse設定為collapse都是標準的最佳實踐。預設情況下，當您在表格元素上設定邊框時，它們之間都會有間距，如下圖所示：這看起來不太美觀（儘管這可能是您想要的效果，誰知道呢？）。設定了border-collapse: collapse;後，邊框會摺疊成一個，看起來好得多：
我們為<th>和<td>元素設定了一些padding——這給了資料項一些“呼吸”空間，使表格看起來更清晰易讀。

儲存您的程式碼並重新整理瀏覽器以檢視結果。

對齊

接下來，我們將處理單元格中不同型別資料的對齊方式。最佳實踐要求文字左對齊，數字右對齊；以下 CSS 將實現這一點，現在將其新增到 CSS 檔案的底部。

css

tr :nth-child(2),
tr :nth-child(3) {
  text-align: right;
  width: 15%;
}

tr :nth-child(1),
tr :nth-child(4) {
  text-align: left;
  width: 35%;
}

tfoot tr :nth-child(1) {
  text-align: right;
}

tfoot tr :nth-child(2) {
  text-align: left;
}

我們在這裡使用了:nth-child偽類；這是一個有用的選擇器，允許您選擇元素的特定編號子元素，或特定序列。在這裡，我們使用它來選擇元素內部特定的<td>元素。

注意我們還為表格行設定了特定的寬度，其中包含文字的行比包含數字的行寬得多。這是一個好主意——包含更多內容的行需要更多空間，以儘可能讓其內容顯示在一行上。包含較少內容的行不需要那麼多空間來顯示資料，事實上，如果您給它們很多空間，資料會有點迷失在空間中，因此更難閱讀。

我們還應該確保資料項與其單元格的頂部對齊，而不是居中。為了實現這一點，我們可以使用vertical-align屬性。將您現有的th, td規則更新為以下內容

css

th,
td {
  vertical-align: top;
  padding: 0.3em;
}

再次，儲存並重新整理以檢視最新 CSS 更新的效果。

新增邊框

表格已經看起來好多了，但我們應該新增一些邊框，以在表格的<caption>、資料和底部的總計行之間提供視覺分隔。為此，請將以下規則新增到您的 CSS 中

css

tfoot {
  border-top: 1px solid #999999;
}

接下來，將您現有的table規則更新為以下內容

css

table {
  table-layout: fixed;
  width: 90%;
  margin: 10px auto;
  border-collapse: collapse;
  border-top: 1px solid #999999;
  border-bottom: 1px solid #999999;
}

儲存並重新整理；您的表格現在應該開始變得非常易讀了！

斑馬條紋

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

css

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

早些時候您看到:nth-child選擇器用於選擇特定的子元素。它也可以將公式作為引數，因此它將選擇一系列元素。公式2n+1將選擇所有奇數子元素（1、3、5等），公式2n將選擇所有偶數子元素（2、4、6等）。我們在程式碼中使用了odd關鍵字，它是2n+1公式的快捷方式（even是2n的縮寫）。

同樣，別忘了儲存並重新整理以檢視結果。

為標題設定樣式

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

css

caption {
  padding: 1em;
  font-style: italic;
  caption-side: bottom;
  letter-spacing: 1px;
}

這裡沒有什麼特別之處，除了caption-side屬性，它被賦予了bottom值。這會導致標題位於表格的底部。

完成的表格

您完成的表格設計應該如下圖所示

html {
  font-family: "Helvetica", "Arial", sans-serif;
}

table {
  table-layout: fixed;
  width: 90%;
  margin: 10px auto;
  border-collapse: collapse;
  border-top: 1px solid #999999;
  border-bottom: 1px solid #999999;
}

th,
td {
  vertical-align: top;
  padding: 0.6em;
}

tr :nth-child(2),
tr :nth-child(3) {
  text-align: right;
  width: 15%;
}

tr :nth-child(1),
tr :nth-child(4) {
  text-align: left;
  width: 35%;
}

tfoot tr :nth-child(1) {
  text-align: right;
}

tfoot tr :nth-child(2) {
  text-align: left;
}

tfoot {
  border-top: 1px solid #999999;
}

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

caption {
  padding: 1em;
  font-style: italic;
  caption-side: bottom;
  letter-spacing: 1px;
}

表格樣式快速提示

在繼續之前，我們認為為您提供一個上面最有用要點的快速列表

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

總結

現在表格樣式已經完成，我們需要一些其他事情來打發時間。下一篇文章探討了 CSS 除錯——如何解決佈局看起來不正確或屬性沒有按預期應用等問題。這包括使用瀏覽器開發工具來查詢問題解決方案的資訊。

幫助改進 MDN

瞭解如何貢獻

此頁面最後由MDN 貢獻者在2025 年 10 月 14 日修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題