テーブルリストを破棄するには、標準のdl、dt、ddタグを使用します。

現在、ますます多くのフロントエンド開発者が、元のテーブルレイアウトを xHTML + CSS に置き換えて Web ページの全体的なレイアウトを完成させ始めています。これにより、Web サイトの開発と保守のコストが削減されるだけでなく、コードがよりセマンティックになります。しかし、表が消えたわけではなく、個人情報データの一覧など、Web ページ上のデータ表示に必要不可欠な要素として、今でも多くの人が使用しています。実際、HTML の dl、dt、dd タグを使用すると、より多くのコードを節約でき、コードとコンテンツの意味的一貫性が向上します。もちろん、テーブルには用途があり、それは大量のデータを含むデータテーブルの場合ですが、小さなデータリストやフォームではテーブルはまったく必要ありません。
依然として従来のテーブルを使用してデータリストを作成している場合は、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 ページレイアウトを完成させるために依然としてテーブルタグを使用することにこだわる場合は、今すぐコードを変更する時期です。仕事をもっと楽にしましょう！

<<: CSSの高さの崩壊問題についての簡単な説明

>>: MySQL オンライン DDL ツール gh-ost 原理分析