用于创建表格的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