【HTML&CSS】エクセルやパワポのような表・説明リストの作り方

HTMLとCSSで表やリストを作る方法

HTMLの<table>要素や<dl>要素とCSSを組み合わせ、色々な表(テーブル)や説明リストの作り方を公開します。
自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればと思います!

ブラウザはGoogle Chromeを使い、Wordpress上で実装しています。

目次

【ヘッダーあり】テーブルの実装例とコード

データベース構造としても一般的なテーブルは、<table>や<thead>タグを使います。

罫線のみ

売上 経費
4 50000 40000
5 80000 65000
6 40000 32000
7 60000 45000

太い区切り線

売上 経費
4 50000 40000
5 80000 65000
6 40000 32000
7 60000 45000

シマシマ

売上 経費
4 50000 40000
5 80000 65000
6 40000 32000
7 60000 45000

【ヘッダーなし】テーブルの実装例とコード

【ヘッダーあり】のHTMLから、<thead>タグ部分のコードを削除するだけで作成できます。

罫線のみ

4 50000 40000
5 80000 65000
6 40000 32000
7 60000 45000

太い区切り線

4 50000 40000
5 80000 65000
6 40000 32000
7 60000 45000

シマシマ

4 50000 40000
5 80000 65000
6 40000 32000
7 60000 45000

【ヘッダーなし】用語説明リスト

『用語ー用語の説明』のような辞書的な表記には<dl>・<dt>・<dd>タグを使います。
以下のような、商品情報・スペックを纏めた表を作るのに適しています。

商品名
エコバッグ
価格
600円
サイズ
30cm ✕ 40cm
重量
100g
素材
ポリエステル

通常、<dl>・<dt>・<dd>タグを並べただけでは、上のような横並びにはなりません。
表のような横並び表示にするには、<dl>要素にフレックスボックス(display: flex;)を設定します。
フレックスボックスについては こちらの記事 にまとめています。


ただ、このコードでは<dt>・<dd>要素の幅が<dl>要素の幅を超えてしまうとレイアウトが崩れます。
例えば、1pxのborderを設定すると以下のようになります。

商品名
エコバッグ
価格
600円
サイズ
30cm ✕ 40cm
重量
100g
素材
ポリエステル

これを回避するには、<dt>・<dd>要素それぞれに「box-sizing: border-box;」を設定します。これで、デフォルトでは外側に設定されるborderが内側に入るので、<dt>・<dd>要素の幅がそのまま維持されます。

また、<dt>・<dd>を1組ずつ<div>要素で囲ってしまう方法もあります。
個人的にはこの方が直感的に理解しやすく、他のスタイルも付けやすくなるので、オススメです。
<dl>要素内の<dt>・<dd>要素を<div>でまとめる記法は 公式 で認められています。

シンプル

商品名
エコバッグ
価格
600円
サイズ
10cm ✕ 20cm
重量
100g
素材
ポリエステル

罫線のみ

商品名
エコバッグ
価格
600円
サイズ
10cm ✕ 20cm
重量
100g
素材
ポリエステル

シマシマ

商品名
エコバッグ
価格
600円
サイズ
10cm ✕ 20 cm
重量
100g
素材
ポリエステル

まとめ

以上、簡単な表や説明リストの作り方をご紹介しました。

パワポやエクセルではすぐに作成できますが、HTML/CSS では慣れないとなかなか難しいですよね。
表(セル)のサイズや色、境界線など、好みに合わせて修正してください!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次