測試你的技能：表格

本次技能測試的目的是評估你是否理解如何在 CSS 中樣式化 HTML 表格，請點選此處檢視教程.

注意：你可以在此頁面的互動式編輯器中或在線上編輯器（如 CodePen、JSFiddle 或 Glitch）中嘗試解決方案。

如果你遇到困難，可以隨時透過我們的 溝通渠道 聯絡我們。

任務

在本節關於表格樣式的課程中，我們以一種相當俗麗的方式對錶格進行了樣式設定。在本任務中，我們將對同一個表格進行樣式設定，但將使用一些好的表格設計實踐，如外部文章Web Typography: Designing Tables to Be Read Not Looked At中所述。

我們完成的表格將如下所示。您可以透過多種方式實現這一點，但建議您遵循與教程中類似的模式來完成以下操作。

  • 為表格標題和資料新增0.3em的填充，並將它們與單元格頂端對齊。
  • 將包含數字的列的標題和資料右對齊。
  • 將包含文字的列的標題和資料左對齊。
  • 將表格頁尾的標題右對齊。
  • 將表格頁尾的資料左對齊。
  • 為表格新增 1 畫素的頂部和底部實線邊框，邊框顏色為十六進位制顏色#999。
  • 為頁尾新增 1 畫素的頂部實線邊框，邊框顏色為十六進位制顏色#999。
  • 刪除表格元素邊框之間的預設間距，以獲得預期結果。
  • 使用十六進位制顏色#eee對主表格的每奇數行進行條紋化。

A table with striped rows.

嘗試更新下面的即時程式碼以重新建立完成的示例。

附加問題

  • 您如何才能使表格佈局的行為更加可預測？考慮表格列的預設大小以及如何改變這種行為以根據標題的寬度來調整列的大小。

下載此任務的起點，在您自己的編輯器或線上編輯器中進行操作。