BOOK Studio947
狩野祐東・狩野さやか著書
コラム

詳しくわかるテーブル（2）

先の記事に引き続き、今回もテーブルの話です。CSSの観点から見ると、テーブルは少し特殊な要素です。

『スラスラわかるHTML&CSSのきほん』p.101〜106、p.183〜186

セルにマージン？

　テーブルのCSSにborder-collapse:collapse;が適用されている場合、セルにマージンを付けることはできません。<th>、<td>内の要素と、その罫線との間にすき間を作る場合はpaddingプロパティを使用します。
　一方、border-collapse:separate;が適用されている場合、各セルの間にすき間を作ることができます。使用するのはmarginプロパティではありません。border-spacingという別のプロパティです。border-spacingプロパティは<th>、<td>ではなく、<table>に対して適用します。border-spacingプロパティの値は、1番目が横方向のすき間、2番目が縦方向のすき間です。2番目の値は省略可能で、その場合は4辺に1番目の値が適用されます。

セルの横方向に8px、縦方向に2pxのすき間を作る
A列 B列 C列
1-A 1-B 1-C
2-A 2-B 2-C 
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>border-spacing</title>
<style>
table {
    border-collapse: separate;
    border-spacing: 8px 2px;
}
th, td {
    border: 1px solid #cccccc;
}
</style>
</head>
<body>
<table>
<tr><th>A列</th><th>B列</th><th>C列</th></tr>
<tr><td>1-A</td><td>1-B</td><td>1-C</td></tr>
<tr><td>2-A</td><td>2-B</td><td>2-C</td></tr>
</table>
</body>
</html>

　border-spacingプロパティはIE8以降で有効です。それ以前のIEでも同様の表示をさせるには、<table>タグのcellspacing属性を使用します。ただし、cellspacing属性は横と縦のすき間を個別に指定することはできません。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>border-spacing</title>
<style>
table {
    border-collapse: separate;
}
th, td {
    border: 1px solid #cccccc;
}
</style>
</head>
<body>
<table cellspacing="4">
<tr><th>A列</th><th>B列</th><th>C列</th></tr>
<tr><td>1-A</td><td>1-B</td><td>1-C</td></tr>
<tr><td>2-A</td><td>2-B</td><td>2-C</td></tr>
</table>
</body>
</html>

こんな記事も

新着記事

著書一覧

Amazon.co.jpアソシエイト