- table-layout: テーブルのレイアウト アルゴリズムを設定します. 固定テーブル レイアウト アルゴリズムと自動テーブル レイアウト アルゴリズムの 2 つのレイアウト アルゴリズムがあります。
- border-collapse: テーブル内のセルの境界線を結合するか、標準の HTML スタイルに従って分離するかを設定します。
- border-spacing: 表の境界線が分離されている場合に、隣接する 2 つの境界線の間の水平および垂直方向の間隔を設定します。
- caption-side: テーブルに対するテーブル タイトルの位置を設定します。
- empty-cells: 表のセルに内容がない場合、セルの枠線を表示するかどうかを設定します。
1. table-layout
table-layout 属性は、テーブル レイアウトで使用されるレイアウト アルゴリズムを設定するために使用されます. 属性のオプション値は次のとおりです:
価値 | 説明 |
---|---|
automatic | デフォルト値のカスタム テーブル レイアウトは、テーブルの各列の幅がセルの内容に依存することを意味します。 |
fixed | 固定テーブル レイアウト。つまり、テーブルの幅は、列の幅、セルの境界線、セル間の間隔などの要因によって決定されます。 |
inherit | 親要素から table-layout 属性の値を継承する |
1) 固定テーブル レイアウト
固定テーブル レイアウトにより、ブラウザーはテーブルをより迅速にレイアウトできます。固定テーブル レイアウトでは、テーブルの水平幅は、列幅、テーブル ボーダー幅、セル間隔などの要因のみに依存し、セル内のコンテンツとは関係ありません。つまり、テーブルの幅を超えるテーブル内のコンテンツは無視される場合があります。
2) 自動テーブルレイアウト
自動テーブル レイアウトでは、列の幅はセルのコンテンツ (改行のない最も広いコンテンツ) によって異なります。つまり、セルの幅が 100px であるが、セルのコンテンツが占める幅の方が大きい場合です。これにより、セルのコンテンツがセルを拡張します。この機能のため、このアルゴリズムは遅くなる場合があります。
2.boder-collapse
テーブル内の隣接する境界線をマージするかどうかを設定するには、border-collapse 属性を使用します。この属性のオプションの値は次のとおりです。
価値 | 説明 |
---|---|
seprate | デフォルトでは、隣接する 2 つの境界線が分離されています。これを使用しても、border-spacing および empty-cells プロパティは無視されません。 |
collapse | 隣接する 2 つの境界線は 1 つの境界線にマージされます。これを使用すると、border-spacing および empty-cells プロパティが無視されます。 |
inherit | 親要素から border-collapse プロパティの値を継承する |
[例] セルの境界線を結合または分割するには、border-collapse プロパティを使用します。
<!DOCTYPE html>
<html>
<head>
<style>
table {
float: left;
}
.table_one {
border-collapse: separate;
}
.table_two {
margin-left: 20px;
border-collapse: collapse;
}
</style>
</head>
<body>
<table class="table_one" border="1">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>15</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>11</td>
</tr>
</table>
<table class="table_two" border="1px">
<tr>
<th>番号</th>
<th>名前</th>
<th>年齢</th>
</tr>
<tr>
<td>1</td>
<td>山田太郎</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>鈴木次郎</td>
<td>18</td>
</tr>
</table>
</body>
</html>
実行結果は次の図のとおりです。

