「displayを使えばdivだけで表をつくれるってホント!?」display:tableを使ってdivで表を作る方法を解説します。【はじめに】ふつうにtableかdisplay:flexを使いましょうdisplay:tableを使うとdivだけで表を作ることができますが、本当にその必要があるのか考えましょう。ふつうにtableタグを使えばhtmlだけで表を作ることができます。横並べをしたいなら「display:flex」が便利です。display:flexで解決できること9選!display:flexは便利らしいがどんなときに使えるのか。横並べを中心に、いろいろなことができるので覚えておきましょう。この記事を読むそれでもdisplay:tableを使ってdivで表を作りたいかたは続きをどうぞ。CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読む【完成形】display:tableを使ってdivで表を作る下記の左は「display:table」を使ってdivで表を作ったものです。右は比較のために用意したtableタグの表です。5px;}</style>下記より詳しく解説します。display:tableの使い方tableは以下のタグでできています。tabletrtd,th※tbodyは省略するものとします。divでtableを作る場合、各divをそれぞれのタグの役割に当てる必要があります。table-rowtd,th→display:table-cell※thとtdを区別したいときはclassか疑似クラスを使いましょう。displayの書き方を23種デモ付きで全部説明します!この記事を読むhtml側ではtableタグで表を作るとき同様の形にdivを置きましょう。</div></div>あとはそれぞれのdivにそれぞれのdisplayを指定しましょう。【特徴】CSSの効き方が変わってくるdivにdisplay:tableを指定すると、divには効かないが、tableに効くCSSが効くようになります。display:table-cellも同様にtdと同じ仕様になります。table-rowはtrになるため、多くのCSSが効かなくなります。【注意】結合などhtml属性は使えないtableやtdにはdivには使えないhtml属性が多く用意されています。その多くはCSSで代用できるのですが、結合だけはCSSがありません。結合したいときは素直にtableタグを使うことをオススメします。HTML5におけるtableのwidthなど属性の代替CSShtml5ではそれまで使えていた多くの属性値が廃止となり属性が多かったtableは影響大です。HTML5におけるtableのwidthなど属性の代替CSSを解説します。この記事を読む【まとめ】display:tableを使ってdivで表を作る方法html側ではtableタグで表を作るとき同様の形にdivを置く。各divに下記displayを指定する。table-rowtd,th→display:table-cell以上、display:tableを使ってdivで表を作る方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。