起始點
要開始評估,請在您的本地計算機上建立一個新目錄,並將 blank-template.html、minimal-table.css 和 planets-data.txt 的本地副本。
專案簡介
您正在一所學校工作;您的學生目前正在學習我們太陽系的行星,您想為他們提供一套易於理解的資料,以便查詢行星的事實和資料。HTML 資料表將是理想的選擇——您需要獲取可用的原始資料,並按照以下步驟將其轉換為表格。
完成步驟
以下步驟描述了完成表格示例所需的操作。您需要的所有資料都包含在 planets-data.txt 檔案中。如果您在視覺化資料時遇到困難,請檢視下面的即時示例,或嘗試繪製圖表。
- 開啟您的
blank-template.html副本,並透過新增外部容器、表格標題和表格主體來開始構建表格。此示例不需要表格頁尾。 - 為您的表格新增提供的標題。
- 在表格標題中新增一個包含所有列標題的行。
- 在表格主體中建立所有內容行,記住要以語義化的方式將所有行標題設定為標題。
- 確保所有內容都放置在正確的單元格中——在原始資料中,每一行行星資料都顯示在其關聯行星的旁邊。
- 新增屬性,使行標題和列標題與它們作為標題的行、列或行組明確關聯。
- 在包含所有行星名稱行標題的列周圍新增一個黑色的 邊框。
提示和技巧
- 標題行中的第一個單元格應為空,並跨越兩列。
- 組行標題(例如,類木行星),它們位於行星名稱行標題(例如,土星)的左側,處理起來有點棘手——您需要確保每個標題跨越正確的行數和列數。
- 一種將標題與行/列關聯的方法比另一種容易得多。
示例
完成的表格應如下所示:

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