標準的なdl,dt,ddタグを持つテーブルリストを破棄する。

現在、多くのフロントエンド開発者がxHTML+CSSを使用して、本来のテーブルレイアウトに代わってWebページ全体のレイアウトを完成させており、Webサイトの開発・メンテナンスコストを削減するだけでなく、コードのセマンティック化も実現しています。しかし、その後テーブルがなくなったかというとそうではなく、個人情報データのリストなど、Webページにおけるデータ表示の必需品として、今でも多くの人に利用されています。実際、HTMLのdl、dt、ddタグを使うことで、より多くのコードを節約でき、よりセマンティックにすることができます。もちろん、非常に大きなデータテーブルであるtableの場所もありますが、小さなデータリストやフォームであれば、tableを全く使わずに使うことも可能です
もしあなたがまだ伝統的なテーブルを使ってデータリストを作っているなら、HTMLのdl、dt、ddタグを使うことで、どのように作業が楽になるかをご覧ください...。
テーブル データリスト
従来のテーブルデータリストのコードは以下の通りです。各行にtrタグを追加し、タイトル用のtdタグとデータ用のtdタグを追加しなければなりません。タグはすべてtdなので、スタイルを追加する場合は各tdにclass属性を追加しなければなりません。

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

上記のコードからわかるように、tableタグを使って、CSSで内容を変更したり修正したりする場合は、tdセルに対応するclass属性をいくつか追加する必要があります。これは必ず、作業量を増やし、コードを少しずつ増やしていくことになります。コードが増えるとはどういうことでしょうか？それは、ウェブサイトがトラフィックを浪費し、バグが発生する可能性を高め、後のメンテナンスが難しくなることを意味します。
dl, dt, ddデータ一覧
では、HTMLのdl, dt, ddタグを使って、データリストを見てみましょう。まず、dl（定義リスト - カスタムリスト）タグでデータ構造全体を保持し、dt（カスタムタイトル）タグとdd（カスタムディスクリプション）タグでデータのタイトルと内容を保持することにします。

そして、cssのコードでは、dtとddを左にフロートさせるだけです。

dl、dt、ddの例を見れば、そのコードがよりクリーンでスムーズで、よりセマンティックであることは一目瞭然でしょう。
これを見て、もしあなたがまだウェブフォームやその他のウェブレイアウトにテーブルタグを使うことにこだわっているなら、今こそコードを変更する時です。仕事を楽にしましょう。