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

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

今回はありそうでなかったdlを使った表テーブルの作り方をご紹介します。
tableタグだとレスポンシブ対応が難しいケースもありますが、dlタグでコーディングしておけばレスポンシブ時のレイアウトも自在に対応できますね。

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

HTML/CSSコード紹介

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

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

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

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

Amazonチャージ

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

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

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

さっそくチャージする

  • この記事を書いた人

りょうま

WEBエンジニア/フリーランス6期目/大阪府北摂在住🏠 長野県諏訪市出身🎣学生時代に制作したサイトが評価され新卒で上場企業のWEBデザイナーとして就職。その後数社を渡り歩き、2013年にフリーランスとして独立。現在は主にフロントエンドエンジニアとしてお仕事しています。詳しいプロフィールはこちら

-HTML / CSS
-, , ,

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