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

テーブルとは:

テーブルはデータの伝達者であるHTMLテーブルでもあります。
以下はテーブル コードを記述する比較的標準的な方法です:

<table border="0" cellspacing="0" cellpadding="0" width="100%">
  <tr>
    <th>Month</th>
    <th>Date</th>
  </tr>
  <tr>
    <td>AUG</td>
    <td>18</td>
  </tr>
</table>

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

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

一般的だが馴染みのないテーブル タグ
thead、tfoot、tbody
これら 3 つのタグは、いわゆる xhtml の製品であり、主にテーブル内の行をグループ化することができます。テーブルを作成するときは、おそらくヘッダー行、データを含むいくつかの行、そして最後に合計行を配置する必要があるでしょう。この分割により、ブラウザはテーブルのヘッダーやフッターとは独立してテーブル本体のスクロールをサポートできるようになります。長い表を印刷する場合、表データを含む各ページに表のヘッダーとフッターを印刷できます。個人的には、その主な目的は非常に長いテーブルの表示の最適化に適していると思います。
thead タグは、テーブルの HTML ヘッダー
head を表し、別のスタイルを使用してヘッダーを定義でき、印刷時にヘッダーをページの上部に印刷できます。
thead タグは表の HTML フッター
フッター tfoot を表します。フッター (脚注または表注) は別のスタイルを使用して定義でき、印刷時にフッターを改ページの下部に印刷できます。 。
tbodyタグはHTMLのテーブル本体を表します
ブラウザがテーブルを表示するとき、通常はテーブルを完全にダウンロードしてから完全に表示します。そのため、テーブルが非常に長い場合は、tbodyを使用してセグメントに表示できます。
注: thead、tfoot、tbody 要素を使用する場合は、それらをすべて使用する必要があります。これらは thead、tfoot、tbody の順序で表示されるため、ブラウザーはすべてのデータを受信する前にヘッダーとフッターをレンダリングできます。これらのタグは table 要素内で使用する必要があり、thead の中に tr タグが含まれている必要があります。したがって、テーブルを記述するより標準的な方法は、次のコードです:

<table border="0" cellspacing="0" cellpadding="0" width="100%">
  <thead>
    <tr>
      <th>Month</th>
      <th>Date</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Month Lists</th>
      <th>Date Lists</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>AUG</td>
      <td>18</td>
    </tr>
  </tbody>
</table>

個人的には、これは役に立たず、無駄で、捨てるのは残念だと思います。小規模なプロジェクトではセマンティクスを追加できますが、同じテーブルに複数の異なるヘッダーが表示されるというジレンマに遭遇し、将来の開発が制限されるため、正式なプロジェクトではスケーラビリティの観点からこれらのタグを慎重に使用します。

colとcolgroup
これら2つのタグもxhtmlの産物であり、強力な機能を備えていますが、互換性は非常に悪いです。
col タグは、テーブル内の 1 つ以上の列の属性値を定義します。
colgroup タグは、テーブル内の列をグループ化してフォーマットするために使用されます。
それらの機能は主にセルの幅を制御することです。これにより、各セルを個別に定義する手間が省けます。これまでは、最初の行の th または td で幅を定義して各列の幅を指定することがよくありました。幅を定義するだけでなく、他の属性も同時に定義できます。たとえば、col を使用して複数の列の幅の合計を制御したり、この列の背景色を制御したりできます。しかし、理想は充実しており、現実はバックボーンです。既存のテストによれば、機能が大きいほど互換性が高くなります。col およびcolgroup との互換性を確保できるアプリケーションは 2 つだけです。幅と背景。幅については、個人的には従来の方法を使用し、最初の行に幅を設定し、列幅を確保することを好みます。背景に関しては、実際には、テーブルの広い領域で異なる背景が使用されることはほとんどありません。したがって、私は個人的には、できるだけ使用しないでくださいと考えています。

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

テーブルのトラブルとその他の問題: 行の折り返し
テーブルを使用してデータを表示するとき、つまり、特定のテキストを行の折り返しなしで表示するとき、特に最も使用される場所であるヘッダー th で頭痛が起こることがあります。実際、あなたが抱えている頭痛の種は行の折り返しではありませんが、その背後にあるブラウザの互換性により、行の折り返しがはるかに困難になっています。
一般的に言えば、テーブル内で行を折り返す推奨される方法は次のとおりです: 最初に table-layout:fixed をテーブルに設定します。基本的に、この属性を設定した後は、テーブル内で td, th を使用しなくても、基本的な行の折り返しの問題は解決できます。内部の各コンテンツの量が他のtdとthの幅を奪い合う状況が発生します。この時点でも強制改行の問題が解決しない場合は、td 内に p のレイヤーを追加し、2 つの CSS メソッド word-wrap:break-word; を使用して問題を解決します。改行問題。

強制行ラッピングと強制非行ラッピングのガイド
強制行ラッピングと強制非行ラッピングの問題は、私がかつて行ラッピングの問題に遭遇するたびに悩まされていましたが、それは今では辛い思い出の始まりでした。ついに痛みから学び、この長年の頑固な問題を解決するために懸命に取り組みました。
改行を強制する場合と改行を強制しない場合に使用する属性
通常、改行を制御するには 3 つの CSS 属性を使用します。これら 3 つの属性は、テキストの改行のために特別に作成されたと言えます。まず最初に、これら 3 つの属性が何に使用されるかを知る必要があります:

