HTML 表を作る方法｜tableタグの基本からセル結合・デザイン装飾まで徹底解説

Web制作でデータを整理して見せたいときに役立つのがHTML 表です。スケジュール、価格表、レイアウト補助など、あらゆる場面で活躍します。この記事では、tableタグを使った基本構文から、セル結合、デザイン装飾、レスポンシブ対応までを初心者向けにわかりやすく解説します。
表の基本構造やタグの使い方を体系的に学びたい方は、HTML tableタグ基本からレイアウトまで解説（侍エンジニアブログ）も参考になります。

Table of contents

HTML 表を作るには？基本構造を理解しよう
tableタグの基本構文と使い方
1. 例：HTMLコードと出力結果
HTML 表を装飾する方法
セルを結合する方法（colspan・rowspan）
HTML表のよくあるエラーと対処法
まとめ：HTMLの表タグを使いこなして見やすいページを作ろう

HTML 表を作るには？基本構造を理解しよう

表（table）の役割と用途

HTML 表は、データを行と列で整理して表示するための構造です。表計算ソフトのように、情報を比較・整理するのに適しています。

表を作るために使う主なタグ

<table>：表全体を囲むタグ
<tr>：1行を定義するタグ
<th>：見出しセル（太字・中央寄せ）
<td>：データセル（通常のセル）

最もシンプルな表のサンプルコード

<table border="1"> <tr> <th>名前</th> <th>年齢</th> </tr> <tr> <td>田中</td> <td>25</td> </tr> </table>

このコードをブラウザで表示すると、シンプルな2行×2列の表が出力されます。

tableタグの基本構文と使い方

tableタグはHTML 表の土台となる要素です。それぞれのタグの役割を整理してみましょう。

<table>：表全体の範囲を指定
<tr>：1行を作成
<th>：見出しセル（太字・中央寄せ）
<td>：通常のデータセル

例：HTMLコードと出力結果

<table border="1"> <tr> <th>商品</th> <th>価格</th> </tr> <tr> <td>りんご</td> <td>100円</td> </tr> </table>

HTML 表を装飾する方法

HTML表の見た目を整えるための装飾も重要です。CSSを使ってスタイリッシュに仕上げるコツは、初心者向け HTML 表(table)の作り方とCSS装飾（Qiita）で詳しく紹介されています。

枠線をつける

border属性を使うと簡単に線を表示できます。

<table border="1">

背景色をつける

bgcolor属性またはCSSのbackground-colorを使います。

<td bgcolor="#f0f0f0">
または
td { background-color: #f0f0f0; }

セルの余白と隙間を調整

cellpadding：セル内の余白
cellspacing：セル同士の間隔

<table border="1" cellpadding="5" cellspacing="0">

セルを結合する方法（colspan・rowspan）

セル結合はHTML 表を整える上で欠かせません。実際の使い方は、HTML table セル結合（colspan／rowspan）使い方ガイドが非常に参考になります。

横方向に結合する（colspan）

<td colspan="2">横に2つ結合</td>

縦方向に結合する（rowspan）

<td rowspan="2">縦に2つ結合</td>

複雑な結合表の例

<table border="1"> <tr><th rowspan="2">科目</th><th colspan="2">成績</th></tr> <tr><th>中間</th><th>期末</th></tr> <tr><td>数学</td><td>80</td><td>90</td></tr> </table>