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

2023年6月29日

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

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

データベース構造としても一般的なテーブルは、<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&CSSコード】罫線のみ

<table>
  <thead>
    <tr>
      <th>月</th>
      <th>売上</th>
      <th>経費</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>4</td>
      <td>50000</td>
      <td>40000</td>        
    </tr>
    <tr>
      <td>5</td>
      <td>80000</td>
      <td>65000</td>        
    </tr>
    <tr>
      <td>6</td>
      <td>40000</td>
      <td>32000</td>        
    </tr>
    <tr>
      <td>7</td>
      <td>60000</td>
      <td>45000</td>        
    </tr>
  </tbody>
</table>

HTMLコードは他2つと同じです。

table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
  padding: 8px 16px;
  text-align: center;
}

【HTML&CSSコード】太い区切り線

<table>
  <thead>
    <tr>
      <th>月</th>
      <th>売上</th>
      <th>経費</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>4</td>
      <td>50000</td>
      <td>40000</td>        
    </tr>
    <tr>
      <td>5</td>
      <td>80000</td>
      <td>65000</td>        
    </tr>
    <tr>
      <td>6</td>
      <td>40000</td>
      <td>32000</td>        
    </tr>
    <tr>
      <td>7</td>
      <td>60000</td>
      <td>45000</td>        
    </tr>
  </tbody>
</table>

HTMLコードは他2つと同じです。

table {
  border-collapse: collapse;
  border-top: 3px solid black;
  border-bottom: 3px solid black;
}

thead {
  border-bottom: 3px solid black;
}

th, td {
  padding: 8px 16px;
  text-align: center;
}

【HTML&CSSコード】シマシマ

<table>
  <thead>
    <tr>
      <th>月</th>
      <th>売上</th>
      <th>経費</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>4</td>
      <td>50000</td>
      <td>40000</td>        
    </tr>
    <tr>
      <td>5</td>
      <td>80000</td>
      <td>65000</td>        
    </tr>
    <tr>
      <td>6</td>
      <td>40000</td>
      <td>32000</td>        
    </tr>
    <tr>
      <td>7</td>
      <td>60000</td>
      <td>45000</td>        
    </tr>
  </tbody>
</table>

HTMLコードは他2つと同じです。

table {
  border-collapse: collapse;
}

th, td {
  padding: 8px 16px;
  text-align: center;
}

thead tr th {
  background-color: blue;
  color: white;
}

tr:nth-child(odd) {
  background-color: #eee;
}

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

【ヘッダーあり】の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

【HTML&CSSコード】罫線のみ

<table>
  <tbody>
    <tr>
      <td>4</td>
      <td>50000</td>
      <td>40000</td>        
    </tr>
    <tr>
      <td>5</td>
      <td>80000</td>
      <td>65000</td>        
    </tr>
    <tr>
      <td>6</td>
      <td>40000</td>
      <td>32000</td>        
    </tr>
    <tr>
      <td>7</td>
      <td>60000</td>
      <td>45000</td>        
    </tr>
  </tbody>
</table>

HTMLコードは他2つと同じです。

table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 8px 16px;
  text-align: center;
}

【HTML&CSSコード】太い区切り線

<table>
  <tbody>
    <tr>
      <td>4</td>
      <td>50000</td>
      <td>40000</td>        
    </tr>
    <tr>
      <td>5</td>
      <td>80000</td>
      <td>65000</td>        
    </tr>
    <tr>
      <td>6</td>
      <td>40000</td>
      <td>32000</td>        
    </tr>
    <tr>
      <td>7</td>
      <td>60000</td>
      <td>45000</td>        
    </tr>
  </tbody>
</table>

HTMLコードは他2つと同じです。

table {
  border-collapse: collapse;
  border-top: 3px solid black;
  border-bottom: 3px solid black;
}

td {
  padding: 8px 16px;
  text-align: center;
}

【HTML&CSSコード】シマシマ

<table>
  <tbody>
    <tr>
      <td>4</td>
      <td>50000</td>
      <td>40000</td>        
    </tr>
    <tr>
      <td>5</td>
      <td>80000</td>
      <td>65000</td>        
    </tr>
    <tr>
      <td>6</td>
      <td>40000</td>
      <td>32000</td>        
    </tr>
    <tr>
      <td>7</td>
      <td>60000</td>
      <td>45000</td>        
    </tr>
  </tbody>
</table>

HTMLコードは他2つと同じです。

table {
  border-collapse: collapse;
}

td {
  padding: 8px 16px;
  text-align: center;
}

tr:nth-child(odd) {
  background-color: #eee;
}

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

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

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

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

【HTML&CSSコード】横並び説明リスト

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

dl {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

dt {
  width: 30%;
}

dd {
  width: 70%;
  margin: 0;
}

<dl>要素に「display: flex;」を設定すると、子要素の<dt>・<dl>要素が横並びになる。
さらに「flex-wrap: wrap;」を設定すると、親要素の<dl>からはみ出た子要素が折り返される。
<dt>と<dd>要素の幅の合計と<dl>要素が同じなら、<dt><dd>が一列に並んで表示されるようになる。
上の例では、<dl>要素のwitdhを100%、<dt>要素の幅を30%、<dd>要素の幅を70%にしている。

ただ、このコードでは<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コード】シンプル

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

HTMLコードは他2つと同じです。

dl {
  width: 100%;
}

div {
  display: flex;
  width: 100%;
}

dt {
  width: 30%;
}

dd {
  width: 70%;
  margin: 0;
}

<dd>要素にはデフォルトで「margin-left」が設定されているため、「margin: 0;」でリセットします。

【HTML&CSSコード】罫線のみ

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

HTMLコードは他2つと同じです。

dl {
  width: 100%;
  border: 1px solid black;
  border-bottom: none;
}

div {
  display: flex;
  width: 100%;
  border-bottom: 1px solid black;
}

dt {
  width: 30%;
  border-right: 1px solid black;
}

dd {
  width: 70%;
  margin: 0;
}

<dd>要素にはデフォルトで「margin-left」が設定されているため、「margin: 0;」でリセットします。

【HTML&CSSコード】シマシマ

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

HTMLコードは他2つと同じです。

dl {
  width: 100%;
  border-bottom: none;
}

div {
  display: flex;
  width: 100%;
}

div:nth-child(odd) {
  background-color: #eee;
}

dt {
  width: 30%;
}

dd {
  width: 70%;
  margin: 0;
}

<dd>要素にはデフォルトで「margin-left」が設定されているため、「margin: 0;」でリセットします。

まとめ

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

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

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！