ワードラップ構文
ワードラップ: 通常 (デフォルト) ブレークワード
すべてのブラウザーで認識できます
パラメーター:
通常:コンテンツは、指定されたコンテナの境界を超えて拡張されます。
ブレイクワード: コンテンツは境界内で中断されます。必要に応じてワードブレークがトリガーされます (注: ワードブレークとブレークワードは別のものであり、一方は属性であり、もう一方はパラメータであることを明確に区別してください)。
説明:
word-wrap は、「単語ごとに改行」するかどうかを制御し、現在の行が指定されたコンテナーの境界を超えたときに改行するかどうかを設定または取得します。中国語も問題ありませんし、英語の文章も問題ありません。しかし、英語の長い文字列の場合は機能しません。
例:
congratulation は、英語の単語の長い文字列です。word-wrap:break-word は、単語全体を表示するのに十分な幅がない場合、単語全体を自動的に挿入します。単語を切り詰めるのではなく、次の行に単語を追加します。そのため、長いテキスト文字列には機能しません。 word-wrap:normal がデフォルトであり、英単語は分割されません。
結論:
アクションの範囲は、p などの標準ブロックレベル要素のみです。th や td などのテーブル要素は認識されますが、効果はありません (td の場合、th プラス幅のワードラップは IE で有効ですが、From完全な互換性と便利なメモリの観点からは、以前の結論が優先されます)。

word-break 構文
word-break:normal (デフォルト) | Break-all | keep-all
パラメータ:
normal: アジア言語および非アジア言語のテキスト規則に従って単語内の改行を許可します。
画期的: 動作はアジア言語の通常の動作と同じです。非アジア言語のテキスト行の任意の単語内での区切りも許可されます。この値は、非アジアのテキストを含むアジアのテキストに適しています。
keep-all: アジア以外の言語の場合は通常と同じです。中国語、韓国語、日本語の場合、単語の区切りは許可されません。少量のアジア語のテキストが含まれる非アジア語のテキストに適しています。
説明:
word-break:break-all はブレークワードです。単語が境界に達すると、次の文字が自動的に次の行に進みます。これは主に英語の長い文字列の問題を解決します (word-wrap:break-word が長いテキスト文字列に対して機能しないという上記の欠点を補うだけです)。
例:
英語の単語の長い文字列に属する上記の単語 congratulation を続けると、word-break:break-all によって単語が切り捨てられ、行の末尾が conra (フロントエンド部分) のようなものになります。 of congratulation)、次の行がバックエンド部分の tulation (conguatulation ) となります。
word-break:keep-all、中国語、日本語、韓国語の連続した単語を指します。つまり、ワードラップなしで今回のみを使用すると、中国語はラップされません。 (英語の文章は正常です。)
結論:
アクションの範囲は、p などの標準ブロックレベル要素のみです。th や td などのテーブル要素は認識されますが、効果はありません (word-break:break がテストされています)。 -all は Chrome では有効ですが、完全な互換性とメモリの利便性の観点から、前の結論が優先されます)。 Firefox と Opera はワードブレークを認識できません。ましてや、Firefox で th や td でワードブレークを使用した場合の効果は認識できません。

空白の構文
空白: 通常 (デフォルト) | nowrap
パラメータ:
通常: デフォルト。空白はブラウザによって無視されます。
pre: 空白スペースはブラウザによって保存されます。 HTML の pre タグのように動作します。
nowrap: テキストは折り返されず、br タグが見つかるまで同じ行に続きます。
説明:
pre 属性の場合、HTML 内の複数の連続する空白文字がマージされ、その後、それらのマージを防ぐために (最も一般的な機会はコード テキストのインデントを示すことです)、空白文字は引き続きマージされます。インデントと折り返しを制御するために追加のスタイルとタグを追加します。 pre タグの原理は同じです。デフォルトでは空白: pre があります。
nowrap 属性の場合、これは改行なしを強制するための核心であり、通常、この属性は改行なしを強制するために使用されます。 Firefoxのpやtd、IEのpでも問題ありません。唯一の欠点は、IE の td に問題があることです。td に幅が指定されておらず、テキストに句読点やスペースが含まれていない場合でも、nowrap は有効です (長い文字列など)。中国語のテキスト)、nowrap は効率的に機能しなくなります。解決策は、word-break:keep-all; を追加してこの問題を解決することです。

強制改行の概要:
p などの標準ブロックレベル要素で強制的に改行する必要がある場合、最も一般的な解決策は word-wrap:break-word; word-break:break-all; です。この方法の欠点 これにより、行末がたまたま長い英単語の文字列だった場合、その単語がばらばらになってしまうという恥ずかしいパターンが発生します (FF は単語の区切りを認識しませんが、単語は分割されません)。一語離れて）。個人的には、URL に似たアドレスの長い文字列を p に入れる場合、このソリューションを使用するのは非常に良い選択だと思います (注: FF はワードブレイクを認識しないため、URL の単語が改行されるという保証はありません)各行の終わりできちんと区切られていますが、これも仕方のない選択です)。 URL などの壊れる可能性のある長い英語の文字列ではなく、英語の文章を配置する場合は、word-wrap:break-word; を使用します。ネットで見た word-wrap:break-word; overflow:hidden; については、IE と FF に対応しているとのことですが、個人的に試してみたところ、特に効果はないようです。

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

HTML テーブル タグと関連する改行問題のさらに詳細な分析については、PHP 中国語 Web サイトに注目してください。