HTML テーブルタグと関連する改行の問題の詳細な分析

テーブルとは何ですか?
テーブルは、データのキャリアである HTML テーブルです。
以下は比較的標準的なテーブル コードの記述方法です。

単純な HTML テーブルは、table 要素と 1 つ以上の tr、th、または td 要素で構成されます。 tr 要素は表の行を定義し、 th 要素はヘッダー セルを定義し、 td 要素は表のセルを定義します。 border 属性は表の境界線の幅を指定し、cellpadding はセルの端とその内容の間のスペースを指定し、cellspacing はセル間のスペースを指定します。通常、ブラウザの違いを回避するために、これら 3 つの属性は手動で 0 に設定します。 width 属性はテーブルの幅を指定します。テーブルの幅は内部要素の幅に応じて変化するためです。一般的に、テーブルの幅は外部コンテナと同じであることが望まれるため、コンテナを埋めるためにデフォルトの幅は 100% に設定されることが多いです。

必ず記載しなければならないtable-layout:fixed属性
table-layout: auto (デフォルト) | fixed。
パラメータ:
auto: デフォルトの自動アルゴリズム。レイアウトは各セルの内容に基づいて決定されます。各セルが読み取られて計算されるまでテーブルは表示されないため、非常に時間がかかります。
修正: レイアウトアルゴリズムを修正しました。このアルゴリズムでは、水平レイアウトはテーブルの幅、テーブルの境界線の幅、セルの間隔、列の幅のみに基づいており、テーブルの内容とは関係ありません。 解析速度が速い。
固定レイアウトモデルの動作手順:
1. width 属性値が auto でないすべての列要素は、幅の値に応じて列の幅を設定します。
2. 表の最初の行の列のセルの幅。この列の幅は、セルの幅に応じて設定します。セルが複数の列にまたがる場合、幅は列間で均等に分割されます。
3. 上記の 2 つの手順を実行した後、列の幅がまだ自動である場合は、列の幅が可能な限り均等になるようにサイズが自動的に決定されます。この場合、テーブルの幅はテーブル幅の値または列幅の合計（いずれか大きい方）に設定されます。表の幅が列幅の合計より大きい場合は、その差を列数で割り、その幅を各列に追加します。
このアプローチは、すべての列の幅がテーブルの最初の行によって定義されるため、高速です。最初の行以降のすべての行のセルのサイズは、最初の行で定義された列幅に従って設定されます。後続の行のセルの列幅は変更されません。つまり、これらのセルに指定された幅の値はすべて無視されます。
一般的に、複雑な表の HTML を作成する場合、最初の行の各列の幅をどのように調整しても、列の幅が予期せず変更されることがあります (たとえば、間にスペースのない長い英語の文字列がある場合、長いテキストが強制的に折り返されて表が壊れないように、この列の幅を制限したいのですが、結果として適切な幅に調整できないことがよくあります)。このようなときは、どうしようもないので、table-layout:fixed を使用できます。

よく使われるテーブルタグとあまり知られていないテーブルタグ
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 つだけです。幅については、列幅を確保するために最初の行の幅を設定する従来の方法を使用することを好みます。背景については、実際にはテーブルの広い領域で異なる背景を使用することはほとんどありません。したがって、個人的には、可能であれば使用しないようにするべきだと考えています。

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

表の改行の問題
テーブルを使用してデータを表示する場合、特に最も頻繁に使用されるテーブル ヘッダーで、特定の段落のテキストを次の行に折り返さずに表示するのは面倒な場合があります。実際、頭痛の種となっているのは改行ではなく、その背後にあるブラウザの互換性であり、これが改行をさらに困難にしているのです。
一般的に、表の改行に推奨される方法は、まず表に table-layout:fixed を設定することです。基本的に、このプロパティを設定すると、基本的な改行の問題が解決され、表内の td と th が他の td と th の幅を占有する状況が、表内のコンテンツの量によって発生しなくなります。この時点でまだ強制改行の問題がある場合は、この td 内に div レイヤーを追加し、2 つの CSS メソッド word-wrap:break-word; word-break:break-all; を使用して改行の問題を解決します。

強制改行と強制改行なしの戦略
強制改行と強制改行なしの問題はかつて私を悩ませました。改行の問題に遭遇するたびに、それは苦い思い出の始まりでした。今、私はついに自分の失敗から学び、この長年の頑固な問題を一挙に解決しました。
強制改行と強制改行なしに使用される属性 通常、改行を制御するには、word-wrap、word-break、white-space の 3 つの CSS 属性を使用します。これら 3 つの属性は、テキストの改行専用に作成されたものであると言えます。まず、これら 3 つの属性が何に使用されるのかを知る必要があります。

ワードラップ構文
単語折り返し: 通常 (デフォルト) | 単語区切り
すべてのブラウザはパラメータを認識できます:
normal: コンテンツが指定されたコンテナの境界を超えて押し出されることを許可します。
break-word: コンテンツは境界内で折り返されます。必要に応じて word-break がトリガーされます (注: word-break と break-word は 2 つの異なるものであり、1 つは属性で、もう 1 つはパラメーターであることを明確に区別してください)。
例:
word-wrap は、「単語ごとに行を折り返す」かどうかを制御し、指定されたコンテナーの境界を超えたときに現在の行を折り返すかどうかを設定または取得します。中国語と英語の文章でも問題ありません。しかし、長い英語の文字列には機能しません。
例：
「congratulation」という単語は、長い英単語の文字列に属します。word-wrap:break-word は、単語全体を 1 つのまとまりとして扱います。行末の幅が単語全体を表示するのに十分でない場合は、単語を切り捨てるのではなく、単語全体を次の行に自動的に配置します。これが、長いテキスト文字列では機能しない理由です。 word-wrap:normal はデフォルトの設定であり、英語の単語は分割されません。
結論は：
動作範囲はdivなどの標準ブロックレベル要素のみです。thやtdなどのテーブル要素は認識されますが、効果はありません（tdとthにword-wrapを追加すればIEでは効果を発揮しますが、完全な互換性とメモリのしやすさの観点から、前の結論が優先されます）。

