![見出し画像](https://assets.st-note.com/production/uploads/images/22426635/rectangle_large_type_2_1fa66a3cc6c7b39e56c38855124f163a.jpeg?width=1200)
継続は力なり#38
テーブル関連のプロパティ
隣接するボーダーを1本の線にする
一般的なブラウザでテーブルを表示させると、テーブル全体のボーダーの他に各セルのボーダーがそれそれ独立したボーダーとして個別に表示される
「border-collapse プロパティ」を使用すると、それぞれの隣接するボーダーをまとめて1本の線にして表示させることができる
border-collapse に指定できる値
・collapse
テーブル内の隣接するボーダーは全てまとめて1本にして表示させる
・separate
テーブル全体のボーダーと各セルのボーダーをそれぞれ独立したものとして別々に表示させる
例
HTML
<table border="1" id="sample1">
<caption>collapse</caption>
<tr><th>セル1</th><th>セル2</th><th>セル3</th></tr>
<tr><td>セル4</td><td>セル5</td><td>セル6</td></tr>
<tr><td>セル7</td><td>セル8</td><td>セル9</td></tr>
</table>
<table border="1" id="sample2">
<caption>separate</caption>
<tr><th>セル1</th><th>セル2</th><th>セル3</th></tr>
<tr><td>セル4</td><td>セル5</td><td>セル6</td></tr>
<tr><td>セル7</td><td>セル8</td><td>セル9</td></tr>
</table>
CSS
table {
float: left;
border: 5px solid #999;
}
th, td {
padding: 0.2em;
border: 3px solid #ccc;
}
table#sample1 {
border-collapse;
}
table#sample2 {
border-collapse: separate;
margin-left: 8px;
}
キャプションをテーブルの下に表示させる
「caption-side プロパティ」を使用すると、通常はテーブルの上に表示されるキャプションを、テーブルの下に表示させることができる
caption-side に指定できる値
・top
キャプションをテーブルの上に表示させる
・bottom
キャプションをテーブルの下に表示させる
例
HTML
<table border="1">
<caption>キャプション</caption>
<tr><th>セル1</th><th>セル2</th><th>セル3</th></tr>
<tr><td>セル4</td><td>セル5</td><td>セル6</td></tr>
<tr><td>セル7</td><td>セル8</td><td>セル9</td></tr>
</table>
CSS
caption {
caption-side: bottom;
}