あなたを救うために、私のテーブルは何を使えばいいでしょうか (Haiyu Blog)

テーブルはかつて、Web ページの開発、つまりレイアウトにおいて非常に重要な役割を果たしていました。Web 2.0 でも、そのレイアウトは今でも見ることができます。しかし、テクノロジーが進歩するにつれて、Div + Css の組み合わせはついに旧式のレイアウトへの扉を開き、新しいレイアウトの波をもたらしました。その後、新旧の恨みが続き、テーブルについて意見があるかどうかに関わらず、多くの人がテーブルを批判し始めました。肥大化したコード、意味のないタグ、複雑な記述方法などです。テーブルは元々レイアウト用ではなく、データを表示するために作成されたものであることを覚えておいてください。テーブルレイアウトを放棄することは、テーブル自体を放棄することを意味しません。私のテーブルを救うために何が使えるでしょうか?

テーブルとは何ですか?

テーブルは、データのキャリアである HTML テーブルです。

以下は比較的標準的なテーブル コードの記述方法です。

必ず記載しなければならないtable-layout:fixed属性

table-layout: auto (デフォルト) | fixed。

パラメータ:

auto: デフォルトの自動アルゴリズム。レイアウトは各セルの内容に基づいて決定されます。各セルが読み取られて計算されるまでテーブルは表示されないため、非常に時間がかかります。
修正: レイアウトアルゴリズムを修正しました。このアルゴリズムでは、水平レイアウトはテーブルの幅、テーブルの境界線の幅、セルの間隔、列の幅のみに基づいており、テーブルの内容とは関係ありません。 解析速度が速い。

固定レイアウトモデルの動作手順:
1. width 属性値が auto でないすべての列要素は、幅の値に応じて列の幅を設定します。
2. 表の最初の行の列のセルの幅。この列の幅は、セルの幅に応じて設定します。セルが複数の列にまたがる場合、幅は列間で均等に分割されます。
3. 上記の 2 つの手順を実行した後、列の幅がまだ自動である場合は、列の幅が可能な限り均等になるようにサイズが自動的に決定されます。この場合、テーブルの幅はテーブル幅の値または列幅の合計（いずれか大きい方）に設定されます。表の幅が列幅の合計より大きい場合は、その差を列数で割り、その幅を各列に追加します。
このアプローチは、すべての列の幅がテーブルの最初の行によって定義されるため、高速です。最初の行以降のすべての行のセルのサイズは、最初の行で定義された列幅に従って設定されます。後続の行のセルの列幅は変更されません。つまり、これらのセルに指定された幅の値はすべて無視されます。

一般的に、複雑な表の HTML を作成する場合、最初の行の各列の幅をどのように調整しても、列の幅が予期せず変更されることがあります (たとえば、間にスペースのない長い英語の文字列がある場合、長いテキストが強制的に折り返されて表が壊れないように、この列の幅を制限したいのですが、結果として適切な幅に調整できないことがよくあります)。このようなときは、どうしようもないので、table-layout:fixed を使用できます。

表の改行の問題

テーブルを使用してデータを表示する場合、特に最も頻繁に使用されるテーブル ヘッダーで、特定の段落のテキストを次の行に折り返さずに表示するのは面倒な場合があります。実際、頭痛の種となっているのは改行ではなく、その背後にあるブラウザの互換性であり、これが改行をさらに困難にしているのです。ここでは、さまざまな状況で改行を管理する方法について詳しく説明した記事「強制改行と強制非改行の戦略」を参考にしてください。

一般的に、表の改行に推奨される方法は、まず表に table-layout:fixed を設定することです。基本的に、このプロパティを設定すると、基本的な改行の問題が解決され、表内の td と th が他の td と th の幅を占有する状況が、表内のコンテンツの量によって発生しなくなります。この時点でまだ強制改行の問題がある場合は、この td 内に div レイヤーを追加し、2 つの CSS メソッド word-wrap:break-word; word-break:break-all; を使用して改行の問題を解決します。

よく使われるテーブルタグとあまり知られていないテーブルタグ

thead、tfoot、tbody

これら 3 つのタグは、いわゆる xhtml の産物であり、主にテーブル内の行をグループ化する機能を提供します。テーブルを作成するときは、ヘッダー行、データを含むいくつかの行、および下部の合計行が必要になるでしょう。この分割により、ブラウザはテーブル ヘッダーとフッターとは独立してテーブル本体のスクロールをサポートできるようになります。長いフォームを印刷する場合、テーブル データを含む各ページにテーブル ヘッダーとフッターが印刷されることがあります。個人的には、その主な用途は非常に長いテーブルの表示を最適化することだと考えます。

theadタグはHTMLのテーブルヘッダーを表します
テーブルのヘッダー thead は別のスタイルを使用して定義でき、印刷時にヘッダーをページの上部に印刷できます。

theadタグはHTMLフッターを表します
表フッター tfoot では、別のスタイルを使用してフッター (脚注または表の注釈) を定義することができ、印刷時にフッターをページの下部に印刷できます。

tbodyタグはHTMLの表本体を表す
ブラウザが表を表示する場合、通常は表全体を表示する前に表を完全にダウンロードします。そのため、表が非常に長い場合は、tbody を使用して表をセクションごとに表示することができます。

注意: thead、tfoot、tbody 要素を使用する場合は、すべてを使用する必要があります。これらは thead、tfoot、tbody の順序で表示されるため、ブラウザはすべてのデータを受信する前にヘッダーとフッターをレンダリングできます。これらのタグはテーブル要素内で使用する必要があり、thead 内には tr タグが含まれている必要があります。したがって、テーブルを記述するより標準的な方法は次のとおりです。

col と colgroup

これら 2 つのタグも xhtml の産物です。強力ですが、互換性は低いです。

col タグは、テーブル内の 1 つ以上の列の属性値を定義します。

colgroup タグは、書式設定の目的でテーブル内の列をグループ化するために使用されます。

主な機能はセルの幅を制御することであり、各セルを個別に定義する手間が省けます。以前は、各列の幅を指定するために最初の行の th または td に幅を定義することが多かったのですが、col は幅だけでなく他の属性も同時に定義できます。たとえば、col を使用して、複数の列の幅の合計と列の背景色を制御できます。しかし、理想は完全ですが、現実は骨格です。前述のように、機能が充実しても互換性が高くなるわけではありません。既存のテストによると、col と colgroup が役割を果たし、互換性を確保できるアプリケーションは、width と background の 2 つだけです。幅については、列幅を確保するために最初の行の幅を設定する従来の方法を使用することを好みます。背景については、実際にはテーブルの広い領域で異なる背景を使用することはほとんどありません。したがって、個人的には、可能であれば使用しないようにするべきだと考えています。

テーブルを使用する場所

個人的には、データが非常に密集していてシリアル化されているコンテナでは、テーブルを使用するのが正しいと思います。最も一般的な例は、一般的なショッピング注文決済ページです。このページには、商品名、単価、購入数量、小計、送料などの注文の詳細がリストされ、最後に最終注文金額が下部に表示されます。ここでは、表は水を得た魚のようであり、データキャリアの魔法の効果を実現しています。

上記は、共通テーブルの知識ポイントの確認と、よく使用されるいくつかの場所の分析と要約です。この記事を読んで、正しい姿勢でテーブルを見て、使っていただければ幸いです。この記事が、あなたのテーブルを少しでも救ってくれることを願っています。ありがとう。