テーブルはかつて、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 つの方法
最近のプロジェクトでフォームを作成するときに、コメント ボックスまで自動的にスクロールし、コメント ...
数日前に仕事を始めて、Mysql をインストールしたところ、開くことができました。今日、会社に行った...
以前、あるプロジェクトでMysql FIND_IN_SET関数を使用したことがありますが、非常に便利...
mysql は期間内のすべての日付または月を取得します1: mysqlは期間内のすべての月を取得し...
フォームが送信されると、返された HTML ページが再レンダリングされ、SELECT コントロールの...
目次1. テレポートの使用2. モーダルダイアログコンポーネントを完成させる3. コンポーネントのレ...
テスト環境は、JDBCドライバを使用してMariaDB 5.7でセットアップされています。 <...
1. CSSファイルの命名規則提案: 文字、_、-、数字を使用します。文字で始まる必要があり、純粋な...
この記事では、ショッピングカートを実装するためのJavaScriptの具体的なコードを参考までに紹介...
目次初期化初期化状態()初期化プロパティ()初期化データ()観察する()オブザーバーリアクティブを定...
複数のデータベースをバックアップするには、次のコマンドを使用できます。 mysqldump -uro...
新しい公式サイトはオンラインですが、携帯電話で新しい公式サイトにアクセスすると、エクスペリエンスが非...
これまでのプロジェクトはすべて Windows システム環境にデプロイされていました。今回は Lin...
MySQL 8.0.22のダウンロード、インストール、設定方法、参考までに具体的な内容は次のとおりで...
コードを書くとき、2 つのファイル間の違い、または同じファイルの異なるバージョン間の違いを知る必要が...