CSS属性テーブル(Table)_html/css_WEB-ITnose

CSS 属性テーブル (Table)

HTML では行をグループ化するためのテーブルの 3 つの要素、thead (テーブルヘッダー)、tbody (テーブル本体)、tfoot (脚注) が定義されています。

HTML4 では、ドキュメント構造内の tfoot は、HTML5 でこの制限が削除される前に出現する必要があります。

ソースコードにグループ化要素が記述されていない場合、ブラウザは自動的に tbody を作成するため、セレクタテーブル > tr は途中に tbody があるため常に無効になります。

テーブル本体の各行が td 要素で始まる場合、これらの行が行タイトルになります。

colgroup およびcol

タグはテーブル要素内でのみ使用できます。

タグは table 要素または Colgroup 要素でのみ使用できます。

col は、colgroup の外部でも使用できます。

colgroup 内のcol は、colgroup スタイルをオーバーライドします。

table-layout: auto | fixed

auto: デフォルトの自動アルゴリズム。レイアウトは各セルの内容に基づいて決まります。つまり、セルの幅を 100 ピクセルに定義しても、結果は 100 ピクセルにならない可能性があります。各セルが読み取られて計算されるまでテーブルは表示されませんが、これは非常に時間がかかります。

fixed: レイアウトアルゴリズムを修正しました。このアルゴリズムでは、水平レイアウトは表の幅、表の境界線の幅、セル間隔、および列の幅のみに基づいており、表の内容とは関係ありません。つまり、コンテンツが切り取られる可能性があります。

border-collapse: 分離 | 崩壊

分離: 境界線は独立しています。

collapse: 隣接するエッジが結合されます。

境界線の間隔と空のセルは、テーブルの境界線が独立している場合 (つまり、border-collapse プロパティが分離に等しい場合) にのみ機能します。

border-spacing: {1,2}

長さの値を使用して、行とセルの境界線の水平方向と垂直方向の間隔を定義します。負の値は許可されません。

両方の長さの値が指定された場合、最初の値は水平方向の間隔に作用し、2 番目の値は垂直方向の間隔に作用します。

長さの値が 1 つだけ指定されている場合、この値は水平方向と垂直方向の間隔に適用されます。

caption-side: top |bottom

top: 表の上のキャプションを指定します。

bottom: 表の下にキャプションを指定します。

empty-cells: Hide | show

セルに内容がない場合に表のセルの境界線を表示するかどうかを設定または取得します。

hide: 表のセルにコンテンツがない場合に、セルの境界線を非表示にするように指定します。

show: 表のセルにコンテンツがない場合にセルの境界線を表示するように指定します。