単語区切り構文
word-break: normal (デフォルト) | break-all | keep-all
パラメータ:
normal: アジア言語と非アジア言語のテキストルールに従い、単語内での改行を許可します。
break-all: この動作は、アジア言語の場合の通常の動作と同じです。また、アジア以外の言語のテキスト行内で任意の単語の区切りを許可します。この値は、アジア以外の言語のテキストを含むアジア言語のテキストに適しています。
keep-all: アジア以外の言語の場合は通常と同じです。中国語、韓国語、日本語の場合、単語の区切りは許可されません。少量のアジア言語のテキストを含む非アジア言語のテキストに適しています。
例:
word-break:break-all は単語を分割することを意味します。単語が境界に達すると、次の文字が自動的に次の行に移動します。これは主に、長い英語の文字列の問題を解決します (長いテキスト文字列では word-wrap:break-word が機能しないという欠陥を補うだけです)。
例：
上記の長い英語の文字列に属する単語 congratulation に引き続き、word-break:break-all によって単語が切り捨てられ、行の末尾は conra (congratulation の前半) のようになり、次の行は conguatulation (conguatulation) の後半になります。
word-break:keep-all は、中国語、日本語、韓国語の keep-all 単語を指します。つまり、この時点でのみ使用し、ワードラップを使用しない場合、中国語の文字は折り返されません。 （英語の文章は普通です。）
結論は：
動作範囲はdivなどの標準ブロックレベル要素に限定されます。thやtdなどのテーブル要素は認識されますが、効果はありません（テストの結果、word-break:break-allはChromeでは有効ですが、完全な互換性とメモリのしやすさの観点から、以前の結論が優先されるはずです）。 Firefox と Opera は word-break を認識できず、Firefox で th と td で word-break を使用した場合の影響は言うまでもありません。

空白構文
空白: 通常 (デフォルト) | pre | nowrap
パラメータ:
通常: デフォルト。空白はブラウザでは無視されます。
pre: 空白はブラウザによって保持されます。これは HTML の pre タグと同様に動作します。
nowrap: テキストは折り返されず、br タグに遭遇するまで同じ行にテキストが継続されます。
例:
pre 属性の場合、HTML 内の連続する複数のスペースが結合されますが、それらが結合されないようにするために (最も一般的なケースは、コード テキストのインデントを示すことです)、インデントと改行を制御するために追加のスタイルやタグを追加する必要なく、スペース内のスペースが保持されます。 pre タグの原理は同じで、デフォルトでは内部に white-space:pre が含まれます。
nowrap 属性については、これが強制的に改行させない核となります。一般的に、強制的に改行させないには、この属性を使用します。 Firefox の div と td、IE の div では問題はありません。唯一の欠点は、IE の td に問題があることです。td が幅を指定しない場合、nowrap は依然として有効です。td に幅があり、テキストに句読点やスペースがない場合 (中国語の長い文字列など)、nowrap は有効ではなくなります。この問題を解決するには、 word-break:keep-all; を追加します。

要約強制改行:
div などの標準のブロック レベル要素で強制的に改行する必要がある場合、最も一般的な解決策は word-wrap:break-word; word-break:break-all; です。この方法の欠点は、行末が長い英語の単語の文字列である場合に、単語が不自然に分割されることです (FF は word-break を認識しないため、単語は分割されません)。個人的には、div に長い URL を入れる場合、この解決策は非常に良い選択だと思います (注: FF は単語の区切りを認識しないため、URL の単語が各行の末尾できちんと区切られるという保証はありませんが、これも無力な選択です)。 URL などの分割可能な長い英語の文字列ではなく、英語の文章を配置する場合は、word-wrap:break-word; を使用できます。ネット上で見かける word-wrap:break-word; overflow:hidden; 方式については、IE や FF に対応しているとのことですが、個人的にテストしてみたところ、特に効果はないようです。

要約では改行は強制されません:
強制非折り返しの問題は、比較的簡単に分析できます。上で説明したように、white-space:nowrap を使用すると、Firefox の div と td、および IE の div では問題はありません。唯一の欠点は、IE の td に問題があることです。td が幅を指定しない場合、nowrap は依然として有効です。td に幅があり、テキストに句読点やスペースがない場合 (中国語の長い文字列など)、nowrap は有効ではなくなります。この問題を解決するには、 word-break:keep-all; を追加します。要約すると、より安全な方法は、テキストと td の間に別の div を配置し、nowrap を使用して改行を強制しないことです。テキストが多すぎてコンテナーから溢れてしまう可能性が高いので、すべてのブラウザーと互換性を持たせるために、コンテナーからの溢れを防ぐために overflow:hidden を追加する必要があることに注意してください。
いろいろまとめてみると、ブラウザ内のいくつかの属性の互換性のバランスの問題であることがわかりました。今のところ、すべてのブラウザと互換性のある完璧なソリューションは存在しないようです。私たちにできるのは、各ブラウザの表示を可能な限り一貫性のあるものにすることだけです。それでもすべてのブラウザと互換性を持たせる必要があると感じる場合は、最終的な解決策は JS を使用することです。今後の記事では、この要件を最も低い JS コストで満たす方法を検討しますが、これはこの記事の範囲外です。