用於創建表格的HTML/CSS代碼

Question

我目前正在爲此作業進行學校工作。我有兩個問題找不到解決方案。

HTML驗證給了我這個錯誤 - 一個錶行是5列寬，超過了第一行（4）建立的列數。 來自第72行，第5欄;到第72行第9列

正如你在表格中看到的那樣，在結尾處有一個非常小的額外列。我不知道如何消除這一點。

table { 
 
\t margin: auto; 
 
\t border: 1px solid #3399cc; 
 
\t width: 90%; 
 
\t border-collapse: collapse; 
 
    } 
 

 
    td, th { 
 
\t padding: 5px; 
 
\t border: 1px solid #3399cc; 
 
    } 
 

 
    td { 
 
\t text-align: center; 
 
    } 
 

 
    .text { 
 
\t text-align: left; 
 
    } 
 

 
    tr:nth-of-type(even) { 
 
\t background-color: #f5fafc 
 
    }

<table> 
 
    <tr> 
 
    <th id="package-names">Package Name</th> 
 
    <th id="description">Description</th> 
 
    <th id="nights">Nights</th> 
 
    <th id="cost-per-person">Cost per Person</th> 
 
    </tr> 
 
    <tr> 
 
    <td headers="package-names">Weekend Escape</td> 
 
    <td headers="description" class="text">Two breakfasts, a  trail map, a picnic snack</td> 
 
    <td headers="nights">2</td> 
 
    <td headers="cost-per-person">$450</td> 
 
    </tr> 
 
    <tr> 
 
    <td headers="package-names">Zen Retreat</td> 
 
    <td headers="description" class="text">Four breakfasts, a trail map, a pass for daily yoga</td> 
 
    <td headers="nights">4</td> 
 
    <td headers="cost-per-person">$600</td> 
 
    </tr> 
 
    <tr> 
 
    <td headers="package-names">Kayak Away</td> 
 
    <td headers="description" class="text">Two breakfasts, two hours of kayak rental daily, a trail map</td> 
 
    <td headers="nights">2</td> 
 
    <td headers="cost-per-person">$500<td> 
 
    </tr> 
 
</table>

Answer 1

的錯誤是在最後td行：

<td headers="cost-per-person">$500<td> 

最後標籤必須是一個關閉標籤：代替</td><td>

table { 
 
\t margin: auto; 
 
\t border: 1px solid #3399cc; 
 
\t width: 90%; 
 
\t border-collapse: collapse; 
 
    } 
 

 
    td, th { 
 
\t padding: 5px; 
 
\t border: 1px solid #3399cc; 
 
    } 
 

 
    td { 
 
\t text-align: center; 
 
    } 
 

 
    .text { 
 
\t text-align: left; 
 
    } 
 

 
    tr:nth-of-type(even) { 
 
\t background-color: #f5fafc 
 
    }

<table> 
 
    <tr> 
 
    <th id="package-names">Package Name</th> 
 
    <th id="description">Description</th> 
 
    <th id="nights">Nights</th> 
 
    <th id="cost-per-person">Cost per Person</th> 
 
    </tr> 
 
    <tr> 
 
    <td headers="package-names">Weekend Escape</td> 
 
    <td headers="description" class="text">Two breakfasts, a  trail map, a picnic snack</td> 
 
    <td headers="nights">2</td> 
 
    <td headers="cost-per-person">$450</td> 
 
    </tr> 
 
    <tr> 
 
    <td headers="package-names">Zen Retreat</td> 
 
    <td headers="description" class="text">Four breakfasts, a trail map, a pass for daily yoga</td> 
 
    <td headers="nights">4</td> 
 
    <td headers="cost-per-person">$600</td> 
 
    </tr> 
 
    <tr> 
 
    <td headers="package-names">Kayak Away</td> 
 
    <td headers="description" class="text">Two breakfasts, two hours of kayak rental daily, a trail map</td> 
 
    <td headers="nights">2</td> 
 
    <td headers="cost-per-person">$500</td> 
 
    </tr> 
 
</table>

Answer 2

你只是缺少最後一行在結束<td>斜線，看起來應該像這樣：

<td headers="cost-per-person">$500</td> 

修正版本：http://codepen.io/alexgurrola/pen/EWrNEv?editors=1000