検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >標準の dl、dt、dd タグを使用してテーブル list_HTML/Xhtml_Web ページの作成を放棄する

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

WBOY
WBOYオリジナル
2016-05-16 16:42:371448ブラウズ

現在、ますます多くのフロントエンド開発者が、元のテーブル レイアウトを置き換えて 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 (カスタム説明) タグを使用して、データ内のタイトルとコンテンツを収容します。





コードをコピーします


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


>
名前:
年齢:
;
性別:
男性
生年月日:
26th May 1986

CSS コードでは、dt と dd を左に配置するだけです。
コードをコピーします


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


/*DL, DT, DD タグリストデータ*/
dl {
margin-bottom:50px;
dl dt {
background:#5f9be3;
float; :left;
font-weight:bold;
margin-right:10px;
width:100px;
dl dd {
2px 0;
padding:5px 0; } dl、dt、dd のコードがよりシンプルでスムーズであることがはっきりとわかるはずです。もっとセマンティックですよね？
これを見て、Web フォームやその他の Web ページ レイアウトを完成させるためにテーブル タグをまだ使用したい場合は、今がコードを変更する時期です。仕事をもっと楽にしましょう！
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTMLテーブルボーダーコントロール実装コード_HTML/Xhtml_Webページ制作次の記事：HTMLテーブルボーダーコントロール実装コード_HTML/Xhtml_Webページ制作

関連記事

続きを見る
名前: ;
年齢:
;/td>
性別:
 >男性