I'm currently tackling this school assignment and have hit a roadblock with two issues.
The HTML Validation error I'm encountering is regarding a table row that is 5 columns wide, exceeding the established count by the first row (4). From line 72, column 5; to line 72, column 9
There seems to be an extra small column at the end of the table, and I'm unsure how to remove it.
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>