【コピペでOK】まだtable使ってるの!? dlで1ランク上の表テーブル作成をしてみよう

 

今回はありそうでなかったdlを使った表テーブルの作り方をご紹介します。

tableタグだとレスポンシブ対応が難しいケースもありますが、dlタグでコーディングしておけばレスポンシブ時のレイアウトも自在に対応できますね。

表テーブルの作成時の参考にしてみてください。

HTML/CSSコード紹介

簡単な表テーブルを作ってみました。

テーブルタグではおなじみのよくある表テーブルですね。

ulではなくdlにした理由は、dt(用語)とdd(説明)を関連付けるためにdlを選択しました。

ulでもこのレイアウトは実現可能ですが、ケースに応じて使い分けてみてください。

 

よく読まれている人気記事

1

新居に引っ越してから我が家のインターネットはJ:COM NET(120MB)を利用しています。 以前Wi-Fi中継機を導入して快適インターネットを構築した記事を書きましたが、その後別の問題が起きてしま ...

2

新婚旅行でハワイに行ったときに買ってきたソルトスクラブとシアボディバターの紹介です。 ご自身用にもお土産用にもおすすめですので、ハワイに行かれた際にはぜひどうぞ! 見た目もかわいいソルトスクラブ「So ...

3

TOKYO MXで放送中の情報番組「5時に夢中!」の人気コーナー「中瀬親方のエンタメ番付」で紹介されたおすすめ作品を紹介します。(2018年5月31日放送分) 新潮社出版部部長の中瀬ゆかりさんが感銘を ...

Copyright© ヤッテキュー! , 2018 All Rights Reserved.