こんにちは、阿久梨絵です！
HTML で表（＜table>）を作るとき、
「何となく＜tr>と＜td>で並べて終わり」になっていませんか？
見た目は合っていても、読みにくい／意味が分かりづらい表になっているケース、意外と多いんです。
今回は、可読性と構造美にこだわった「伝わるテーブルデザイン」のルールとコツを、HTMLコード付きで解説します！
※当記事における半角<は、全角＜で記載しています。
黄金ルール①：見出しは必ず＜th>で
html
＜thead>
＜tr>
＜th>商品名＜/th>
＜th>価格＜/th>
＜th>在庫＜/th>
＜/tr>
＜/thead>
・＜th>には自動的に太字＆中央揃えスタイルが適用され、視認性UP
・スクリーンリーダーにも“これは見出し行”と認識され、アクセシビリティにも貢献
黄金ルール②：ヘッダーと本文は＜thead> / ＜tbody>で明確に分ける
html
＜table>
＜thead>…＜/thead>
＜tbody>…＜/tbody>
＜/table>
レスポンシブデザイン（例：スマホでヘッダー固定）にも対応しやすくなる！
黄金ルール③：見出しは“左から右”の目線に沿って並べる
| 🟡 よくあるNGパターン | 🟢 読みやすい例 |
|---|---|
| 在庫・商品名・価格 | 商品名・価格・在庫 |
・知りたい順番・判断の流れに沿った構成になっていることで、読むストレスを軽減！
黄金ルール④：数値は“右揃え”、ラベルは“左揃え”
css
td.price {
text-align: right;
}
・桁がそろって比較しやすくなる
・金額や数量が多いテーブルではとくに重要なルール！
黄金ルール⑤：余白と罫線で“情報のまとまり”を演出
css
table {
border-collapse: collapse;
}
td, th {
padding: 0.75em;
border: 1px solid #ddd;
}
・罫線を控えめにすると、視線が情報に集中する
・paddingで余白をつけると、一気に読みやすく
黄金ルール⑥：強調したい列・行にはclassで装飾
html
＜tr class=”highlight”>
＜td>おすすめプラン＜/td>＜td>¥5,980＜/td>＜td>あり＜/td>
</tr>
css
.highlight {
background-color: #f0fbff;
font-weight: bold;
}
色の強調は1表に1箇所程度が鉄則！
まとめ
HTML の表は、単なるデータの羅列ではなく、
“読む順番”や“関係性”を明示するための情報設計ツールです。
見やすい表には、以下のような“気配り”が詰まっています。
・視線の流れに沿った配置
・ラベルとデータの意味づけ
・強調の節度
・コードのメンテナンス性
これらを意識するだけで、読まれる／理解される表になりますよ！
阿久梨絵でした！
