テーブルを作成するための HTML dl、dt、dd タグとテーブル作成テーブル

テーブルを作成するための HTML dl、dt、dd タグとテーブル作成テーブル
ウェブサイトの開発とメンテナンスのコストが削減されるだけでなく、コードもよりセマンティックになります。しかし、表が消えたわけではなく、個人情報データの一覧など、Web ページ上のデータ表示に必要不可欠な要素として、今でも多くの人が使用しています。実際、HTML の dl、dt、dd タグを使用すると、より多くのコードを節約でき、コードとコンテンツの意味的一貫性が向上します。もちろん、テーブルには用途があり、それは大量のデータを含むデータ テーブルの場合ですが、小さなデータ リストやフォームではテーブルはまったく必要ありません。

dl列表和table表格哪個更適合數據列表

依然として従来のテーブルを使用してデータ リストを作成している場合は、HTML の dl、dt、dd タグを使用すると作業が簡単になる方法を説明します。

テーブルデータリスト

従来表のデータリストコードは以下のとおりです。各行に tr タグを追加し、タイトルとデータに td タグを追加する必要があります。タグはすべて td なので、スタイルを追加する場合は、各 td に class 属性も追加する必要があります。


コードをコピー
コードは次のとおりです。

<テーブル>
<t本文>
<tr>
<td class="title">名前:</td>
<td class="text">スコール・リー</td>
</tr>
<tr>
<td class="title">年齢:</td>
<td class="text">23</td>
</tr>
<tr>
<td class="title">性別:</td>
<td class="text">男性</td>
</tr>
<tr>
<td class="title">誕生日:</td>
<td class="text">1986年5月26日</td>
</tr>
</tbody>
</テーブル>

以下は対応するCSSコードです。前に HTML で宣言したクラスにスタイルを追加します。


コードをコピー
コードは次のとおりです。

/*テーブルリストデータ*/
テーブル {
下マージン:50px;
}
テーブル tr .title {
背景:#5f9be3;
色:#fff;
フォントの太さ:太字;
パディング:5px;
幅:100ピクセル;
}
テーブル tr .text {
パディング左:10px;
}

上記のコードからわかるように、テーブル タグを使用する場合、CSS を使用してコンテンツを変更または修正するには、td セルに対応するクラス属性をいくつか追加する必要があります。これにより、目に見えない形で作業負荷が増加し、コードが少し増えることになります。より多くのコードとはどういう意味ですか?つまり、ウェブサイトのトラフィックが無駄になり、バグが発生する可能性が高まり、その後のメンテナンスが困難になります。

dl、dt、dd データ リスト

ここで、HTML の dl、dt、dd タグを使用したデータ リストを見てみましょう。まず、dl (定義リスト) タグを使用してデータ構造全体を保持し、次に dt (カスタム タイトル) タグと dd (カスタム説明) タグを使用してデータ内のタイトルとコンテンツを保持します。


コードをコピー
コードは次のとおりです。

<ダウンロード>
<dt>名前: </dt>
<dd>スコール・リー</dd>
<dt>年齢: </dt>
<dd>23</dd>
<dt>性別: </dt>
<dd>男性</dd>
<dt>誕生日:</dt>
<dd>1986年5月26日</dd>
</dl>

CSS コードでは、dt と dd を左にフロートさせるだけです。
/*DL、DT、DD タグ リスト データ*/


コードをコピー
コードは次のとおりです。

ダウンロード{
下マージン:50px;
}
dl dt {
背景:#5f9be3;
色:#fff;
フロート:左;
フォントの太さ:太字;
右マージン:10px;
パディング:5px;
幅:100ピクセル;
}
ダウンロード dd {
マージン:2px 0;
パディング:5px 0;
}

dl、dt、dd の例から、それらのコードがよりシンプルでスムーズ、そしてよりセマンティックであることがはっきりとわかるはずです。

これを踏まえて、Web フォームやその他の Web ページ レイアウトを完成させるために依然としてテーブル タグを使用することにこだわる場合は、今すぐコードを変更する時期です。仕事をもっと楽にしましょう!

<<:  10分で始めるCSS3アニメーション

>>:  Dockerがコンテナを起動するたびに、IPとホストが指定した操作が実行されます。

推薦する

Linux サーバーのグラフィック カードのクラッシュの解決策

ログインインターフェースの解像度が特に大きい場合、グラフィカルインターフェース全体が特に大きくなり、...

Docker のタイムゾーンの問題とデータ移行の問題

最新のソリューション: -v /usr/share/zoneinfo/Asia/Shanghai:/...

モバイル開発におけるHTML5開発の現状を深く理解する

「私たちは次の一連のモバイル製品を HTML5 で作成しています。」 「ええ、最近は多くの人が Ap...

Linux でリモート サーバー ファイルの状態を表示する方法

以下のように表示されます。 test コマンドはファイルが存在するかどうかを判断します。 ssh u...

MySQLインデックスの基本構文

インデックスはソートされたデータ構造です。 where 条件での検索や order by 条件での並...

JS初心者が配列を処理するための実践的な方法のまとめ

join() メソッド: 指定された区切り文字を使用して配列内のすべての要素を文字列に接続します。例...

IDEA は MySQL への接続時にエラーを報告します。サーバーが無効なタイムゾーンを返します。タブに移動して serverTimezone プロパティを設定してください。

これからの道は常に困難で、棘だらけです。歯を食いしばって、乗り越えられると信じてください。さあ、さあ...

Vueタイマーの詳細な使い方

この記事では、参考までにタイマーを実装するためのVueの具体的なコードを紹介します。具体的な内容は次...

最新の人気スクリプトAutojsソースコード共有

今日は、最新の人気スクリプト 50 個を含むソース コードを共有します。現在、Mine Guard ...

MySQL 5.1 のパスワードを変更し、MySQL データベースにリモートでログインする方法

mysql ユーザーを作成し、承認します。形式: 「ユーザー パスワード」で識別されるユーザー@ログ...

Linux で nohup ログ出力が大きすぎる問題の解決方法の詳細な説明

最近、hadoop テスト クラスターで spark ストリーミング プログラムを実行し、その後、n...

MySQLデータ行と行オーバーフローのメカニズムの詳細な説明

1. 行の形式は何ですか? MySQL の行形式の設定は次のように表示されます。 実際、MySQL ...

MySQL 8.0.16 圧縮パッケージのインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.16圧縮パッケージのインストールと設定方法を参考までに紹介します。...

Node.js における path.join() の利点の分析

文字列連結ではなく path.join() メソッドを使用する必要があるのはなぜか疑問に思うかもしれ...

Linuxで環境変数を削除する詳細な手順

Linuxで環境変数を削除するには?unsetコマンドを使用してすぐに削除します1. Linuxクラ...