あなたを救うもの、私の食卓(海友ブログ)

かつてテーブルは、Web開発においてレイアウトという非常に重要な位置を占めており、Web2.0においても、そのレイアウトの姿を見ることができます。しかし、技術は絶えずDiv + CSSの組み合わせは、最終的にレイアウトの新しい波をこすり古いレイアウトのドアを開いてノック改善されています。そして、古い憎悪と新しい憎悪が来て、テーブルについて意見を持っていたかどうか、多くの人々がテーブルを批判し始めた - 肥大したコード、ないセマンティックタグ、面倒な書き方、などなど。覚えておいてほしいのは、テーブルはレイアウトに使うために作られたのではなく、データを表示するために作られたものだということだ。テーブルのレイアウトを放棄することは、テーブルそのものを放棄することではないのです。どうすれば救われるのか、私のテーブルを。

テーブルとは。

tableは、Htmlのテーブルでもあり、データの運搬役です。

以下は、より標準的なテーブルコードの書き方です。
/{br

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

必ず記載する table-layout:fixed プロパティについて

table-layout: auto (デフォルト) |fixed.

パラメータです。

auto: デフォルトの自動アルゴリズム。各セルの内容に基づいてレイアウトされる。各セルを読み込んで計算した後でないと表は表示されないので、遅くなります。
を修正しました。固定レイアウトアルゴリズム。このアルゴリズムでは、水平方向のレイアウトはテーブルの幅、テーブルのボーダーの幅、セルの間隔、列の幅のみに基づき、テーブルの内容には依存しない。高速なパース。

固定レイアウトモデルは、以下の手順で動作します。
1. width 属性の値が auto でないすべての column 要素は、width の値に基づいて列の幅を設定します。
2. テーブルの最初の行の列にあるセル幅は、セル幅を基準にしてこの列の幅を設定します。このセルが複数の列にまたがっている場合、幅はそれらの列に等しく分配される。
3. 上記2ステップの後、列の幅がまだAUTOの場合、その幅ができるだけ等しくなるように自動的にサイズ調整されます。このとき、テーブルの幅は、テーブルの幅の値の合計とカラムの幅（どちらか大きい方）に設定されます。テーブルの度合いが列幅の合計よりも大きい場合は、その差を列数で割って、この結果の幅が各列に追加される。
この方法は、すべての列幅がテーブルの最初の行で定義されるため、高速に処理されます。最初の行以降のすべての行のセルは、最初の行で定義された列幅に従ってサイズ調整されます。これらの後の行のセルは、列幅を変更しない。つまり、これらのセルに指定された幅の値は無視される。

一般に、複雑なhtmlテーブルを行う場合、時には、最初の行の各列の幅をどのように調整しても、列の幅が予想外の変化（例えば、英語の長い文字列、および列の幅を制限したい場合の途中にスペースがないように、テキストが長すぎて改行を強制し、テーブルを壊さないように、しばしば適切な幅を調整する方法）結果が発生することがわかります。この絶望的な状況の時に、table-layout:fixedを使うことができます。

表 トラブルシューティング 改行について

tableを使ってデータを改行せずに表示する場合、特にテーブルのヘッダーで頭が痛くなることがあります。実は、あなたの頭痛の種は改行ではなく、性の付加の背後にあるブラウザの互換性が、改行の難易度を大きく高めているのです。ここでは 強制的に改行する方法と強制的に改行しない方法 この記事では、さまざまな場面で改行をごまかす方法について詳しく解説しています。

一般的に、テーブルの行を変えるには、まずテーブルにtable-layout:fixedを設定することが推奨されます。基本的にこのプロパティを設定した後は、中のコンテンツが多いため、表が他のtd,thの幅を掴むということが発生せず、基本的な改行の問題を解決することができる。この時点で、まだ強制改行の問題がある場合は、このtdの中にdivのレイヤーを追加し、word-wrap:break-word; word-break:break-all; この二つのCSSメソッドで改行の問題を解決することができます。

よくある、さびしいテーブルタグの数々

thead, tfoot, and tbody

この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の最初の行にある各列の幅を定義するために、およびcolは幅だけでなく、他のプロパティ、いくつかの列の幅の合計を制御するなど、定義することができますが、あなたも列の背景色を制御できますされています。しかし、理想は豊かで、現実は骨抜き、先に述べたように、大きな関数は、その互換性も強いという意味ではありません、既存のテストによると、コルとcolgroupは、アプリケーションの互換性を確保する上で役割を果たすことができる2つだけ：幅と背景です。幅については、私は従来の方法を使用して、最初の行は、列の幅を確保するために幅を設定することを好む。背景については、一般的に実際のテーブル、異なる背景の大きな領域の使用はまれです。したがって、私は個人的に思う：できるだけ多くのように使用することはできません。

テーブルを使用する場所

個人的には、データが非常に密で直列化されているコンテナでは、テーブルが適していると思います。最も一般的な例は、私たちがよく利用するショッピング注文のチェックアウトページで、商品名、単価、購入数量、小計金額、送料など、注文の詳細がリストアップされます。最後に結果の一番下に最終的な注文金額が表示されますが、ここでテーブルは水を得た魚となり、データキャリアの魔法の効果を発揮することができます。

以上、一般的なテーブルの知識ポイントの整理と、整理によく使われる数カ所の分析でした。この記事で少しでも、私のテーブルが救われることを願っています。