HTMLテーブルレイアウトの実際の使用の詳細な説明

テーブルはいつ使用されますか

これで、テーブル<table>は通常、Webページの全体的なレイアウトに使用されなくなりました。ただし、フォーム入力やデータプレゼンテーションなどの特定の特定のデザインに直面している場合、フォームが最も適切な選択肢である場合があります。

テーブルの直感的な印象は、要素が複数のセルによってきれいに配置されているということです。これはExcelに関連付けることができます。データ処理と統計におけるExcelの位置から、Webページのテーブルの重要性を理解できます。

簡単に言えば、複数の要素が行と列の概念に配置されていると直感的に感じることができれば、テーブルを使用すると、はるかに簡単になります。たとえば、caniuse.comの申請書：

テーブルの使用は簡単ですが、テーブルが各グリッドで終わることがありますが、それはあなたが望むものではないかもしれません。たとえば、一部のグリッドにラインブレークがある場合、ラインが壊れるため、テーブル全体が非常に見苦しく見えます。特にデータの表示に使用される表の場合、幅の割り当ては非常に重要なトピックです。グリッドの各列に表示される可能性のあるデータのテーブルの総幅を慎重に計算する必要がある場合があります。

これは、テーブルにレイアウトに独自の特性があり、特定の原則に従い、計算を通じて実際のレイアウトを決定するためです。次に、この記事では、実際のテーブルテストの例を使用して、テーブルが独自のレイアウトを計算する方法を調べます。

この記事は、テーブルを適用する最も一般的な方法にのみ焦点を当てており、すべてのケースをリストしているわけではありません。さまざまなブラウザには、テーブルのいくつかの概念の分析が異なりますが、レイアウト計算は基本的に一貫しています（違いがある場合、それらは個別に言及されます）。

次のテストフォームは、この方法で表示されます（コンテンツはゼロの軌跡から取得されます）：

同時に、テーブルは国境崩壊を設定します：崩壊。および国境間隔：0;。これは、テーブルを適用するための最も一般的な慣行でもあり、remormize.cssはこの部分を初期化定義として使用します。

<table>要素で定義されたCSS属性テーブルレイアウトは、レイアウト計算中にテーブルに適用されるアルゴリズムを決定します。自動と固定の2つの値があります。通常の場合、デフォルト値Autoが使用されます。

これら2つのアルゴリズムの違いは、テーブルの幅レイアウトがテーブルのデータコンテンツに関連しているかどうかです。この記事では、これら2つの値を取得する際の表のレイアウト計算の原理について説明します。

自動テーブルレイアウト-auto

自動テーブルレイアウトの特徴は、テーブルの幅レイアウトがテーブル内のすべてのデータコンテンツに関連していることです。最終的な幅レイアウトを決定してから一緒に表示する前に、すべてのテーブルの内容を取得する必要があります。

このようにして、重要なポイントは、コンテンツが関連することです。テーブルが固定幅（ここでは500px）を定義し、すべてのセルが幅を定義しない場合（CSSの幅を定義するだけ）、どうなりますか？結果を参照してください：

上記の表では、空白の部分は＆nbspで書かれています。スペース。比較の後、次のポイントを見つけることができます。

2番目と3番目の列の幅は同じです。

列1の幅とそれに続く列の幅比は2：1のようです。

境界線と内側のマージンを追加すると、すべての列の幅が合計され、テーブルで定義された幅に等しくなります。

各セルに幅が定義されていないため、幅レイアウトは特定のコンテンツデータ（テキスト情報）によって完全に決定されます。そのような結果を説明する方法は？あなたはまずそのようなロジックを直感的に推測することができます：

ステップ1：各列から最も多くのテキストコンテンツを持つテキストを選択します（テキストが行を包み込まない場合、テキストは最も広い幅を占有していることを理解してください）。

ステップ2：各列の代表者の幅を比較し、幅の比例関係に応じて境界と内側のマージンを含むテーブルの総幅を割り当てます。

上記のロジックを参照してから、前のテーブルを見ると、理由はありますか？前述の幅比は2：1であるように思われることに注意してください。内側のマージンを削除するバージョンを見てみましょう。

フロントエンドのデバッグツールを使用して上のセルの幅を調べると、このテーブルは以前とは異なり、比率は非常に2：1に近いことがわかります（はい、境界線のために小さなポイントもありますが、境界線がないと、列を区別することはできません）。

幅比例関係を分析すると、コンテンツの幅、内側のマージン、および境界線が考慮されることがわかります。これはまた、単語の数の尺度ではなく、単語が壊れない状態で単語が占める幅の尺度であることを示しています（ここでは、漢字の幅が等しいという事実に由来します）。より美しいテーブルを作るために、内側の縁を自然に使用してください:)。

幅の定義があるとどうなりますか？これは、セルの一部で定義された幅のあるテーブルです。

対応するHTMLコードは次のとおりです。