あなたを救うために、私のテーブルは何を使えばいいでしょうか (Haiyu Blog)

あなたを救うために、私のテーブルは何を使えばいいでしょうか (Haiyu Blog)

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

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

一般的に、複雑な表の 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 は別のスタイルを使用して定義でき、印刷時にヘッダーをページの上部に印刷できます。

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

tbodyタグはHTMLの表本体を表す
ブラウザが表を表示する場合、通常は表全体を表示する前に表を完全にダウンロードします。そのため、表が非常に長い場合は、tbody を使用して表をセクションごとに表示することができます。

注意: 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 つの方法

>>:  ウェブページの色特性の分類

推薦する

Dockerを使用してRedisクラスターを構築する方法

目次1. Redis Dockerベースイメージを作成する2. Redisノードイメージを作成する3...

MySQL の DDL と DML についての簡単な説明

目次序文1. DDL 1.1 データベース操作1.2 データテーブルの操作1.3 一般的なデータ型1...

Saltstack に Zabbix サービスをデプロイする方法を説明します

目次SaltstackがZabbixサービスを導入httpd、mysql、phpをインストールするh...

VueはCanvasを使用してランダムなサイズで重なり合わない円を生成します

目次キャンバス関連文書エフェクト画像表示ケースの完全なコード親コンポーネントコードサブコンポーネント...

MySQLソートにおけるCASE WHENの使用例

序文以前のプロジェクトでは、SQL の CASE WHEN ソート関数が使用されました。ではブログメ...

CSS3 グラデーション背景の互換性の問題

グラデーションの背景色を作成するときは、 linear-gradient() 関数を使用して線形グラ...

nginx をベースにした Web クラスター プロジェクトをすばやく構築する方法を説明します。

目次1. プロジェクト環境2. プロジェクトの説明3. プロジェクトの手順1. インストール2. 構...

line-height=height要素の高さだがテキストが垂直方向に中央揃えされない問題を解決する

まず、行の高さが要素の高さと等しい場合にテキストが垂直方向に中央揃えにならない理由を説明します。実際...

MySQL が InnoDB テーブルが独立したテーブルスペースか共有テーブルスペースかを判断する方法の詳細な説明

序文InnoDB はデータをテーブルスペースに保存します。デフォルト設定では、初期サイズが 10 M...

Vue を使用した Amap アプリケーション開発のベスト プラクティス

目次序文非同期読み込みパッケージコンポーネントコンポーネントの使用インターフェースをカスタマイズする...

デザイン理論:人間中心のデザインコンセプト

<br />思想が東西に分かれていた時代、東洋の叡智を代表するものの一つとして「禅」は多...

MySQL データベース開発の 36 の原則 (要約)

序文これらの原則は実際の戦闘から要約されています。あらゆる原則の背後には血なまぐさい教訓があるこれら...

MySQL テーブルがロックされているかどうかを照会する方法

具体的な方法: (推奨チュートリアル:MySQLデータベース学習チュートリアル)テーブルロックの状態...

なぜCSSをヘッドタグに配置する必要があるのか

考えてみてください。なぜcss 、 javascriptのようにbodyタグの末尾ではなく、 hea...

Vmware での Ubuntu サーバーのインストール チュートリアル

この記事では、Ubuntuサーバーバージョンのインストールグラフィックチュートリアルを参考までに紹介...