ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSS設定テーブルのプロパティは何ですか?

CSS設定テーブルのプロパティは何ですか?

青灯夜游
青灯夜游オリジナル
2021-05-27 16:52:125106ブラウズ

css はテーブルの属性を設定します: 1. border-collapse 属性、テーブルの境界を折りたたむ; 2. padding 属性; 3. border-spacing 属性; 4. caption-side 属性; 5. empty-cells 属性; 6 、テーブル レイアウト属性。

CSS設定テーブルのプロパティは何ですか?

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

##CSS テーブル:

#border-spacing分割セルの境界線を設定する距離。 caption-side##表示単位、行、列を設定するアルゴリズム。 (1) 機能: 表の枠線を 1 つの枠線に結合するか、標準 HTML のように個別に表示するかを設定します;

##プロパティ

##説明

境界線の折りたたみ

##表の枠線を 1 つの枠線に結合するかどうかを設定します。

##表タイトルの位置を設定する。

##空のセル

空白セルに表示するかどうかを設定します。空のセルのテーブル。

table-layout

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

(2) 補足ナレッジポイント:表には二重線の枠線が付いています。これは、table、th、td 要素に独立した境界線があるためです。

(3) 可能な値:

##Value

## 境界線を継承することを指定します。親要素 -collapse 属性の値。

(4) ブラウザのサポート: すべての主要なブラウザは、border-collapse 属性をサポートします。

Ps: !DOCTYPE を指定する必要があります。指定しないと、境界線の折りたたみによって予期しない結果が生じる可能性があります。

#2. テーブルの内側のマージン: パディング属性

#関数: コンテンツとコンテンツを制御します。テーブルの境界線の距離については、td 要素と th 要素の padding 属性を設定してください;

#3. 境界線の分離: border-spacing 属性

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

(2) 可能な値:

説明

##別途

#デフォルト値。国境は分離されます。 border-spacing プロパティと empty-cells プロパティは無視されません。

collapse

##可能であれば、境界線は次のようにマージされます。単一の境界線。 border-spacing プロパティと empty-cells プロパティは無視されます。

#inherit

パラメータを定義すると、水平方向と垂直方向の間隔が定義されます。 (1) 機能:テーブルの位置を設定title、このプロパティは、テーブル フレームに対するテーブル タイトルの配置を指定します。表のタイトルは、表の前(または後)のブロックレベル要素であるかのように表示されます。

##Value ## ###################説明する############################ ## length length

隣接するセルの境界線間の距離を指定します。 px、cm などの単位を使用します。負の値は許可されません。

length

2 つの length パラメータが定義されている場合、最初のパラメータは水平方向の間隔を設定し、2 番目のパラメータは垂直方向の間隔を設定します。

##inherit

## 境界線を親から継承することを指定しますelement -spacing 属性の値。

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

4. テーブルタイトル:キャプション側属性

(2) 可能な値:

##Value

説明

##トップ

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

bottom

## テーブル内のテーブル タイトルを下に配置します。

##inherit

## キャプションを親要素 -side 属性の値。

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

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

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

(2) 可能な値:

#show#inherit

##Value

説明

##隠し

#空のセルの周囲に境界線を描画しないでください。

##空のセルの周囲に境界線を描きます。デフォルト。

## 空を継承することを指定します。親要素 -cells 属性の値。

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

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

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

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

固定テーブル レイアウト: 固定

#利点: ブラウザーがより速くテーブルをレイアウトできるようになります (固定テーブル レイアウトでは、水平レイアウトはテーブルの幅、列の幅、テーブルの境界線の幅、およびセルの間隔にのみ依存し、セルの間隔には依存しません)。表の幅、列の幅、表の境界線の幅、およびセルの間隔に関連します。セルの内容は無関係です。固定の表レイアウトを使用することにより、ユーザー エージェントは最初の行を受け取った後に表を表示できます。);

#欠点: 柔軟性があまりありません。

,,,,,,,,,,,,,,,、自動テーブル レイアウトでは、列の幅は、行のない列セルの最も幅の広いコンテンツによって設定されます。 Break.); #欠点: 自動アルゴリズムは遅いです。これは、最終的なレイアウトを決定する前にテーブルのすべてのコンテンツにアクセスする必要があるためです。

(3) 可能な値:

##Value

inherit(学習ビデオ共有: css ビデオ チュートリアル )

説明

##自動 ###############デフォルト。列の幅はセルの内容によって設定されます。

修正

##列の幅はテーブルの幅によって決まります列幅幅の設定。

## テーブルを親から継承することを指定しますelement - レイアウト属性の値。

以上がCSS設定テーブルのプロパティは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。