ホームページ >ウェブフロントエンド >htmlチュートリアル >あなたを救うにはどうしたらいいですか、私のテーブル(海友ブログ)_HTML/Xhtml_Webページ制作
あなたを救うにはどうしたらいいですか、私のテーブル(海友ブログ)_HTML/Xhtml_Webページ制作
- WBOYオリジナル
- 2016-05-16 16:37:161104ブラウズ
テーブルはかつて Web 開発において重要な位置を占めていました。Web2.0 でもそのレイアウトを見ることができます。しかし、テクノロジーは常に進歩しており、Div CSS の組み合わせ手法がついに昔ながらのレイアウトの扉をたたき、レイアウトの新しい波を引き起こしました。その後、テーブルについて意見を持っているかどうかに関係なく、多くの人が、肥大化したコード、意味不明なタグ、複雑な記述方法などを批判し始めました。テーブルはもともとレイアウトのために作成されたものではなく、データを表示するために作成されたことに注意してください。テーブル レイアウトを放棄することは、テーブル自体を放棄することを意味するわけではありません。あなた、私のテーブルを救うために何ができますか?
テーブルとは:
テーブルは HTML テーブルでもあり、データの伝達者です。
以下は、テーブル コードを記述する比較的標準的な方法です。
| 18 |
単純な 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 タグが含まれている必要があります。したがって、テーブルを作成するより標準的な方法は次のコードです。