あなたを救うにはどうしたらいいですか、私のテーブル(海友ブログ)_HTML/Xhtml

テーブルはかつて Web 開発において重要な位置を占めていました。Web2.0 でもそのレイアウトを見ることができます。しかし、テクノロジーは常に進歩しており、Div CSS の組み合わせ手法がついに昔ながらのレイアウトの扉をたたき、レイアウトの新しい波を引き起こしました。その後、テーブルについて意見を持っているかどうかに関係なく、多くの人が、肥大化したコード、意味不明なタグ、複雑な記述方法などを批判し始めました。テーブルはもともとレイアウトのために作成されたものではなく、データを表示するために作成されたことに注意してください。テーブルレイアウトを放棄することは、テーブル自体を放棄することを意味するわけではありません。あなた、私のテーブルを救うために何ができますか?

テーブルとは:

テーブルは HTML テーブルでもあり、データの伝達者です。

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

コードをコピーします

コードは次のとおりです:

;th>月

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

table-layout:fixed 属性について言及する必要があります

テーブルレイアウト: 自動 (デフォルト) |

パラメータ:

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

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

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

表の難しい問題は改行

テーブルを使用してデータを表示すると、時々頭の痛い問題が発生します。つまり、特に最も使用されるヘッダー th で特定のテキストを改行なしで表示することです。実際、あなたが抱えている頭痛の種は行の折り返しではありませんが、その背後にあるブラウザの互換性により、行の折り返しがはるかに困難になっています。ここでは、強制改行と強制改行なしのガイドを参照して、さまざまな状況での改行を解決する方法について詳しく説明しています。

一般的に、テーブル内で行を折り返す推奨される方法は次のとおりです: 最初に table-layout:fixed をテーブルに設定します。基本的に、この属性を設定した後は、テーブル内で td を使用しなくても基本的な行の折り返しの問題を解決できます。内部の各コンテンツの量により、他のtdとthの幅を奪い合う状況が発生します。この時点でも強制改行の問題が解決しない場合は、td 内に div のレイヤーを追加し、2 つの CSS メソッド word-wrap:break-word; を使用して問題を解決します。改行問題。

一般的だが馴染みのないテーブルタグのいくつか

頭、足、胴体

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

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

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

tbody タグは HTML テーブルの本体を表します。
ブラウザはテーブルを表示するとき、通常、テーブルを完全にダウンロードしてから全体を表示します。したがって、テーブルが非常に長い場合は、次のようにすることができます。セグメントで表示するには tbody を使用します。

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

コードをコピー

コードは次のとおりです:

< ;tr>
<月>
<月>

<月> リスト
リスト
🎜>

/tbody>
< ;/table>

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

コルとコルグループ

これら 2 つのタグも xhtml の産物であり、強力な機能を備えていますが、互換性は非常に悪いです。

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

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

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

テーブルの使用場所

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

上記は、テーブルの一般的な知識ポイントの確認と、よく使用されるいくつかの箇所の分析と分類です。この記事を読んで、正しい姿勢で表を閲覧・利用できるようになれば幸いです。この記事があなたのテーブルを少しでも救ってくれることを願っています。ありがとう。