スポンサーサイト

セルの枠線の表示形式を指定する

書式

border-collapse: 値

セルの枠線の表示形式を指定します。値は
collapse
1本の線で表示されます。
separate
セルがそれぞれ離れたように表示されます。

スタイルシート部分
.tblsample {
width: 50%;
border-collapse: collapse;
}
.tblsample caption {
border: 2px solid #000000;
background-color: #999999;
color: #ffffff
}
.tblsample th, .tblsample td {
border: 2px solid #000000;
}
.tblsample2 {
width: 50%;
border-collapse: separate;
}
.tblsample2 caption {
border: 2px solid #000000;
background-color: #999999;
color: #ffffff
}
.tblsample2 th, .tblsample2 td {
border: 2px solid #000000;
}

widthに50%を指定し、記事全体幅を100%としてその半分の領域のテーブルを宣言しました。

記事部分
<table class="tblsample">
<caption>collapse</caption>
<tr><th>見出し1</th><th>見出し2</th></tr>
<tr><td>セル1</td><td>セル2</td></tr>
</table>
<table class="tblsample">
<caption>separate</caption>
<tr><th>見出し1</th><th>見出し2</th></tr>
<tr><td>セル1</td><td>セル2</td></tr>
</table>

表示
collapse
見出し1見出し2
セル1セル2

separate
見出し1見出し2
セル1セル2

記事を飾ろう!トップ
テーブル基礎
自動改行モードでのズレ
テーブルにスタイルを宣言する
テーブルの全体幅を指定する
枠線の表示形式を指定する
セルの背景色を指定する
枠線のスタイルを指定する

次のキーワードを検索:[スタイルシート]

前後の記事

最近の記事

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。