用于创建表的HTML / CSS代码

Question

我目前正在为学校做这项工作。我有两个问题，我无法找到解决方案。

HTML验证为我提供了此错误 - 表格行为5列宽，超出了第一行（4）建立的列数。 从第72行第5栏;到第72行，第9栏

正如您在桌面上看到的那样，最后有一个额外的列非常小。我不知道如何消除它。

＆＃13;

＆＃13;

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

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

    td {
	text-align: center;
    }

    .text {
	text-align: left;
    }

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

错误发生在最后td行：

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

最后一个标记必须是结束标记：</td>而不是<td>

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

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

    td {
	text-align: center;
    }

    .text {
	text-align: left;
    }

    tr:nth-of-type(even) {
	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