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&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>
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>
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>
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>
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>
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>
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>
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>
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>
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 では慣れないとなかなか難しいですよね。
表（セル）のサイズや色、境界線など、好みに合わせて修正してください！
