テーブルの練習

テーブルの練習

HTML

<h1>テーブルの練習</h1>
<table>
<caption>宿泊料金表</caption>
<tr>
<th>部屋タイプ</th><th colspan="3">ツイン</th><th colspan="2">シングル</th>
</tr>
<tr>
<th>グレード</th><td>スタンダード</td><td>エグゼクティブ</td><td>スイート</td><td>スタンダード</td><td>エグゼクティブ</td>
</tr>
<tr>
<th>平日</th><td>15,800円</td><td>20,800円</td><td rowspan="2">58,000円</td><td>9,800円</td><td>14,800円</td>
</tr>
<tr>
<th>休前日</th><td>19,800円</td><td>25,800円</td><td>12,800円</td><td>17,800円</td>
</tr>
</table>

stylesheet

<style>

table, tr, th, td {
border: 1px solid #777;
}

th,td {
padding: 0.3em 1em;
}
table {
border-collapse:collapse;
text-align: center;
}
th {
background: #C96;
color: #FFF;
}

</style>

ポイント

・テーブルの隙間を消す

table {
width: 650px;
height: 150px;
border-collapse:collapse;
text-align: center;
}

tableのスタイルシートにborder-collapse:collapse;を入れて隙間を消す

・テーブルの連結

colspanとrowspan

は右方向のセルに連結

は下方向のセルに連結

テーブル要素の中のthやtdに書く

<th colspan="3">ツイン</th>

<td rowspan="2">58,000円</td>

こんな感じ

="　"の中の数字の数だけ連結する

今日のミス

<tr></tr>を<tr><tr>と/無しに打ってしまい

連結が効かず焦った。

WV3

The W3C Markup Validation Service

でエラーチェックをしたところエラーが出まくったので気づいた。

エラーチェックは大事です。