テーブルフォーマット-CSSチュートリアル-php.cn

テーブルフォーマット

Christopher Nolan

リリース： 2025-02-26 11:06:17

オリジナル

120 人が閲覧しました

HTMLテーブル：複雑さとスタイルの詳細な理解

この記事では、HTMLテーブルの複雑さとCSSスタイルの適用について詳しく説明しています。 HTMLテーブルには、タイトル、行グループ、列グループなどの要素が含まれており、レンダリング順序はテーブル、列グループ、列、行グループ、行グループ、セルです。 HTMLテーブルモデルは動作に集中しており、セル構造の行内に含まれています。

Table Formatting テーブルフォーマットオブジェクト

CSSは、テーブルスタイルを制御するための10個のテーブル関連

属性値を提供します。これらの値は他の要素にも適用できますが、匿名のテーブル関連要素を正しくレンダリングするには生成する必要がある場合があります。 display

テーブルとその列の幅は、固定テーブルレイアウトアルゴリズムと自動テーブルレイアウトアルゴリズムの2つのアルゴリズムによって決定されます。前者はテーブルセルの含有量の影響を受けませんが、後者はテーブル内のすべてのセルをチェックする必要があります。これは、大きなテーブルに非常に時間がかかる場合があります。

CSS2は、内部テーブルオブジェクトの境界線をレンダリングする2つのモデルを定義します。分離された境界モデルでは、セルとテーブルのみが境界線を持つことができますが、崩壊の境界モデルは、行、列グループ、柱、列グループ、およびテーブルの境界線を複雑な方法で重複させることができます。

Table Formatting 別々のボーダーレンダリング

折り畳まれたボーダーレンダリング

Table Formatting

列と列グループ要素のプロパティ

属性値

または

：境界属性（崩壊した境界モデルのみ）を持つ要素に適用できる少数のプロパティのみを適用できます。および可視性属性値display（その他の可視性値は無視されます）。 table-column table-column-groupcollapseテーブル幅アルゴリズム

他のブロックレベルのボックスとは異なり、幅がに設定されたテーブルとゼロの水平マージンは、含まれるブロックを埋めません。テーブルサイズは、そのコンテンツによって決定されます。

および

を使用してautoを設定して、テーブルを水平に中央に配置できます。 margin-left margin-rightテーブル列の幅を決定するための2つのアルゴリズムがあります。固定テーブルレイアウトアルゴリズムとauto属性で指定された自動テーブルレイアウトアルゴリズム（それぞれ値は

および

です。初期値はtable-layout）です。テーブルの幅がfixedとして指定されている場合、通常、自動テーブルレイアウトアルゴリズムが使用されます。ブロックレベルのテーブル（autoに設定autoに設定）の場合、ユーザーエージェントは固定テーブルレイアウトアルゴリズムを使用する必要はありませんが、使用する必要はありません。 auto display固定テーブルレイアウトアルゴリズムでは、列とテーブルの幅はテーブルセルの内容の影響を受けません。各列の幅は次のように決定されます。

の列オブジェクトの幅は、列の幅に設定されていません。 auto widthの幅が
残りの列は、残りの水平スペースを均等に割り当てます（境界線またはセル間隔を差し引いて）。 auto
テーブル幅は、テーブル幅の属性値と列幅の合計（境界線またはセルの間隔）の大きい値です。テーブルが列よりも広い場合、追加スペースが列に割り当てられます。

セルを省略しないでください！

最初の行セルは列幅を決定するために使用されるため、固定テーブルレイアウトアルゴリズムを使用する場合、最初の行からセルを省略する必要はありません。この場合の動作は、CSS2.1仕様では定義されていません。自動テーブルレイアウトアルゴリズムには、通常、複数のトラバーサルが必要です。 CSS2.1仕様は、列幅を決定するためのアルゴリズムを提案していますが、ユーザーエージェントはそれを使用する必要はありません。アルゴリズムは、テーブル全体のすべてのセルをチェックし、各セルをレンダリングするのに必要な最小幅と最大幅を計算します。これらの値は、各列の幅を決定するために使用され、テーブル自体の幅を決定する場合があります。

各セルをチェックする必要があるため、自動テーブルレイアウトアルゴリズムは、多数の行や列を備えたテーブルで非常に時間がかかる場合があります。

テーブル高さアルゴリズム

テーブルの高さ属性の値がではなく、指定された高さが行の高さ（プラス境界線またはセル間隔）と異なる場合、動作は未定義です。行、行のグループ、およびセルの高さ属性の割合値は定義されていません。各セルのプロパティは、それが行内でどのように整列するかを決定します。

、

、auto、vertical-align値のみが許可されています。その他の値については、baselineが使用されます。 top bottommiddleテーブルオブジェクトの境界baseline

CSS2の内部テーブルオブジェクトの境界線をレンダリングする2つのモデルがあります。分離境界モデルと崩壊境界モデルです。 属性を使用して、その値を（初期値）または

に設定して、優先モデルを選択できます。

border-collapse分離された境界モデルでは、セル（およびテーブル自体）のみが境界線、列、列グループを持つことができます。境界線は、separate属性によって指定された垂直距離と水平距離で区切られたセルの周りに描かれています。セルの境界の間のスペースでは、行、行のグループ、列、列グループの背景が見えません。テーブルの背景のみがセル間隔に表示されます。 collapse

プロパティがborder-spacingに設定されている場合、セルは分離されておらず、その境界（および列、行のグループ、列、列グループ、およびテーブル自体の境界線）がかなり複雑になります。方法（またはオーバーラップ）。

崩壊した境界モデルを使用すると、

border-collapseおよびcollapseプロパティは無視されます。

border-spacing（以下はFAQパートです。スペースの制限のため、タイトルのみがここに保持されます。完全なコンテンツについては、元のテキストを参照してください）empty-cells