スマホで見るとHTMLテーブルのレイアウトが崩れていたり、テーブルの列が多すぎて横にスクロールして面倒だったり、いまいち見やすいと思うHTMLテーブルって少ないです。
なので、HTMLテーブルを作るときに気をつけているわたしの基本ルールと、コピペで使えるHTMLテーブルCSSテンプレートをまとめました。
たまに見る残念なテーブルデザイン
この記事のテーブルCSSを使うとこうなる
目次
キレイなHTMLテーブルの基本ルール
まずはHTMLテーブルを作るときにちょっと工夫してキレイに見せるコツをどうぞ。
列数を少なくする
列を多くすると表のレイアウトが崩れやすいです。今はスマホ表示が多いので、出来るだけ横項目（列）を少なく設定します。
特に商品の性能を比較するようなテーブルでは、項目数が少なければ比較しやすくなります。
文字数を減らす
セル内の文字数が多いと行の高さがバラバラになってしまいます。文字数はなるべく少なく！
数値で表現する
商品比較テーブルでは、数値のほうが分かりやすいことが多いです。
文字を強調する
商品比較テーブルで大切なのは、どの商品が優れているかを瞬時に判断できることです。セルの文字を赤文字・太字・フォントサイズを大きくするなど強調します。
キレイなHTMLテーブルを作るポイント まとめ
スマホ対応HTMLテーブルテンプレート
今回作ったレスポンシブHTMLテーブルは列の長さに合わせて文字とスペースを調整してスマホでも画面をはみ出すことがありません。
2次配布はNGですが、個人・商用どちらでも自由に使ってください。気に入ったら、ブログでの紹介やSNSシェアよろしくお願いします。
CSS
/*
Name: オーランHTMLテーブルテンプレート
URL: https://orank.jp/
Version: 1.0.1
*/
.nara-table {
table-layout: fixed;
width:100%;
}
/* ヘッダー（朱色） */
.nara-table thead th {
background:#AD002D;
font-weight: bold;
color:#fff;
}
/* ボディ項目・フッター項目 */
.nara-table tbody th,
.nara-table tfoot th {
background:#FFF;
}
/* ボディデータ・フッターデータ */
.nara-table tbody td,
.nara-table tfoot td {
text-align:center;
}
/* 偶数行 １行ごとの色変えが不要なら削除 */
.nara-table tr:nth-child(2n) th,
.nara-table tr:nth-child(2n) td {
background: #FBFBF6;
}
/*（スマホ対応）文字が小さすぎたら調整してください。 */
/* 項目の多いテーブルの幅を調整 */
@media (max-width: 767px) {
.col6t th,
.col6t td{
font-size:0.4em;
padding: 10px 0px;
}
.col5t th,
.col5t td{
font-size:0.5em;
padding: 10px 0px;
}
.col4t th,
.col4t td{
font-size:0.7em;
padding: 10px 5px;
}
.col3t th,
.col3t td{
font-size:0.8em;
padding: 10px 10px;
}
}３列テーブル
| おすすめ | ||
|---|---|---|
| 項目 | 商品１ | 商品２ |
| 見た目 | ||
| ニオイ | ||
| 味 | ||
| 価格 |
<table class="nara-table col3t">
<tfoot>
<tr>
<th>おすすめ</th>
<td></td>
<td></td>
</tr>
</tfoot>
<thead>
<tr>
<th>項目</th>
<th>商品１</th>
<th>商品２</th>
</tr>
</thead>
<tbody>
<tr>
<th>見た目</th>
<td></td>
<td></td>
</tr>
<tr>
<th>ニオイ</th>
<td></td>
<td></td>
</tr>
<tr>
<th>味</th>
<td></td>
<td></td>
</tr>
<tr>
<th>価格</th>
<td></td>
<td></td>
</tr>
</tbody>
</table>４列テーブル
| おすすめ | |||
|---|---|---|---|
| 項目 | 商品１ | 商品２ | 商品３ |
| 見た目 | |||
| ニオイ | |||
| 味 | |||
| 価格 |
<table class="nara-table col4t">
<tfoot>
<tr>
<th>おすすめ</th>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
<thead>
<tr>
<th>項目</th>
<th>商品１</th>
<th>商品２</th>
<th>商品３</th>
</tr>
</thead>
<tbody>
<tr>
<th>見た目</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>ニオイ</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>味</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>価格</th>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>5列テーブル
| おすすめ | ||||
|---|---|---|---|---|
| 項目 | 商品１ | 商品２ | 商品３ | 商品４ |
| 見た目 | ||||
| ニオイ | ||||
| 味 | ||||
| 価格 |
<table class="nara-table col5t">
<tfoot>
<tr>
<th>おすすめ</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
<thead>
<tr>
<th>項目</th>
<th>商品１</th>
<th>商品２</th>
<th>商品３</th>
<th>商品４</th>
</tr>
</thead>
<tbody>
<tr>
<th>見た目</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>ニオイ</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>味</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>価格</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>6列テーブル
| おすすめ | |||||
|---|---|---|---|---|---|
| 項目 | 商品１ | 商品２ | 商品３ | 商品４ | 商品５ |
| 見た目 | |||||
| ニオイ | |||||
| 味 | |||||
| 価格 |
<table class="nara-table col6t">
<tfoot>
<tr>
<th>おすすめ</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
<thead>
<tr>
<th>項目</th>
<th>商品１</th>
<th>商品２</th>
<th>商品３</th>
<th>商品４</th>
<th>商品５</th>
</tr>
</thead>
<tbody>
<tr>
<th>見た目</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>ニオイ</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>味</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>価格</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
