テーブルのレイアウト - 趣味サイトのためのCSS3講座

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

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

《例》


table {

  width: 100%;

  text-align: left;

  border-collapse: collapse;

  margin: 2% 0 6% 0;

}



th, td {

  text-align: left;

  border: 2px solid skyblue;

  margin: 1% 0;

  padding: 0.5em 1em 0.7em 1em

}



<table>

 <tr>

  <td></td>

  <th>当社製品</th>

  <th>他社製品</th>

 </tr>

 <tr>

  <th>価格</th>

  <td>3850円</td>

  <td>4980円</td>

 </tr>

  <tr>

  <th>性能</th>

  <td>◎</td>

  <td>◯</td>

 </tr>

</table>

《表示結果》

	当社製品	他社製品
価格	3850円	4980円
性能	◎	◯

※ separate or 指定なしの場合

	当社製品	他社製品
価格	3850円	4980円
性能	◎	◯

テーブルとグリッド

テーブルと似たようなレイアウトとして「グリッドレイアウト」もあります。
ただ、表を作成する場合にはテーブルレイアウトのほうが整理しやすいので、テーブルを使うことをおすすめします。