border-collapse/セル間表示方法

border-collapseプロパティを使うと表(テーブル)のセル間の表示方法を指定出来ます。

説明

 表(テーブル)はデフォルトでは二重線になります。これはセル間に間があるためです。border-collapseを使うとセル間を詰めて一重線に出来ます。

border-collapse説明

構文

 border-collapseプロパティの構文は以下の通りです。

border-collapse: 表示方法;

 表示方法はseparateがデフォルトでセル間に間隔が空き、罫線が二重線で表示されます。

 collapseを指定するとセル間の間隔がなくなり、罫線が一重線で表示されます。

利用例

 border-collapseの利用例です。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

table {
border-collapse: collapse;
}

<table border=1>
<tr>
<th>題1</th>
<th>題2</th>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
<tr>
<td>データ3</td>
<td>データ4</td>
</tr>
</table>

題1 題2
データ1 データ2
データ3 データ4

 罫線が一重線で表示されています。

 同じ表でデフォルトのseparateの場合は以下のように表示されます。

題1 題2
データ1 データ2
データ3 データ4

 罫線が二重線で表示されます。

関連ページ

・ホームページ作成「表の挿入

 表の表示方法だけでなく、罫線の表示、罫線を1重線にする方法、罫線の太さと色を変える方法、幅の指定、センタリング、の背景と文字の色を変える方法、セルの結合等について説明しています。

・ホームページ作成「スタイルシートの定義方法

 外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る

  • このエントリーをはてなブックマークに追加

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)