【CSS】display:tableを使ってdivで表を作る方法
「displayを使えばdivだけで表をつくれるってホント!?」
display:tableを使ってdivで表を作る方法を解説します。
目次
【はじめに】ふつうにtableかdisplay:flexを使いましょう
display:tableを使うとdivだけで表を作ることができますが、本当にその必要があるのか考えましょう。
ふつうにtableタグを使えばhtmlだけで表を作ることができます。
横並べをしたいなら「display:flex」が便利です。
それでもdisplay:tableを使ってdivで表を作りたいかたは続きをどうぞ。
CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
【完成形】display:tableを使ってdivで表を作る
下記の左は「display:table」を使ってdivで表を作ったものです。
右は比較のために用意したtableタグの表です。
display:table
セル
セル
<div class="table">
<div>
<div>セルセルセル</div>
<div>セル</div>
<div>セル</div>
</div>
<div>
<div>セル</div>
<div>セル<br>セル</div>
<div>セル</div>
</div>
<div>
<div>セル</div>
<div>セル</div>
<div>セルセル<br>セル</div>
</div>
</div>
<style>
.table{
display: table;
border-collapse: collapse;
}
.table>div{
display: table-row;
}
.table>div>div{
display: table-cell;
border: 1px solid #999;
padding: 5px;
}
</style>tableタグ（比較用）
| セルセルセル | セル | セル |
| セル | セル セル |
セル |
| セル | セル | セルセル セル |
<table class="example">
<tr>
<td>セルセルセル</td>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル<br>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
<td>セルセル<br>セル</td>
</tr>
</table>
<style>
.example{
border-collapse: collapse;
}
.example td{
border: 1px solid #999;
padding: 5px;
}
</style>下記より詳しく解説します。
display:tableの使い方
tableは以下のタグでできています。
- table
- tr
- td,th
※tbodyは省略するものとします。
divでtableを作る場合、各divをそれぞれのタグの役割に当てる必要があります。
- table→display:table
- tr→display: table-row
- td,th→display:table-cell
※thとtdを区別したいときはclassか疑似クラスを使いましょう。
html側ではtableタグで表を作るとき同様の形にdivを置きましょう。
<div>
<div>
<div>セルセルセル</div>
<div>セル</div>
<div>セル</div>
</div>
<div>
<div>セル</div>
<div>セル<br>セル</div>
<div>セル</div>
</div>
<div>
<div>セル</div>
<div>セル</div>
<div>セルセル<br>セル</div>
</div>
</div>あとはそれぞれのdivにそれぞれのdisplayを指定しましょう。
【特徴】CSSの効き方が変わってくる
divにdisplay:tableを指定すると、divには効かないが、tableに効くCSSが効くようになります。
display:table-cellも同様にtdと同じ仕様になります。
display: table-rowはtrになるため、多くのCSSが効かなくなります。
【注意】結合などhtml属性は使えない
tableやtdにはdivには使えないhtml属性が多く用意されています。
その多くはCSSで代用できるのですが、結合だけはCSSがありません。
結合したいときは素直にtableタグを使うことをオススメします。
【まとめ】display:tableを使ってdivで表を作る方法
html側ではtableタグで表を作るとき同様の形にdivを置く。
各divに下記displayを指定する。
- table→display:table
- tr→display: table-row
- td,th→display:table-cell
以上、display:tableを使ってdivで表を作る方法でした。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
