標準の dl、dt、dd タグを使用してテーブル list_HTML/Xhtml_Web ページの作成を放棄する-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

標準の dl、dt、dd タグを使用してテーブル list_HTML/Xhtml_Web ページの作成を放棄する

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:42 PM

dd table

現在、ますます多くのフロントエンド開発者が、元のテーブルレイアウトを置き換えて Web ページの全体的なレイアウトを完成させるために xHTML CSS を使用し始めています。これにより、Web サイトの開発コストと保守コストが削減されるだけでなく、コードの効率も向上します。セマンティック。しかし、それ以来、テーブルがなくなったわけではありません。個人情報データのリストなど、Web ページでのデータ表示の必需品として、今でも多くの人に使用されています。実際、HTML の dl、dt、dd タグを使用すると、より多くのコードが節約され、コードとコンテンツの意味的な一貫性が高まります。もちろん、テーブル、つまり大量のデータを含むデータテーブルにも適していますが、小規模なデータリストやフォームにはテーブルを使用する必要はまったくありません。
まだ従来のテーブルを使用してデータリストを作成している場合は、HTML の dl、dt、および dd タグを使用すると作業がどのように簡単になるかを説明するために読み続けてください...
テーブルデータリスト
データ従来のテーブルのリストコードは以下のとおりです。各行に tr タグを追加し、タイトルとデータに td タグを追加する必要があります。タグはすべて td であるため、スタイルを追加したい場合は、各 td に class 属性を追加する必要があります。

コードをコピーします

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

>

生年月日: class=" text">1986 年 5 月 26 日

対応する CSS コードを使用して、HTML で事前に宣言されたクラスにスタイルを追加します。

コードをコピー

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

/*TABLE LIST DATA* /

table {

margin-bottom:50px; } table tr .title { background:#5f9be3; font-weight:太字;

padding:5px;

width:100px;

table tr .text {
padding-left:10px;上記のコードから、table タグを使用して、CSS を使用してコンテンツを変更または変更したい場合は、対応するクラス属性を td セルに追加する必要があることがわかります。これにより事実上ワークロードが増加し、コードが若干大きくなります。コードを増やすとはどういう意味ですか?これは、Web サイトのトラフィックが無駄になり、バグが発生する可能性が高まり、その後のメンテナンスがより困難になることを意味します。
dl, dt, dd データリスト
次に、HTML の dl, dt, dd タグを使用したデータリストを見てみましょう。まず、dl (定義リスト - カスタムリスト) タグを使用してデータ構造全体を収容し、次に dt (カスタムタイトル) タグと dd (カスタム説明) タグを使用して、データ内のタイトルとコンテンツを収容します。

コードをコピーします

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