CSS テーブルのプロパティ_html/css_WEB-ITnose

CSS テーブル:

Property	Description
border-collapse	表の枠線を 1 つの枠線に結合するかどうかを設定します。
border-spacing	セルの境界線を区切る距離を設定します。
caption-side	表タイトルの位置を設定します。
empty-cells	表内の空のセルを表示するかどうかを設定します。
table-layout	セル、行、列を表示するためのアルゴリズムを設定します。

1. テーブルの境界線を折りたたむ: border-collapse 属性

(1) 機能: テーブルの境界線を 1 つの境界線に結合するか、標準 HTML のように個別に表示するかを設定します。 ） 補足知識：表には二重線の枠線が付いています。これは、table、th、td 要素に独立した境界線があるためです。

(3) 可能な値:

分離デフォルト値。国境は分離されます。 border-spacing プロパティと empty-cells プロパティは無視されません。可能であれば、境界線は 1 つの境界線に結合されます。 border-spacing プロパティと empty-cells プロパティは無視されます。 inherit border-collapse 属性の値を親要素から継承することを指定します。 (4) ブラウザのサポート: すべての主要なブラウザは、border-collapse 属性をサポートします。 !DOCTYPE を指定する必要があります。指定しない場合、border-collapse によって予期しない結果が生じる可能性があります。 2. テーブルの内側のマージン: パディング属性

Value	Description
追記:

#機能: td 要素と th 要素のパディング属性を設定してください。 Separation: border-spacing 属性

(1) 役割: この属性は、分離境界モデルのセル境界間の距離を指定します。このプロパティは、border-collapse が分離に設定されていない限り無視されます。このプロパティはテーブルにのみ適用されますが、テーブル内のすべての要素に継承されます。

(2) 可能な値:

値

説明

length 長さ 2 つの長さパラメータが定義されている場合、最初のパラメータは水平方向の間隔を設定し、2 番目のパラメータは垂直方向の間隔を設定します。 inherit (1) 機能：表タイトルの位置を設定する 表枠に対する表タイトルの配置位置を指定します。表のタイトルは、表の前（または後）のブロックレベル要素であるかのように表示されます。

隣接するセルの境界線間の距離を指定します。 px、cm などの単位を使用します。負の値は許可されません。 長さパラメータを定義すると、水平方向と垂直方向の間隔が定義されます。
border-spacing 属性の値を親要素から継承することを指定します。	(3) ブラウザの互換性: IE を除くすべての主要なブラウザは、border-spacing 属性をサポートしています。 Internet Explorer 8 (以降) では、!DOCTYPE が指定されている場合、border-spacing プロパティがサポートされます。 4. 表タイトル：キャプション側属性
(2) 可能な値:	Value

Description

top 表のタイトルを表の下に配置します。 inherit キャプション側属性の値を親要素から継承することを指定します。

デフォルト値。表のタイトルを表の上に配置します。

bottom

(3) ブラウザの互換性: IE を除くすべての主要なブラウザは、caption-side 属性をサポートします。 Internet Explorer 8 (以降) では、!DOCTYPE が指定されている場合、caption-side 属性がサポートされます。

5. 空のセルの処理: empty-cells 属性

(1) 機能: この属性は、内容を含まない表のセルをどのように表現するかを定義します。表示される場合、セルの境界線と背景が描画されます。このプロパティは、border-collapse が分離に設定されていない限り無視されます。

(2) 可能な値:

Value	Description
Hide	空のセルの周りに境界線を引かないでください。
show	空のセルの周囲に境界線を描きます。デフォルト。
inherit	empty-cells 属性の値を親要素から継承することを指定します。

(3) ブラウザの互換性: IE を除くすべてのブラウザは空のセル属性をサポートします。 Internet Explorer 8 (以降) では、!DOCTYPE が指定されている場合、empty-cells 属性がサポートされます。

6. テーブル レイアウト アルゴリズム: table-layout 属性

(1) 機能: テーブルのセル、行、列のアルゴリズム ルールを表示するこの属性は、テーブル レイアウトを完成させるために使用されるレイアウト アルゴリズムを指定します。

(2) 2 つのアルゴリズム:

固定テーブルレイアウト:固定テーブル レイアウト セルの内容に関係なく、テーブルの幅、列の幅、テーブルの境界線の幅、セルの間隔 固定テーブル レイアウトを使用することで、ユーザー エージェントは次のことが可能になります。最初の行を受け取った後にテーブルを表示します); #欠点: いいえ、柔軟性が高すぎます。

自動テーブル レイアウト

自動:

決定済み );

#欠点: 最終的なレイアウトを決定する前にテーブルのすべてのコンテンツにアクセスする必要があるため、処理が遅くなります。

(3) 可能な値:

Value

デフォルト。列の幅はセルの内容によって設定されます。 列幅はテーブル幅と列幅によって設定されます。 table-layout 属性の値を親要素から継承することを指定します。

Description	automatic
	fixed
	inherit