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

投稿日:2017年12月1日 更新日:

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

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

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

HTML/CSSコード紹介

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

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

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

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

 

関連するおすすめ記事

Amazonチャージ


Amazonで買い物するなら、Amazonチャージを利用しよう!

チャージごとに、プライム会員なら最大2.5%Amazonポイントが貯まる!

クレジットカードがなくてもOK! Amazonギフト券チャージでお得にお買い物しよう!

さっそくチャージする

Amazonクリスマスギフト
  • この記事を書いた人

りょうま

WEBエンジニア/フリーランス5期目/大阪府北摂在住🏠長野県諏訪市出身🎣webデザインやフロントエンド技術の情報を中心に、人生をカスタマイズして楽しく過ごすための情報を発信中📢WPテーマはAFFINGER5です。

-HTML / CSS
-

Copyright© ヤッテモータース , 2018 All Rights Reserved.