挑戰:構建行星資料表

在這個挑戰中,我們將為您提供我們太陽系行星的一些資料。您的任務是將其構建成一個可訪問的 HTML 表格。

起始點

要開始評估,請在您的本地計算機上建立一個新目錄,並將 blank-template.htmlminimal-table.cssplanets-data.txt 的本地副本。

注意:您可以在程式碼編輯器或線上編輯器(如 CodePenJSFiddle)中嘗試解決方案。

如果您遇到困難,可以透過我們的 溝通渠道 與我們聯絡。

專案簡介

您正在一所學校工作;您的學生目前正在學習我們太陽系的行星,您想為他們提供一套易於理解的資料,以便查詢行星的事實和資料。HTML 資料表將是理想的選擇——您需要獲取可用的原始資料,並按照以下步驟將其轉換為表格。

完成步驟

以下步驟描述了完成表格示例所需的操作。您需要的所有資料都包含在 planets-data.txt 檔案中。如果您在視覺化資料時遇到困難,請檢視下面的即時示例,或嘗試繪製圖表。

  1. 開啟您的 blank-template.html 副本,並透過新增外部容器、表格標題和表格主體來開始構建表格。此示例不需要表格頁尾。
  2. 為您的表格新增提供的標題。
  3. 在表格標題中新增一個包含所有列標題的行。
  4. 在表格主體中建立所有內容行,記住要以語義化的方式將所有行標題設定為標題。
  5. 確保所有內容都放置在正確的單元格中——在原始資料中,每一行行星資料都顯示在其關聯行星的旁邊。
  6. 新增屬性,使行標題和列標題與它們作為標題的行、列或行組明確關聯。
  7. 在包含所有行星名稱行標題的列周圍新增一個黑色的 邊框

提示和技巧

  • 標題行中的第一個單元格應為空,並跨越兩列。
  • 組行標題(例如,類木行星),它們位於行星名稱行標題(例如,土星)的左側,處理起來有點棘手——您需要確保每個標題跨越正確的行數和列數。
  • 一種將標題與行/列關聯的方法比另一種容易得多。

示例

完成的表格應如下所示:

Complex table has a caption above it. The top row cells are column headers. There are three columns of headers. The first two columns have merged cells, with the third column being individual headers for each row. All the text is centered. The headers and every other row have a slight background color.

您也可以 在此處檢視即時示例(不要檢視原始碼——不要作弊!)。