テーブルとは:
テーブルは HTML テーブルであり、データの伝達者です。
次に、テーブル コードを記述する比較的標準的な方法を示します。
単純な HTML テーブルは、table 要素と 1 つ以上の tr、th、または td 要素で構成されます。 tr 要素はテーブルの行を定義し、th 要素はヘッダー セルを定義し、td 要素はテーブルのセルを定義します。 border 属性はテーブルの境界線の幅を指定し、cellpadding はセルの端とその内容の間のスペースを指定し、cellspacing はセル間のスペースを指定します。ブラウザの違いを避けるために、通常、これら 3 つの属性は手動で 0 に設定されます。 width 属性はテーブルの幅を指定します。テーブルの幅は内部要素の幅に応じて変化するため、一般的な状況ではテーブルを外部コンテナと同じ幅にする必要があるため、デフォルトの幅が設定されることがよくあります。コンテナを満たすには 100% にします。
テーブル レイアウト: 固定属性
テーブル レイアウト: 自動 (デフォルト) | と言わなければなりません。
パラメータ:
auto: デフォルトの自動アルゴリズム。レイアウトは各セルの内容に基づきます。各セルが読み取られて計算されるまでテーブルは表示されないため、非常に時間がかかります。
修正: レイアウトアルゴリズムを修正しました。このアルゴリズムでは、水平レイアウトは表の幅、表の境界線の幅、セル間隔、列の幅のみに基づいており、表の内容とは関係ありません。 解析速度が速いです。
固定レイアウト モデルの作業手順:
1. width 属性値が auto ではないすべての列要素は、width 値に従って列の幅を設定します。
2. 表の最初の行のこの列のセル幅を、セル幅に従って設定します。セルが複数の列にまたがる場合、幅は列全体で均等に分割されます。
3. 上記の 2 つの手順の後、列の幅が自動のままであれば、その幅が可能な限り等しくなるようにサイズが自動的に決定されます。このとき、表の幅は、表の幅の値または列幅の合計のいずれか大きい値に設定されます。テーブルの幅がその列幅の合計より大きい場合は、その差を列数で割って、その結果の幅を各列に加算します。
すべての列幅がテーブルの最初の行で定義されるため、この方法は高速です。最初の行以降のすべての行のセルのサイズは、最初の行で定義された列幅に従って設定されます。これら以降の行のセルでは列幅は変更されません。これは、これらのセルに指定された幅の値が無視されることを意味します。
一般に、複雑な表 HTML を作成する場合、最初の行の各列の幅をどのように調整しても、列の幅が予期せず変化することがあります (英語のテキストの長い文字列など)。中央にスペースがない場合、この列の幅を制限して、長いテキストが表を壊さずに強制的に折り返されるようにしたいとします。多くの場合、どのように試しても適切な幅を調整できないという結果になります)現時点では、絶望的に、 table-layout:fixed を使用できます。
一般的だが馴染みのないテーブル タグ
thead、tfoot、tbody
これら 3 つのタグは、いわゆる xhtml の製品であり、主にテーブル内の行を編集できます。グループを作ります。テーブルを作成するときは、おそらくヘッダー行、データを含むいくつかの行、そして最後に合計行を配置する必要があるでしょう。この分割により、ブラウザはテーブルのヘッダーやフッターとは独立してテーブル本体のスクロールをサポートできるようになります。長い表を印刷する場合、表データを含む各ページに表のヘッダーとフッターを印刷できます。個人的には、その主な目的は非常に長いテーブルの表示の最適化に適していると思います。
thead タグは HTML テーブル ヘッダーを表します。
テーブルのヘッド タグは、別のスタイルを使用してテーブル ヘッダーを定義でき、テーブル ヘッダーを先頭に印刷できます。印刷時のページ。
thead タグは HTML フッターを表します。
表のフッター tfoot は、別のスタイルを使用してフッター (脚注または表の注) を定義でき、印刷時に、改ページ脚の下部にあるページ。
tbody タグは HTML テーブルの本体を表します。
ブラウザはテーブルを表示するとき、通常、テーブルを完全にダウンロードしてから全体を表示します。したがって、テーブルが非常に長い場合は、次のようにすることができます。セグメントで表示するには tbody を使用します。
注: thead、tfoot、tbody 要素を使用する場合は、それらをすべて使用する必要があります。表示される順序は thead、tfoot、tbody なので、ブラウザはすべてのデータを受信する前にヘッダーとフッターをレンダリングできます。これらのタグは table 要素内で使用する必要があり、thead の中に tr タグが含まれている必要があります。したがって、テーブルを記述するより標準的な方法は、次のコードです:
個人的には、これは役に立たず、役に立たず、捨てるのは残念だと思います。小規模なプロジェクトではセマンティクスを追加できますが、同じテーブルに複数の異なるヘッダーが表示されるというジレンマに遭遇し、将来の開発が制限されるため、正式なプロジェクトではスケーラビリティの観点からこれらのタグを慎重に使用します。
col とcolgroup
も xhtml の製品であり、強力で互換性があります。
col タグは、テーブル内の 1 つ以上の列の属性値を定義します。
colgroup タグは、書式設定のためにテーブル内の列をグループ化するために使用されます。
その主な機能はセルの幅を制御することです。これにより、各セルを個別に定義する手間が省けます。これまでは、各列の幅を指定するために最初の行の th または td に幅を定義することがよくありました。また、col は幅を定義するだけでなく、他の属性も同時に定義できます。たとえば、col を使用して複数の列の幅の合計を制御したり、この列の背景色を制御したりすることもできます。しかし、理想は充実しており、現実はバックボーンです。既存のテストによれば、機能が大きいほど互換性が高くなります。col およびcolgroup との互換性を確保できるアプリケーションは 2 つだけです。幅と背景。幅については、個人的には従来の方法を使用し、最初の行に幅を設定し、列幅を確保することを好みます。背景に関しては、実際には、テーブルの広い領域で異なる背景が使用されることはほとんどありません。したがって、私は個人的には、できるだけ使用しないでくださいと考えています。
table を使用する場所
個人的には、データが非常に高密度でシリアル化されているコンテナでは、table を使用するのが正しいと思います。最も一般的な例は、一般的なショッピング注文の決済ページです。このページには、製品名、単価、購入数量、金額の小計、送料などの注文の詳細がリストされます。最後に、最終的な注文金額の結果が表示されます。底面、表 ここでは水を得た魚のようなものと言え、データキャリアの魔法の効果を実現しています。
テーブルの複雑な行の折り返し
テーブルにデータを表示するとき、つまり、特定のテキストを折り返しなしで表示するとき、特にテーブルのヘッダーで使用される場合に頭痛が起こることがあります。場所。実際、あなたが抱えている頭痛の種は行の折り返しではありませんが、その背後にあるブラウザの互換性により、行の折り返しがはるかに困難になっています。
一般的に、テーブル内で行を折り返す推奨される方法は次のとおりです: 最初に table-layout:fixed をテーブルに設定します。基本的に、この属性を設定した後は、テーブル内で td を使用しなくても基本的な行の折り返しの問題を解決できます。内部の各コンテンツの量により、他のtdとthの幅を奪い合う状況が発生します。この時点でも強制改行の問題が解決しない場合は、td 内に div のレイヤーを追加し、2 つの CSS メソッド word-wrap:break-word; を使用して問題を解決します。改行問題。
強制行折り返しと強制非行折り返しに関するガイドライン
強制行折り返しと強制非行折り返しの問題は、行折り返しの問題に遭遇するたびに私を悩ませていました。辛い思い出の始まりです。私はついにその痛みから学びました。この長年の頑固な問題を解決するために一緒に働きましょう。
強制改行と強制改行なしに使用する属性
通常、改行を制御するために、word-wrap、white-space の 3 つの CSS 属性を使用します。これら 3 つの属性は、テキストの改行のために特別に作成されたと言えます。まず、これら 3 つの属性が何に使用されるかを知る必要があります:
ワードラップ構文
ワードラップ: 通常 (デフォルト) | ブレークワード
各ブラウザーが認識できます
パラメータ:
通常: 許可します指定されたコンテナーの境界を超えてコンテンツを拡張します。
break-word: コンテンツは境界内で分割されます。必要に応じてワードブレークがトリガーされます (注: ワードブレークとブレークワードは別のものであり、一方は属性であり、もう一方はパラメータであることを明確に区別してください)。
説明:
word-wrap は、「単語ごとに改行」するかどうかを制御し、現在の行が指定されたコンテナの境界を超えたときに改行するかどうかを設定または取得します。中国語も問題ありませんし、英語の文章も問題ありません。しかし、英語の長い文字列の場合は機能しません。
例:
単語 congratulation は、英語の単語の長い文字列に属します。行末が単語全体を表示するのに十分な幅がない場合、Word-wrap:break-word は単語全体を全体として扱います。とすると、単語が切り捨てられることなく、単語全体が自動的に次の行に配置されます。そのため、長いテキスト文字列には機能しません。 word-wrap:normal がデフォルトであり、英単語は分割されません。
結論:
アクションの範囲は、div などの標準のブロックレベル要素のみです。th や td などのテーブル要素は認識されますが、効果はありません (td の場合、th プラス width ワードラップは IE で機能します)効果的ですが、完全な互換性と便利なメモリの観点からは、前の結論が優先されます)。
ワードブレイク構文
ワードブレイク: 通常 (デフォルト) | keep-all
パラメータ:
通常: アジア言語による単語内での改行を許可するアジア言語の非テキスト ルール。
break-all: この動作は、アジア言語における通常の動作と同じです。非アジア言語のテキスト行の任意の単語内での区切りも許可されます。この値は、非アジアのテキストを含むアジアのテキストに適しています。
keep-all: アジア以外の言語の場合は通常と同じです。中国語、韓国語、日本語の場合、単語の区切りは許可されません。少量のアジア語のテキストが含まれる非アジア語のテキストに適しています。
説明:
word-break:break-all はブレークワードです。単語が境界に達すると、次の文字が自動的に次の行に進みます。これは主に英語の長い文字列の問題を解決します (word-wrap:break-word が長いテキスト文字列に対して機能しないという上記の欠点を補うだけです)。
例:
上記を続けると、congratulation という単語が英語の単語の長い文字列に属し、Word-break:break-all によって単語が切り捨てられ、行の末尾が conra (おめでとうの前の部分） 次へ 行動の旋律（conguatulation）の後端の部分。
word-break:keep-all は、中国語、日本語、韓国語の連続した単語を指します。つまり、ワードラップなしで今回のみを使用すると、中国語はラップされません。 (英語の文章は正常です。)
結論:
は div などの標準ブロックレベル要素でのみ機能します。 th や td などのテーブル要素は認識されますが、効果はありません (Chrome word-break:break- でテスト)すべて有効ですが、完全な互換性と記憶の利便性の観点から、以前の結論が優先されます)。 Firefox と Opera はワードブレークを認識できません。ましてや、Firefox で th や td でワードブレークを使用した場合の効果は認識できません。
空白構文
空白: 通常 (デフォルト) | pre | nowrap
パラメータ:
通常: デフォルト。空白はブラウザによって無視されます。
前: 空白スペースはブラウザによって保持されます。 HTML の pre タグのように動作します。
nowrap: テキストは折り返されず、br タグが見つかるまで同じ行に続きます。
注:
pre 属性の場合、HTML 内の複数の連続する空白文字がマージされます。その後、それらのマージを防ぐために (最も一般的なのはコード テキストのインデントを示す場合)、空白文字がマージされます。文字は保持され、インデントや行の折り返しを制御するために追加のスタイルやタグを追加する必要はありません。 pre タグの原理は同じです。デフォルトでは空白: pre があります。
nowrap 属性の場合、これは改行を強制しないことの核心です。通常、この属性は改行を強制しないために使用されます。 Firefoxのdivやtd、IEのdivも問題ありません。唯一の欠点は、IE の td に問題があることです。td に幅が指定されておらず、テキストに句読点やスペースが含まれていない場合でも、nowrap は有効です (長い文字列など)。中国語のテキスト)、nowrap は効率的に機能しなくなります。解決策は、word-break:keep-all; を追加してこの問題を解決することです。
強制改行の概要:
div などの標準ブロックレベル要素で強制的に改行する必要がある場合、最も一般的な解決策は word-wrap:break-word-; です。 Break:break-all; この方法の欠点は、行末が英語の単語の長い文字列である場合、単語が不自然な方法で分割されてしまうことです (FF は単語の区切りを認識しませんが、単語がバラバラになることはありません）。個人的には、URL に似たアドレスの長い文字列をこの div に配置する場合、このソリューションを使用するのは非常に良い選択だと思います (注: 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 は有効です (長い文字列など)。中国語のテキスト)、nowrap は効率的に機能しなくなります。解決策は、word-break:keep-all; を追加してこの問題を解決することです。要約すると、より安全な方法は、テキストと td の間に div の別のレイヤーを配置し、改行を強制しない nowrap を使用することです。このとき、テキストが多すぎるとコンテナから溢れてしまう可能性が高いので、さまざまなブラウザに対応できるように、コンテナが溢れないように overflow:hidden を追加する必要があることに注意してください。
ここまでまとめてみると、ブラウザーのさまざまな互換性のバランスをとるのはいくつかの属性だけであることがわかりました。すべてのブラウザーと完全に互換性を持たせることができる完璧なソリューションはないようです。ブラウザの表示を可能な限り一貫性を保つようにしてください。それでもすべてのブラウザと互換性を持たせる必要があると思われる場合、最終的な解決策は JS を使用することです。今後の記事では、最小限の JS コストでこの要件を満たすことを検討しますが、これはこの記事の範囲外です。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
