CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのborder-collapseでテーブルの境界線を折りたたむ方法

CSSのborder-collapseプロパティは、<table>要素の境界線を隣接セルと共有するか、それとも各セルごとに独立して表示するかを指定するためのプロパティです。指定できる値は「separate」と「collapse」の2種類があります。

  • separate：各セルの境界線が独立して表示されます（デフォルト値）。隣接する境界線の間隔はborder-spacingで調整できます。
  • collapse：隣接するセル同士の境界線が結合され、1本の線として表示されます。

構文

border-collapseプロパティの基本構文は以下のとおりです。

セレクタ {    border-collapse: /*値*/;}

それでは、実際のコード例で動作を確認していきましょう。

サンプルコード①：separateとcollapseの比較

<!DOCTYPE html>
<html>
<head>
<style>
#cdemo {    border-collapse: collapse;
}
#sdemo {    border-collapse: separate;
}
table {    display: inline-table;
    margin: 30px;
}
th, td {    border: 3px ridge orange;
}
td {    border-color: red;
}
caption {    box-shadow: 0px -5px 4px 3px green;
}
</style>
</head>
<body>
<h2>従業員記録</h2>
<table id="sdemo">
<caption> 従業員情報（Separate Border） </caption>
<tr>
<th>氏名</th>
<th>部署</th>
</tr>
<tr>
<td>Tim</td>
<td>Operations</td>
</tr>
<tr>
<td>Nathan</td>
<td>Finance</td>
</tr>
<tr>
<td>John </td>
<td>Marketing</td>
</tr>
</table>
<table id="cdemo">
<caption> 従業員情報（Collapse Border） </caption>
<tr>
<th>氏名</th>
<th>部署</th>
</tr>
<tr>
<td>Tim</td>
<td>Operations</td>
</tr>
<tr>
<td>Nathan</td>
<td>Finance</td>
</tr>
<tr>
<td>John </td>
<td>Marketing</td>
</tr>
</table>
</body>
</html>

表示結果

上記のコードを実行すると、次のような出力が得られます。

CSSのborder-collapseでテーブルの境界線を折りたたむ方法

左側の表では境界線が二重に表示されているのに対し、右側のcollapseを指定した表では隣接する境界線が1本にまとめられ、すっきりとした見た目になっていることがわかります。

サンプルコード②：empty-cellsとの組み合わせ

border-collapse: separateと併用することで、空のセルを非表示にするempty-cellsプロパティも活用できます。

<!DOCTYPE html>
<html>
<head>
<style>
table {    border-collapse: separate;
    empty-cells: hide;
    display: inline-table;
    margin: 30px;
}
table+table {    border-collapse: collapse;
    empty-cells: hide;
}
td {    border: 3px ridge lightblue;
}
caption {    box-shadow: 0px -5px 4px 3px grey;
}
</style>
</head>
<body>
<h2>デモ用テーブル</h2>
<table>
<caption>Demo caption</caption>
<tr>
<td>demo</td>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
<td></td>
</tr>
</table>
<table>
<caption>Demo caption</caption>
<tr>
<td>demo</td>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
<td></td>
</tr>
</table>
</body>
</html>

表示結果

上記のコードを実行すると、次のような出力が得られます。

CSSのborder-collapseでテーブルの境界線を折りたたむ方法

まとめ

border-collapseプロパティを使いこなすことで、テーブルのデザイン性や可読性を大きく向上させることができます。一般的なWebページでは視認性の高いcollapseがよく使われますが、セル間に余白を持たせたいデザインの場合はseparateを選択しましょう。

  1. HTMLでテーブルの列を結合する方法｜colspan属性の使い方を解説

    HTMLでテーブルの列を結合（マージ）するには、<td>タグにcolspan属性を使用します。この属性を指定することで、隣接するセル同士を横方向にまとめることができます。 例えば、4行4列のテーブルがある場合でも、colspan属性を使えば、2つや3つのセルを簡単に結合できます。 例1：基本となるテーブルを作成する まずは、colspan属性を使う前の状態として、3行3列のシンプルなテーブルをHTMLで作成してみましょう。 <!DOCTYPE html> <html>    <head>     &nbs

  2. HTMLでテーブルのセルを結合する方法：colspanとrowspanの使い方

    HTMLでテーブルのセルを結合するには、colspan属性とrowspan属性を使用します。それぞれの役割は以下の通りです。rowspan属性：セルが縦方向（行）にまたがる行数を指定しますcolspan属性：セルが横方向（列）にまたがる列数を指定しますどちらの属性も<td>タグ内に記述し、値は数値で指定します。例えば、rowspan=2と指定すれば2行分、colspan=2と指定すれば2列分のセルが結合されます。例1：通常のテーブルを作成するまず、HTMLで3行×3列のシンプルなテーブルを作成してみましょう。<!DOCTYPE html> <html> &n