テーブルのレイアウト

テーブルに枠線とマージン・パディングを適用させる方法についての説明です。

テーブルに枠線とマージン・パディングを適用させるには、枠線およびマージン・パディングのCSSをtableタグとtd/thタグに適用させればOKです。その際、枠線のCSSに「border-collapse: collapse」を指定し、隣接するセルのボーダーを重ねて表示させると綺麗になります。(「border-collapse: separate」を指定した場合、もしくは何も指定しない場合は隣接するセルのボーダーが間隔をあけて表示されます)

《例》

.tablebox {
border: 2px solid skyblue;
border-collapse: collapse;
margin: 1em 0;
padding: 0.5em 1em 0.7em 1em
}
<table class="tablebox">
<tr>
<td class="tablebox">ジラーチ</td>
<th class="tablebox">ジラーチかわいい</th>
<td class="tablebox">ジラーチかわいい</td>
</tr>
<tr>
<td class="tablebox">ジラーチ</td>
<td class="tablebox">ジラーチかわいい</td>
<td class="tablebox">ジラーチかわいい</td>
</tr>
</table>

《表示結果》

ジラーチ ジラーチかわいい ジラーチかわいい
ジラーチ ジラーチかわいい ジラーチかわいい

※ separate or 指定なし の場合

ジラーチ ジラーチかわいい ジラーチかわいい
ジラーチ ジラーチかわいい ジラーチかわいい

>>CSS講座メニューへ戻る