HTMLのテーブルタグと関連する改行の問題を徹底分析

テーブルとは
tableもHtmlのテーブルで、データのキャリアです。
以下は、より標準的なテーブルコードの書き方です。

border 属性は表の境界の幅を、cellpadding はセルの端とその内容の間のマージンを、celspacing はセル間のマージンを指定します。width属性は表の幅を指定しますが、表の幅は内部要素の幅と一緒で変更回数をサポートするため、一般的には外部コンテナの幅と同じにしたいので、デフォルトでコンテナを埋めるために100%の幅を設定することが多いです。

/{br 必ず記載する table-layout:fixed プロパティについて
table-layout: auto (デフォルト) |fixed.
パラメータです。
auto: デフォルトの自動アルゴリズム。各セルの内容に基づいてレイアウトされます。各セルを読み込んで計算した後でないと表は表示されないので、遅くなります。
を修正しました。固定レイアウトアルゴリズム。このアルゴリズムでは、水平方向のレイアウトはテーブルの幅、テーブルのボーダーの幅、セルの間隔、列の幅のみに基づき、テーブルの内容には依存しない。高速パース。
固定レイアウトモデルでの作業手順。
1. width 属性の値が auto でないすべての column 要素は、width の値に基づいて列の幅を設定します。
2. その列に位置するテーブルの最初の行のセル幅は、そのセルの幅を基準にこの列の幅を設定します。このセルが複数の列にまたがっている場合、幅はそれらの列に等しく分配されます。
3. 上記2ステップの後、列の幅がまだAUTOの場合、その幅ができるだけ等しくなるように自動的にサイズ調整されます。このとき、テーブルの幅は、テーブルの幅の値の合計とカラムの幅（どちらか大きい方）に設定されます。テーブルの度合いが列幅の合計よりも大きい場合は、その差を列数で割って、この結果の幅を各列に追加する。
この方法は、すべての列幅がテーブルの最初の行によって定義されるため、高速に処理されます。最初の行以降のすべての行のセルは、最初の行で定義された列幅に従ってサイズ調整されます。これらの後の行のセルは、列幅を変更しない。つまり、これらのセルに指定された幅の値は無視される。
一般に、複雑なhtmlテーブルを行う場合、時にはあなたは、最初の行の各列の幅を調整する方法に関係なく、列の幅はまだ予想外の変更が発生することがわかります（そのような英語の長い文字列、および列の幅を制限したい場合の途中でスペースなし、そのテキストが長すぎて改行を強制し、テーブルが壊れないように、しばしば結果は、適切な幅を調整方法です）。この絶望的な状況の時に、table-layout:fixedを使うことができます。

よくある、さびしいテーブルタグの数々
thead, tfoot, andtbody
この3つのタグは、xhtmlと呼ばれるものの産物で、本来はテーブルの行をグループ化する機能を提供するものです。テーブルを作成する際、ヘッダーの行、データのある行、そして一番下の合計の行を用意したい場合があります。このように分割することで、ブラウザは表のタイトルやフッターとは別に、表本体のスクロールをサポートすることができるようになります。長い表を印刷する場合、表ヘッダとフッタは、表データを含む各ページに印刷することができる。個人的には、主な用途は非常に長いテーブルの表示最適化に適用されると考えています。
thead タグは HTML のテーブルヘッダーを表します。
フォームの見出しであるtheadを別のスタイルで定義し、印刷時にページネーションの上部にヘッダーを印刷することができます。
adタグはHTMLフッターを示します。
表のフッターtfootは、別のスタイル（脚注や表注）を使って定義し、印刷時にページネーションの下部に印刷することができる。
tbody タグは HTML のテーブル本体を表します
ブラウザが表を表示するときは、通常、表を完全にダウンロードしてから全部表示するので、表が長いときは、tbodyを使って分割して表示させることができます。
注意：thead、tfoot、tbody要素を使用する場合は、すべて使用する必要があります。ブラウザがすべてのデータを受け取る前にヘッダーとフッターを表示できるように、thead、tfoot、tbodyの順で表示されます。これらのタグはtable要素の中で使用しなければならず、trタグはheadの中で使用しなければなりません。ですから、より標準的な表の書き方は、次のようなコードになります。

個人的には、こいつはかなり鶏ガラで、取っても無駄だが、捨てるには惜しいと思う。小規模なプロジェクトであればセマンティクスを付加することも可能ですが、同じテーブルに複数の異なるテーブルヘッダが表示されてしまい、今後の開発が制限されるというジレンマに陥ったことがあるので、正式なプロジェクトでこのタグを使うのはスケーラビリティの観点からも慎重に行いたいと思います。

colとcolgroup
この2つのタグもxhtmlの産物で、強力で、不思議と相容れない。
colタグは、テーブルの1つまたは複数の列の属性値を定義します。
colgroup タグは、表中の列をグループ化し、書式設定できるようにするために使用されます。
その役割は、主にセルの幅を制御するために、個別に各セルを定義する手間を省くように、過去に我々は、各列の幅を指定する幅の定義にThまたはtdの最初の行にしばしばあり、コルは、幅を定義することはできませんも他のプロパティ、たとえば、いくつかの列の合計幅を制御するには、コルを介して定義できますも、列の背景色を制御することができます。幅については、私は従来の方法を使用することを好む、最初の行は、列の幅を確保するため、幅を設定します。幅については、私は従来の方法を使用することを好む、最初の行は、列の幅を確保するために幅を設定します。背景については、一般的に実際のテーブル、別の背景の大きな領域の使用は稀です。したがって、私は個人的に思う：できるだけ多くを使用しないように。
/{br

テーブルの使用箇所
個人的には、データが非常に密で直列化されているコンテナでは、テーブルがいいと思います。最も一般的な例は、私たちがよく利用するショッピング注文のチェックアウトページで、商品名、単価、購入数量、小計金額、送料など、注文の詳細が一覧表示されます。最後に、最終的な注文金額の結果が一番下に表示されます。

/{p 表 トラブルシューティング 改行について
tableを使ってデータを改行せずに表示する場合、特にテーブルヘッダで頭を悩ませることがあります。実は、困っているのは改行ではなく、その背後にあるブラウザの互換性なのです。
一般的に、テーブル内の行を変更する推奨される方法は、table-layout:fixedを設定することです、基本的にこのプロパティを設定した後、状況の他のtd,th幅内のコンテンツの量のためにテーブル内のtd,thが発生せずに、基本的に改行の問題を解決することができます。この時点では、まだ強制改行の問題がある場合は、このtdの内側にdivの層を追加し、その後、word-wrap:break-word; word-break:break-all; この二つのCSSメソッドは、改行の問題を解決することができます。

強制的に改行させる方法と強制的に改行させない方法
一時期、強制改行と強制非改行の問題に悩まされたことがあり、改行問題に遭遇するたびに辛い思い出の始まりだったのですが、今はようやく懲りて、この長年の頑固な問題を一挙に解決することができました。
/{br 強制改行や強制改行に使用するプロパティについて
改行を制御するために使用するCSSプロパティは、word-wrap; word-break; white-spaceの3つで、これらは改行専用に作成されたものです。まず、この3つのプロパティが何をするのか、正確に知っておく必要があります。

/
ワードラップ構文
ワードラップ：ノーマル（デフォルト）｜ブレークワード
すべてのブラウザで認識される
パラメータ
normalを指定します。指定されたコンテナ境界の上にコンテンツを置くことを許可する。
break-word: 境界内でコンテンツが改行されます。必要に応じてword-breakをトリガーする（注：word-breakとbreak-wordは異なるもので、一方はプロパティ、他方はパラメータであることを区別してください）。
説明
word-wrap は、"break for word" をするかどうか、現在の行が指定したコンテナの境界を越えたときに改行するかどうかを設定または取得するための制御です。中国語はもちろん、英語の文でも問題はありません。しかし、長い英語の文字列では、うまくいきません。
例
congratulationという単語は長い英語の文字列に属します。word-wrap:break-wordは単語全体を表示します。行末が単語全体を表示できるほど広くない場合、単語を切り捨てることなく自動的に次の行に単語全体を入れます。これが長い文字列が機能しない説明です。word-wrap:normalはデフォルトで、英語の単語は分割されないようになっています。
結論
アクションの範囲は、このような標準的なブロックレベルの要素、Th、tdなどのテーブル要素の認識が、効果（もしtdは、IEのThプラス幅ワードラップは、効果を再生することができますが、メモリ視点の利便性の完全な互換性によると、前の結論に勝つ）唯一のDivのです。

/{br ワードブレーク構文
ワードブレーク：通常（デフォルト）｜ブレークオール｜キープオール
パラメータ
normal を指定します。アジア言語および非アジア言語のテキスト規則に従って、単語内の改行を許可します。
break-all：アジア言語では通常の動作と同じです。また、アジア言語以外のテキスト行の単語内改行も許可します。この値は、アジア以外のテキストを一部含むアジアのテキストに適しています。
keep-all: アジア以外の言語では通常と同じです。中国語、韓国語、日本語の場合、単語の区切りは許されません。少量のアジア系テキストを含む非アジア系テキストに適しています。
説明
word-break:break-all, は単語を分割しています。単語が境界線に達すると、次の文字が自動的に次の行に進みます。主に英語の長い文字列の問題を解決します（上記の word-wrap:break-word が長い文字列に対して機能しないのを補うだけです）。
例
上のcongratulationという単語の続きで、これは長い英語の文字列の一部ですが、word-break:break-allで単語を切り捨て、行末はconra（congratulationの前の部分）、次の行はtulation（congatulation）の後端といった具合になるのです。
word-break:keep-all, は、中国語、日本語、韓国語の定型語です。つまり、この時だけ、word-wrapがなければ、中国語は改行されない。(英語の文は普通です)。
結論
動作範囲は、このような標準的なブロックレベル要素、th,tdなどのテーブル要素をdivのみですが、認識は効果がありません（テストされたクロームのワードブレーク：ブレークオールは有効ですが、メモリの視点や前の結論の利便性の完全な互換性によると優先されます）。Firefoxは、Operaは、Firefoxの下でTh,tdで単語ブレークを使用しての効果は言うまでもありません、単語ブレークを認識されていません。

ホワイトスペース構文
white-space: normal(default) | pre | nowrap
パラメータ
normal を指定します。デフォルト。空白はブラウザに無視されます。
pre: 空白文字はブラウザによって保存されます。HTMLのpreタグと似たような動作をする。
nowrapを使用します。テキストは改行されず、br タグにぶつかるまで同じ行を進みます。
説明
pre属性については、実際には、複数の連続した空白文字をマージして、その空白文字がマージされないようにするためのHTMLです（コードテキストのインデントを示すために最もよく使われます）そのインデントや改行を制御するために、私たちが追加のスタイルやタグを加える必要はありません。 preタグは同じ原理でデフォルトで内部の空白文字：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に対応していると言われていますが、個人的に検証した結果、特に効果はないようです。

強制改行以外をまとめると
強制改行の問題は、Firefox の div と td では white-space:nowrap を使って上述したように比較的簡単に解析できますし、IEの div では問題ありません。ただ、IEのtdには問題があり、tdが幅を指定していない場合はnowrapが有効で、tdに幅があり、テキストに句読点、スペースがない場合（長い漢文など）、nowrapが無効になってしまいます。解決策としては、word-break:keep-all;を追加すれば、この問題を解決することができます。この問題を解決するより安全な方法は、テキストとtdにword-break:keep-all;を追加することです。