デフォルトでは表のボーダーは非表示になっているため、上記の例では<table>
タグの border 属性を使用してボーダーを表示する必要があります. また、CSS の border 属性を使用してボーダーを設定することもできます.以下に示すように、テーブルの場合:
table、th、td {
boder:1px solid black;
3.border-spacing
border-spacing 属性は、隣接するセルの境界間の距離を設定でき (border-collapse 属性が別の場合にのみ有効)、その効果は<table>
タグの cellspacing 属性と同等です (つまり、 border-spacing:0;
cellspacing="0"
で同等)。 border-spacing プロパティの構文は次のとおりです。
ボーダー間隔: 長さの長さ;
パラメータの長さは、隣接するセルの境界線間の距離を示す値と単位で構成され、オプションの値は次のとおりです。
価値 | 説明 |
---|---|
length | 隣接する境界線間の距離を値プラス単位 (2px など) で設定します。負の値は使用できません。長さパラメータが 1 つだけ定義されている場合、この値は水平方向と垂直方向の間隔に同時に作用します。2 つの長さパラメータが同時に定義されている場合、最初の長さパラメータは隣接する境界線の水平方向の間隔を示し、 2 番目の長さパラメーターは、隣接する境界線の垂直方向の間隔を示します |
inherit | 親要素から border-spacing プロパティの値を継承する |
[例] border-spacing プロパティを使用して、テーブル内の隣接する境界線間の間隔を設定します。
<!DOCTYPE html>
<html>
<head>
<style>
table {
float: left;
}
.table_one {
border-spacing: 15px 10px;
}
.table_two {
margin-left: 20px;
border-spacing: 20px;
}
</style>
</head>
<body>
<table class="table_one" border="1">
<tr>
<th>番号</th>
<th>名前</th>
<th>年齢</th>
</tr>
<tr>
<td>1</td>
<td>山田</td>
<td>15</td>
</tr>
<tr>
<td>2</td>
<td>鈴木</td>
<td>11</td>
</tr>
</table>
<table class="table_two" border="1px">
<tr>
<th>番号</th>
<th>名前</th>
<th>年齢</th>
</tr>
<tr>
<td>1</td>
<td>山田</td>
<td>15</td>
</tr>
<tr>
<td>2</td>
<td>鈴木</td>
<td>11</td>
</tr>
</table>
</body>
</html>
実行結果は次の図のとおりです。

4. caption-side
caption-side 属性はテーブル タイトルの位置を設定でき、属性のオプション値は次のとおりです。
価値 | 説明 |
---|---|
top | デフォルトでは、テーブル ヘッダーをテーブルのすぐ上に配置します |
bottom | テーブル ヘッダーをテーブルのすぐ下に配置する |
inherit | 親要素からキャプション側属性の値を継承する |
【例】表タイトルの位置をキャプションサイド属性で設定する場合:
<!DOCTYPE html>
<html>
<head>
<style>
table {
float: left;
}
.table_one {
caption-side: top;
}
.table_two {
margin-left: 20px;
caption-side: bottom;
}
</style>
</head>
<body>
<table class="table_one" border="1">
<caption>表のタイトル</caption>
<tr>
<th>番号</th>
<th>名前</th>
<th>年齢</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>15</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>11</td>
</tr>
</table>
<table class="table_two" border="1px">
<caption>表のタイトル</caption>
<tr>
<th>番号</th>
<th>名前</th>
<th>年齢</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>15</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>11</td>
</tr>
</table>
</body>
</html>
実行結果は次の図のとおりです。


empty-cells 属性は、セルにコンテンツがない場合に空のセルを表示するかどうかを設定するために使用され (border-collapse 属性が別の場合にのみ有効)、属性のオプション値は次のとおりです。 :
価値 | 説明 |
---|---|
hide | 空のセルの境界線を非表示にする |
show | デフォルトでは、空のセルの周囲に境界線が表示されます |
inherit | 親要素から empty-cells 属性の値を継承する |
【例】 empty-cells属性で空のセルを非表示にするかどうかを設定する。
<!DOCTYPE html>
<html>
<head>
<style>
table {
float: left;
}
.table_one {
empty-cells: hide;
}
.table_two {
margin-left: 20px;
empty-cells: show;
}
</style>
</head>
<body>
<table class="table_one" border="1">
<tr>
<th>番号</th>
<th>名前</th>
<th>年齢</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>11</td>
</tr>
</table>
<table class="table_two" border="1px">
<tr>
<th>番号</th>
<th>名前</th>
<th>年齢</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>11</td>
</tr>
</table>
</body>
</html>
実行結果は次の図のとおりです。
