構建行星資料

在我們的表格評估中，我們為您提供了一些關於我們太陽系中行星的資料，並讓您將其構建成一個 HTML 表格。

先決條件 在嘗試此評估之前，您應該已經完成了本模組中的所有文章。
目標 測試對 HTML 表格和相關功能的理解。

起點

要開始評估，請在您本地計算機的新目錄中建立以下檔案的本地副本：blank-template.html、minimal-table.css 和 planets-data.txt。

注意：您可以在程式碼編輯器或線上編輯器（如 CodePen、JSFiddle 或 Glitch）中嘗試解決方案。

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

專案簡介

您正在一所學校工作；目前您的學生正在學習我們太陽系的行星，您想為他們提供一套易於理解的資料，以便他們查詢有關行星的事實和資料。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.

您還可以 在此處檢視即時示例（不要檢視原始碼——不要作弊！）