テーブルのレイアウト - 趣味サイトのための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円
性能
▲ページの先頭へ
テーブルと似たようなレイアウトとして「グリッドレイアウト」もあります。
ただ、表を作成する場合にはテーブルレイアウトのほうが整理しやすいので、テーブルを使うことをおすすめします。
▲ページの先頭へ

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