テーブルを作成するためのHTML/CSSコード

Question

現在、私はこの学校の課題に取り組んでいます。解決策が見つからない2つの問題があります。

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