テーブルを作成するための HTML の dl、dt、dd タグとテーブルを作成するためのテーブル_HTML/Xhtml_Web ページ制作

これにより、Web サイトの開発コストと保守コストが削減されるだけでなく、コードのセマンティックも向上します。しかし、それ以来、テーブルがなくなったわけではありません。個人情報データのリストなど、Web ページでのデータ表示の必需品として、今でも多くの人に使用されています。実際、HTML の dl、dt、dd タグを使用すると、より多くのコードが節約され、コードとコンテンツの意味的な一貫性が高まります。もちろん、テーブル、つまり大量のデータを含むデータ テーブルにも適していますが、小規模なデータ リストやフォームにはテーブルを使用する必要はまったくありません。

まだ従来のテーブルを使用してデータ リストを作成している場合は、以下を読み続けて、HTML の dl、dt、dd タグを使用することで作業がどのように簡単になるかを確認してください...

テーブルデータリスト

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

コードをコピーします

コードは次のとおりです:

> ;

名前:	スコール・リー
年齢:	23
性別:	男性
生年月日:	1986 年 5 月 26 日

これは1 つのCSS コードに対応して、HTML で以前に宣言されたクラスにスタイルを追加します。

コードをコピー

コードは次のとおりです:

/*TABLE LIST DATA* /
table {
margin-bottom:50px;
}
table tr .title {
background:#5f9be3;
color:#fff;
font-weight:ボールド;
パディング:5px;
width:100px;
}
table tr .text {
padding-left:10px;
}

上記のコードから、table タグを使用して、CSS を使用してコンテンツを変更または変更したい場合は、対応するクラス属性を td セルに追加する必要があることがわかります。これにより事実上ワークロードが増加し、コードが若干大きくなります。コードを増やすとはどういう意味ですか?これは、Web サイトのトラフィックが無駄になり、バグが発生する可能性が高まり、その後のメンテナンスがより困難になることを意味します。

dl、dt、dd データリスト

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

コードをコピーします

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

>

名前:

スコール・リー

年齢:

23

;

性別:

男性

生年月日:

26th May 1986< ;/dd>

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

コードをコピーしますコードは次のとおりです:

dl {
margin -bottom: 50px;
}
dl dt {
背景:#5f9be3;
カラー:#fff;
float:left;
font-weight:bold;
マージン右 :10px;
パディング:5px;
幅:100px;
}
dl dd {
マージン:2px 0;
パディング:5px 0;
}


dl、dt、dd の例から、それらのコードがより単純で、よりスムーズで、よりセマンティックであることが明確にわかるはずです。

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