テーブルのレイアウト

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

★tableタグとtd/thタグに適用

テーブルに枠線とマージン・パディングを適用させるには、枠線およびマージン・パディングの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 指定なしの場合

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

★tableタグとtd/thタグに適用

《例》

《表示結果》

※ separate or 指定なし の場合

※ separate or 指定なしの場合