テーブルはかつて、Web ページの開発、つまりレイアウトにおいて非常に重要な役割を果たしていました。Web 2.0 でも、そのレイアウトは今でも見ることができます。しかし、テクノロジーが進歩するにつれて、Div + Css の組み合わせはついに旧式のレイアウトへの扉を開き、新しいレイアウトの波をもたらしました。その後、新旧の恨みが続き、テーブルについて意見があるかどうかに関わらず、多くの人がテーブルを批判し始めました。肥大化したコード、意味のないタグ、複雑な記述方法などです。テーブルは元々レイアウト用ではなく、データを表示するために作成されたものであることを覚えておいてください。テーブルレイアウトを放棄することは、テーブル自体を放棄することを意味しません。私のテーブルを救うために何が使えるでしょうか? テーブルとは何ですか? テーブルは、データのキャリアである HTML テーブルです。 以下は比較的標準的なテーブル コードの記述方法です。 コードをコピー コードは次のとおりです。<表の境界線="0" セル間隔="0" セルパディング="0" 幅="100%"> <tr> <th>月</th> <th>日付</th> </tr> <tr> <td>8月</td> <td>18</td> </tr> </テーブル> 単純な HTML テーブルは、table 要素と 1 つ以上の tr、th、または td 要素で構成されます。 tr 要素は表の行を定義し、 th 要素はヘッダー セルを定義し、 td 要素は表のセルを定義します。 border 属性は表の境界線の幅を指定し、cellpadding はセルの端とその内容の間のスペースを指定し、cellspacing はセル間のスペースを指定します。通常、ブラウザの違いを回避するために、これら 3 つの属性は手動で 0 に設定します。 width 属性はテーブルの幅を指定します。テーブルの幅は内部要素の幅に応じて変化するためです。一般的に、テーブルの幅は外部コンテナと同じであることが望まれるため、コンテナを埋めるためにデフォルトの幅は 100% に設定されることが多いです。 必ず記載しなければならないtable-layout:fixed属性 table-layout: auto (デフォルト) | fixed。 パラメータ: auto: デフォルトの自動アルゴリズム。レイアウトは各セルの内容に基づいて決定されます。各セルが読み取られて計算されるまでテーブルは表示されないため、非常に時間がかかります。 固定レイアウトモデルの動作手順: 一般的に、複雑な表の HTML を作成する場合、最初の行の各列の幅をどのように調整しても、列の幅が予期せず変更されることがあります (たとえば、間にスペースのない長い英語の文字列がある場合、長いテキストが強制的に折り返されて表が壊れないように、この列の幅を制限したいのですが、結果として適切な幅に調整できないことがよくあります)。このようなときは、どうしようもないので、table-layout:fixed を使用できます。 表の改行の問題 テーブルを使用してデータを表示する場合、特に最も頻繁に使用されるテーブル ヘッダーで、特定の段落のテキストを次の行に折り返さずに表示するのは面倒な場合があります。実際、頭痛の種となっているのは改行ではなく、その背後にあるブラウザの互換性であり、これが改行をさらに困難にしているのです。ここでは、さまざまな状況で改行を管理する方法について詳しく説明した記事「強制改行と強制非改行の戦略」を参考にしてください。 一般的に、表の改行に推奨される方法は、まず表に table-layout:fixed を設定することです。基本的に、このプロパティを設定すると、基本的な改行の問題が解決され、表内の td と th が他の td と th の幅を占有する状況が、表内のコンテンツの量によって発生しなくなります。この時点でまだ強制改行の問題がある場合は、この td 内に div レイヤーを追加し、2 つの CSS メソッド word-wrap:break-word; word-break:break-all; を使用して改行の問題を解決します。 よく使われるテーブルタグとあまり知られていないテーブルタグ thead、tfoot、tbody これら 3 つのタグは、いわゆる xhtml の産物であり、主にテーブル内の行をグループ化する機能を提供します。テーブルを作成するときは、ヘッダー行、データを含むいくつかの行、および下部の合計行が必要になるでしょう。この分割により、ブラウザはテーブル ヘッダーとフッターとは独立してテーブル本体のスクロールをサポートできるようになります。長いフォームを印刷する場合、テーブル データを含む各ページにテーブル ヘッダーとフッターが印刷されることがあります。個人的には、その主な用途は非常に長いテーブルの表示を最適化することだと考えます。 theadタグはHTMLのテーブルヘッダーを表します theadタグはHTMLフッターを表します tbodyタグはHTMLの表本体を表す 注意: thead、tfoot、tbody 要素を使用する場合は、すべてを使用する必要があります。これらは thead、tfoot、tbody の順序で表示されるため、ブラウザはすべてのデータを受信する前にヘッダーとフッターをレンダリングできます。これらのタグはテーブル要素内で使用する必要があり、thead 内には tr タグが含まれている必要があります。したがって、テーブルを記述するより標準的な方法は次のとおりです。 コードをコピー コードは次のとおりです。<表の境界線="0" セル間隔="0" セルパディング="0" 幅="100%"> <頭> <tr> <th>月</th> <th>日付</th> </tr> </thead> <tfoot> <tr> <th>月別リスト</th> <th>日付リスト</th> </tr> </tfoot> <t本文> <tr> <td>8月</td> <td>18</td> </tr> </tbody> </テーブル> 個人的には、これは役に立たず、使うにも役に立たず、捨ててしまうのは残念だと思います。小規模なプロジェクトではセマンティクスを追加できますが、同じテーブルに複数の異なるテーブル ヘッダーが表示されるというジレンマが発生し、将来の開発が制限されるため、正式なプロジェクトではスケーラビリティの観点からこれらのタグを慎重に使用する必要があります。 col と colgroup これら 2 つのタグも xhtml の産物です。強力ですが、互換性は低いです。 col タグは、テーブル内の 1 つ以上の列の属性値を定義します。 colgroup タグは、書式設定の目的でテーブル内の列をグループ化するために使用されます。 主な機能はセルの幅を制御することであり、各セルを個別に定義する手間が省けます。以前は、各列の幅を指定するために最初の行の th または td に幅を定義することが多かったのですが、col は幅だけでなく他の属性も同時に定義できます。たとえば、col を使用して、複数の列の幅の合計と列の背景色を制御できます。しかし、理想は完全ですが、現実は骨格です。前述のように、機能が充実しても互換性が高くなるわけではありません。既存のテストによると、col と colgroup が役割を果たし、互換性を確保できるアプリケーションは、width と background の 2 つだけです。幅については、列幅を確保するために最初の行の幅を設定する従来の方法を使用することを好みます。背景については、実際にはテーブルの広い領域で異なる背景を使用することはほとんどありません。したがって、個人的には、可能であれば使用しないようにするべきだと考えています。 テーブルを使用する場所 個人的には、データが非常に密集していてシリアル化されているコンテナでは、テーブルを使用するのが正しいと思います。最も一般的な例は、一般的なショッピング注文決済ページです。このページには、商品名、単価、購入数量、小計、送料などの注文の詳細がリストされ、最後に最終注文金額が下部に表示されます。ここでは、表は水を得た魚のようであり、データキャリアの魔法の効果を実現しています。 上記は、共通テーブルの知識ポイントの確認と、よく使用されるいくつかの場所の分析と要約です。この記事を読んで、正しい姿勢でテーブルを見て、使っていただければ幸いです。この記事が、あなたのテーブルを少しでも救ってくれることを願っています。ありがとう。 |
<<: MySQL マスター スレーブ データベースが同期されない問題を解決する 2 つの方法
目次1. Redis Dockerベースイメージを作成する2. Redisノードイメージを作成する3...
目次序文1. DDL 1.1 データベース操作1.2 データテーブルの操作1.3 一般的なデータ型1...
目次SaltstackがZabbixサービスを導入httpd、mysql、phpをインストールするh...
目次キャンバス関連文書エフェクト画像表示ケースの完全なコード親コンポーネントコードサブコンポーネント...
序文以前のプロジェクトでは、SQL の CASE WHEN ソート関数が使用されました。ではブログメ...
グラデーションの背景色を作成するときは、 linear-gradient() 関数を使用して線形グラ...
目次1. プロジェクト環境2. プロジェクトの説明3. プロジェクトの手順1. インストール2. 構...
まず、行の高さが要素の高さと等しい場合にテキストが垂直方向に中央揃えにならない理由を説明します。実際...
序文InnoDB はデータをテーブルスペースに保存します。デフォルト設定では、初期サイズが 10 M...
目次序文非同期読み込みパッケージコンポーネントコンポーネントの使用インターフェースをカスタマイズする...
<br />思想が東西に分かれていた時代、東洋の叡智を代表するものの一つとして「禅」は多...
序文これらの原則は実際の戦闘から要約されています。あらゆる原則の背後には血なまぐさい教訓があるこれら...
具体的な方法: (推奨チュートリアル:MySQLデータベース学習チュートリアル)テーブルロックの状態...
考えてみてください。なぜcss 、 javascriptのようにbodyタグの末尾ではなく、 hea...
この記事では、Ubuntuサーバーバージョンのインストールグラフィックチュートリアルを参考までに紹介...