tableタグを使わずに、表を作成する方法

HTML で表を作成している時、何らかの事情で table タグが使えない状況に出くわしたことは、ありませんか？

その状況で、表を作成しなければならなくなったことは、ありませんか？

今回は、table タグを使わずに、表を作成する方法を紹介します。

table で表を作成したい場合、以下のコードで表示できます。

※CSS は、表をわかりやすくするために追加しました。

この表を table タグを使用しないで作成します。

コードは、以下の通りです。

解説

div タグの中に、span タグを書きます。

span タグの中に表題やデータを入れて、縦横の表を作ります。

span タグの中に、display: inline-block;を設定します。

そうすることで、表題やデータの中の幅と高さが指定できる様になります。

span タグの中に、width で幅を指定します。 今回は、題名をwidth: 170px;、データをwidth: 180px;に設定しています。

注意：span タグの中の幅が狭いと改行してしまいます。 　　　 width で改行しないようにしましょう。

縦の位置が固定されてきましたので、次は枠線を付けます。

.table にborder: solid 1px #222;としてしまうと、タイトルと著者名の間の縦線が表示されません。

border は.table ではなく、span 内に設定します。

タイトルと著者名の間のスペースが気になりますので、.table にdisplay:flexを設定します。

内枠の太線が気になります。 枠線は、下の写真の様になっていて、重なり合った場所は、線が太くなるのです。

線を重なり合わなくしたいので、重なり合っている線のどちらかを消しましょう。

今回は、1 列目の右枠と、データの上枠を消します。

右枠を消したい場合は、border-right: none;を設定します。

今回は、span タグに border を設定しているので、右枠を消すことを優先するために、border-right: none;の後に、!importantを設定します。

同様に、.body の中にborder-top: none!important;を設定します。

枠線の太さが均一になりました。

表題を中央にして、内枠にスペースを設定してあげると完成です！

table タグが使えない状況は稀ですが、その様な場面に出くわしたら、ぜひ活用してください。