目次
- はじめに：tableタグは「古い」って本当？
- tableタグとは何か（まずここを整理）
- tableの基本構造
- それぞれの役割
- thとtdの違い（ここが大事）
- th
- td
- よくある失敗例①：列数が合っていない
- チェック方法
- よくある失敗例②：レイアウト目的で使う
- 枠線の付け方（正しい方法）
- 行・列の結合方法
- 行を結合（rowspan）
- 列を結合（colspan）
- tableを見やすくする実務テクニック
- ヘッダー固定風にする
- 偶数行を色分け
- スマホで横スクロールする問題
- 対策
- なぜ横に広がるのか
- 対策
- tableの構造を強化する（少しだけステップアップ）
- DevToolsでtableを確認する方法
- チェックリスト
- まとめ：tableは今でも現役
はじめに：tableタグは「古い」って本当？
「tableはもう使わないほうがいい」
こんな話を聞いたことありませんか？
これ、半分正解で半分間違いです。
レイアウト目的では使いません。でも、表データには今でも必須です。
私も昔、料金表をdivで無理やり組んで、スマホで横スクロール地獄になったことがあります。素直にtableを使えばよかっただけでした。
今日は、tableタグの正しい使い方を、実務目線で整理します。
tableタグとは何か（まずここを整理）
tableタグは、行と列で構成されるデータを表示するためのHTML要素です。
使う場面はこんなときです。
- 料金表
- 比較表
- スケジュール表
- 数値一覧
- 商品スペック一覧
「表として意味がある情報」に使います。
tableの基本構造
最小構成はこれです。
<table>
<tr>
<th>項目</th>
<th>内容</th>
</tr>
<tr>
<td>商品名</td>
<td>サンプル商品</td>
</tr>
</table>それぞれの役割
| タグ | 役割 |
|---|---|
| table | 表全体 |
| tr | 行（row） |
| th | 見出しセル |
| td | データセル |
覚えるのはこの4つ。
thとtdの違い（ここが大事）
th
- 見出し用
- 太字で表示される
- 情報構造を明確にする
td
- データ本体
- 数値や文字を入れる
SEOやアクセシビリティを考えるなら、見出しにはthを使います。
よくある失敗例①：列数が合っていない
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>これ、2列目が欠けています。
ブラウザは補完しようとしますが、
レイアウト崩れの原因になります。
チェック方法
DevToolsでtableを開いて、行ごとのセル数を確認します。
よくある失敗例②：レイアウト目的で使う
昔はこういう使い方がありました。
<table>
<tr>
<td>左</td>
<td>右</td>
</tr>
</table>今はFlexboxやGridを使います。
- レイアウト → CSS
- 表データ → table
役割を分けます。
枠線の付け方（正しい方法）
昔はこう書きました。
<table border="1">今はCSSで指定します。
table {
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
}border-collapseを入れないと、
線が二重になります。
行・列の結合方法
行を結合（rowspan）
<td rowspan="2">共通</td>列を結合（colspan）
<td colspan="2">横に結合</td>料金表や見出し行でよく使います。
tableを見やすくする実務テクニック
ヘッダー固定風にする
thead th {
background: #f5f5f5;
}偶数行を色分け
tr:nth-child(even) {
background: #fafafa;
}これだけで視認性がかなり上がります。
スマホで横スクロールする問題
tableは横に広がります。
特に、
- 列が多い
- 英数字が長い
- 固定幅指定している
と横スクロールが発生します。
対策
.table-wrap {
overflow-x: auto;
}<div class="table-wrap">
<table>
...
</table>
</div>スマホ崩れを防ぐ基本パターンです。
なぜ横に広がるのか
tableは基本的に「内容に合わせて広がる」性質があります。
長い単語やURLがあると、
自動改行されずに広がります。
対策
td {
word-break: break-word;
}これで極端な横スクロールを防げます。
tableの構造を強化する（少しだけステップアップ）
より正確に書くなら、
<table>
<thead>
<tr>
<th>項目</th>
<th>価格</th>
</tr>
</thead>
<tbody>
<tr>
<td>プランA</td>
<td>¥1,000</td>
</tr>
</tbody>
</table>theadとtbodyで構造が明確になります。
DevToolsでtableを確認する方法
- 右クリック → 検証
- tableを展開
- trごとのセル数を見る
- Computedで幅を確認
崩れたときは、まず構造を疑います。
チェックリスト
✔ 見出しにthを使っているか
✔ 列数が揃っているか
✔ レイアウト目的で使っていないか
✔ スマホで横スクロール確認したか
✔ border-collapseを設定しているか
まとめ：tableは今でも現役
tableは古い技術ではありません。
使いどころを間違えなければ、今でも最適解です。
- 表データにはtable
- 見出しにはth
- 見た目はCSS
- スマホは横スクロール対応
この4つを押さえておけば、
料金表や比較表で困ることはほぼありません。
「html table」で迷ったら、
まずは基本構造を丁寧に書くところから始めてみてください。