見出し画像

継続は力なり＃３８

うちやましょうたろう/成り上がり

テーブル関連のプロパティ


隣接するボーダーを１本の線にする

一般的なブラウザでテーブルを表示させると、テーブル全体のボーダーの他に各セルのボーダーがそれそれ独立したボーダーとして個別に表示される
「border-collapse プロパティ」を使用すると、それぞれの隣接するボーダーをまとめて１本の線にして表示させることができる

border-collapse　に指定できる値

・collapse
テーブル内の隣接するボーダーは全てまとめて１本にして表示させる

・separate
テーブル全体のボーダーと各セルのボーダーをそれぞれ独立したものとして別々に表示させる

例

HTML

<table border="1" id="sample1">
<caption>collapse</caption>
<tr><th>セル１</th><th>セル２</th><th>セル３</th></tr>
<tr><td>セル４</td><td>セル５</td><td>セル６</td></tr>
<tr><td>セル７</td><td>セル８</td><td>セル９</td></tr>
</table>
 
<table border="1" id="sample2">
<caption>separate</caption>
<tr><th>セル１</th><th>セル２</th><th>セル３</th></tr>
<tr><td>セル４</td><td>セル５</td><td>セル６</td></tr>
<tr><td>セル７</td><td>セル８</td><td>セル９</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>セル１</th><th>セル２</th><th>セル３</th></tr>
<tr><td>セル４</td><td>セル５</td><td>セル６</td></tr>
<tr><td>セル７</td><td>セル８</td><td>セル９</td></tr>
</table>

CSS

caption {
   caption-side: bottom;
}