コニファのツール集：CSS　table要素のレイアウトに関連するプロパティの確認

ツール集：CSS　table要素のレイアウトに関連するプロパティの確認

table要素のレイアウトに関連するプロパティの確認です。サンプルは、CSSソースと実際のtableの表示で構成しています。

基本のtable要素

table {
  text-align: center;
  border: 1px solid #3b6;
  }
td {
  border: 1px solid #aaa;
  padding: 3px 0;
  }

（１）あい	（２）a2389ua238u
（３）かきくけ	（４）45h2y
（５）さしす	（６）97df2wfg

table-layoutプロパティ

table-layout: fixed を使用

初期値は、autoで、セルの内容によって、セルの幅が自動的に調整されます。fixedの場合は、セルの幅が固定されます。widthプロパティの指定があるセルはその値で固定、無いセルは残りの幅を均等に分割します。すべてのセルでwidthプロパティの指定が無い場合はすべて均等になります。

table {
  text-align: center;
  border: 1px solid #3b6;
  table-layout: fixed;
  }
td {
  border: 1px solid #aaa;
  padding: 3px 0;
  }

（１）あい	（２）a2389ua238u
（３）かきくけ	（４）45h2y
（５）さしす	（６）97df2wfg

border-collapseプロパティ

border-collapse: collapse を使用

枠線は1本にまとまります。

table {
  text-align: center;
  border: 1px solid #3b6;
  border-collapse: collapse;
  }
td {
  border: 1px solid #aaa;
  padding: 3px 0;
  }

（１）あい	（２）a2389ua238u
（３）かきくけ	（４）45h2y
（５）さしす	（６）97df2wfg

border-collapse: separate を使用

枠線は2本になり、間にスペースが生じます（ほぼ基本と同じ）。

table {
  text-align: center;
  border: 1px solid #3b6;
  border-collapse: separate;
  }
td {
  border: 1px solid #aaa;
  padding: 3px 0;
  }

（１）あい	（２）a2389ua238u
（３）かきくけ	（４）45h2y
（５）さしす	（６）97df2wfg

border-collapse: separate と border-spacing を使用

セル間のスペースのサイズをborder-spacingで指定します。例は横方向10px、縦方向5pxです。

table {
  text-align: center;
  border: 1px solid #3b6;
  border-collapse: separate;
  border-spacing: 10px 5px;
  }
td {
  border: 1px solid #aaa;
  padding: 3px 0;
  }

（１）あい	（２）a2389ua238u
（３）かきくけ	（４）45h2y
（５）さしす	（６）97df2wfg

empty-cells プロパティ

empty-cells: hide を使用

empty-cells: hideで、空のセルやvisibility: hiddenが指定されたセルを枠線ごと隠します。
例では、（２）にあたるセルが空、（５）のセルがvisibility: hiddenになっています。空のセルなどもすべて表示する場合は、empty-cells: showにします。

table {
  text-align: center;
  border: 1px solid #3b6;
  empty-cells: hide;
  }
td {
  border: 1px solid #aaa;
  padding: 3px 0;
  }

（１）あい
（３）かきくけ	（４）45h2y
（５）さしす	（６）97df2wfg

caption-sideプロパティ

caption-side: before を使用

キャプション表示位置を指定するcaption-sideの初期値は、beforeで、tableの開始位置の前になります。値をtopとした場合も同じになります。

table {
  text-align: center;
  border: 1px solid #3b6;
  caption-side: before; 
  }
caption {
  color:#d3c;
  }
td {
  border: 1px solid #aaa;
  padding: 3px 0;
  }

サンプルtable（キャプション）
（１）あい	（２）a2389ua238u
（３）かきくけ	（４）45h2y
（５）さしす	（６）97df2wfg

caption-side: bottom を使用

caption-sideプロパティの値をafterと指定すると、キャプション表示位置は、tableの終了位置の後ろ（下側）になります。値をbottomとした場合も同じになります。

table {
  text-align: center;
  border: 1px solid #3b6;
  caption-side: bottom; 
  }
caption {
  color:#d3c;
  }
td {
  border: 1px solid #aaa;
  padding: 3px 0;
  }

サンプルtable（キャプション）
（１）あい	（２）a2389ua238u
（３）かきくけ	（４）45h2y
（５）さしす	（６）97df2wfg

captionの左よせ、右よせ

captionの左よせ、右よせは、text-alignで指定します。例は、caption-side: bottomでtableの後ろ（下側）、caption {text-align: right}で、右側にしています。

table {
  text-align: center;
  border: 1px solid #3b6;
  caption-side: bottom; 
  }
caption {
  color:#d3c;
  text-align: right;
  }
td {
  border: 1px solid #aaa;
  padding: 3px 0;
  }

サンプルtable（キャプション）
（１）あい	（２）a2389ua238u
（３）かきくけ	（４）45h2y
（５）さしす	（６）97df2wfg

ツール集：CSS table要素のレイアウトに関連するプロパティの確認