HTMLとCSSで表を作りたいものの、「tableタグの中に何を書けばよいの？」「罫線や色はどう付けるの？」と迷っていませんか？
表は、料金プランや商品一覧、営業時間など、同じ項目で複数のデータを比べるときに便利です。この記事では、初心者の方でも手を動かせるように、基本のHTMLからCSSデザイン、セル結合、スマートフォン対応まで順番に解説します。
HTMLのtableタグとは
table要素は、行と列で構成される表形式のデータをHTMLで表すための要素です。表全体を<table>と</table>で囲み、その中に行やセルを並べます。
たとえば、商品名・価格・在庫のように、共通する項目で情報を比較する場面に向いています。一方、Webページ全体を左右に並べるといったレイアウト目的では使いません。ページの配置にはFlexboxやCSS Gridを使います。
HTMLタグそのものを初めて学ぶ方は、先に次の記事を読むと、開始タグと終了タグの考え方をつかみやすくなります。
tableを構成するタグの役割
tableでは複数のタグを組み合わせます。最初は名前が似ていて戸惑いますが、「表全体→行→セル」という入れ子を意識すると理解しやすくなります。
| 要素 | 役割 | 名前の意味 |
|---|---|---|
table | 表全体を囲む | 表 |
caption | 表のタイトルや説明を示す | 表題 |
thead | 列見出しのグループを囲む | table head |
tbody | 主要なデータ行を囲む | table body |
tr | 横方向の1行を作る | table row |
th | 項目名となる見出しセルを作る | table header |
td | 値を入れるデータセルを作る | table data |
trは表の「横1行」です。その中にthまたはtdを記述した順番で、左から右へセルが並びます。3列の表なら、基本的に各行へ3個のセルを用意します。
theadとtbodyは見た目を作るためだけのタグではありません。表のどこが見出しで、どこが本文データなのかをブラウザや読み上げソフトへ伝える役割があります。
HTMLで基本の表を作る手順
ここからは、3つの料金プランを比較する表を作ります。同じフォルダーにindex.htmlとstyle.cssを用意し、「HTMLを書く→CSSを追加する→完成表示を確認する」の順に進めましょう。
変更前のHTMLを書く
まず、index.htmlへ次のコードを記述してください。captionには表の内容が分かるタイトルを入れ、1行目のthには各列の項目名を入れます。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>料金プラン表</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="table-scroll">
<table class="price-table">
<caption>サービスの料金プラン</caption>
<thead>
<tr>
<th scope="col">プラン</th>
<th scope="col">月額料金</th>
<th scope="col">利用人数</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">ライト</th>
<td>980円</td>
<td>1人</td>
</tr>
<tr>
<th scope="row">スタンダード</th>
<td>1,980円</td>
<td>3人</td>
</tr>
<tr>
<th scope="row">プレミアム</th>
<td>2,980円</td>
<td>5人</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>この段階でも表は表示されますが、ブラウザの初期スタイルでは罫線がほとんど見えず、セルの余白も小さい状態です。HTMLはデータの構造を担当し、見た目は次のCSSで整えます。
scope="col"は列の見出し、scope="row"は行の見出しであることを示します。見た目には大きく影響しませんが、読み上げソフトがデータと見出しの関係を理解しやすくなります。
style.cssで罫線と余白を付ける
次に、style.cssへ次のCSSを追加します。表の幅、罫線、セル内の余白、見出しの背景色をまとめて指定します。
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 40px 16px;
color: #172554;
font-family: sans-serif;
background-color: #f8fafc;
}
.price-table {
width: 100%;
min-width: 560px;
border-collapse: collapse;
background-color: #ffffff;
}
.price-table caption {
margin-bottom: 12px;
font-size: 1.25rem;
font-weight: 700;
text-align: left;
}
.price-table th,
.price-table td {
padding: 16px;
border: 1px solid #cbd5e1;
text-align: left;
}
.price-table thead th {
color: #ffffff;
background-color: #2563eb;
}
.price-table tbody tr:nth-child(even) {
background-color: #eff6ff;
}border-collapse: collapseは、隣り合うセルの罫線を1本に重ねる指定です。これがないとセル同士の境界が二重に見える場合があります。
paddingはセルの内側に余白を作ります。文字と罫線の間に空間ができるため、数値や項目名を読み取りやすくなります。
tr:nth-child(even)は、tbody内の偶数行を選ぶセレクターです。1行おきに薄い背景色を付けると、横に長い行でも視線を保ちやすくなります。
CSSのセレクターやプロパティの基本を確認したい場合は、次の記事も参考にしてください。
変更後の表示を確認する
ファイルを保存してブラウザを更新すると、見出しが青色になり、各セルを区切る罫線と余白が表示されます。HTMLで表の意味を組み立て、CSSで読みやすさを加えるのが基本です。
tableをCSSで見やすくデザインする方法
基本の表ができたら、用途に合わせて見た目を調整します。装飾を増やす前に、項目名と値を追いやすいこと、文字と背景のコントラストが十分なことを優先しましょう。
表の幅を指定する
width: 100%を指定すると、表が親要素の横幅まで広がります。固定幅だけを指定すると小さな画面からはみ出しやすいため、通常は割合と最大幅を組み合わせます。
.price-table {
width: 100%;
max-width: 800px;
margin-inline: auto;
}max-widthは、表が広がりすぎないよう上限を決めます。margin-inline: autoを加えると、上限より親要素が広いときに表を中央へ配置できます。
列ごとに文字の位置を変える
項目名は左揃え、金額は右揃えのように、データの種類で位置を変えると比較しやすくなります。次の指定では、2列目の料金だけを右揃えにします。
.price-table th:nth-child(2),
.price-table td:nth-child(2) {
text-align: right;
}nth-child(2)は、各行の2番目のセルを選びます。金額や数量など桁を見比べるデータでは、右揃えが適しています。
マウスを重ねた行を強調する
行数が多い表では、マウスを重ねた行の背景色を変えると、今読んでいる位置が分かりやすくなります。
.price-table tbody tr:hover {
background-color: #dbeafe;
}:hoverは、ポインターが要素の上にある状態を選ぶ疑似クラスです。スマートフォンにはマウス操作がないため、交互の背景色など、hoverがなくても行を追えるデザインを残してください。
colspanとrowspanでセルを結合する
複数のセルを1つにまとめたいときは、HTMLのcolspan属性またはrowspan属性を使います。CSSではなく、結合するセルの開始タグに属性を記述します。
colspanで横方向のセルを結合する
colspan="2"は、そのセルを横方向の2列分に広げる指定です。次の例では「基本情報」が「氏名」と「年齢」の2列にまたがります。
<table>
<tr>
<th colspan="2" scope="colgroup">基本情報</th>
</tr>
<tr>
<th scope="col">氏名</th>
<th scope="col">年齢</th>
</tr>
<tr>
<td>山田 花子</td>
<td>28歳</td>
</tr>
</table>結合した行ではthが1個ですが、2列分を占めています。その下の行は通常どおり2個のセルを記述します。
rowspanで縦方向のセルを結合する
rowspan="2"は、そのセルを縦方向の2行分に広げます。次の例では「東京」が2つの店舗行にまたがります。
<table>
<tr>
<th scope="col">地域</th>
<th scope="col">店舗</th>
</tr>
<tr>
<th rowspan="2" scope="rowgroup">東京</th>
<td>新宿店</td>
</tr>
<tr>
<td>渋谷店</td>
</tr>
</table>2行目に「東京」をもう一度書かない点に注意してください。結合数と実際の行・列の数が合わないと表がずれるため、複雑な結合は必要な箇所だけに使います。
スマートフォンでtableを見やすくする
列数の多い表は、スマートフォンの画面幅へ無理に縮めると文字が細かくなります。基本的には表の外側を要素で囲み、横方向へスクロールできるようにする方法が安全です。
先ほどのHTMLでは、表を<div class="table-scroll">で囲みました。その要素へ次のCSSを追加します。
.table-scroll {
max-width: 100%;
overflow-x: auto;
overscroll-behavior-inline: contain;
}
.price-table {
min-width: 560px;
}overflow-x: autoは、内容が横幅からはみ出した場合だけ横スクロールを表示する指定です。min-widthで表の最低幅を保つため、セルが狭くなりすぎません。
列を縦に並べ替えるカード型の表示もありますが、見出しとデータの対応が変わり、HTMLやアクセシビリティが複雑になります。まずは表の構造を保った横スクロールから試すのがおすすめです。
読みやすく伝わる表にするポイント
captionで表の内容を伝える
captionは表のタイトルです。「料金表」や「2026年8月の営業時間」のように、表だけを見ても内容が分かる名前を付けます。
画面上にタイトルが不要だからと、意味のない文字列にしたり削除したりするのではなく、ページ内の見出しと重複しないかを考えて適切に使い分けます。
見出しセルにはthを使う
すべてのセルをtdで作り、CSSだけで太字にしても、見出しという意味は伝わりません。列名や行名にはthを使い、必要に応じてscopeで対応範囲を示します。
色だけで情報を区別しない
おすすめプランを背景色だけで示すと、色の違いを認識しにくい人へ情報が伝わらない場合があります。「おすすめ」という文字やアイコンも併用してください。
薄い背景色に薄い文字を重ねると読みにくくなります。特に見出し行では、背景色と文字色の明暗差を確保しましょう。
tableが崩れる・CSSが効かないときの確認点
trごとのth・tdの数が合っているか- 開始タグと終了タグの対応が抜けていないか
colspan・rowspanの数と実際のセル数が合っているかstyle.cssのファイル名とlink要素のパスが一致しているか- HTMLのクラス名とCSSのセレクターが一致しているか
- 後から書いたCSSでスタイルが上書きされていないか
表が斜めにずれる場合は、同じ表の中で行ごとのセル数が異なっていないかを最初に確認します。セル結合を使っている場合は、結合した分だけ後続のセルを減らす必要があります。
CSS全体が反映されない場合は、ブラウザの開発者ツールを使う前に、ファイルの保存忘れと読み込みパスを確認しましょう。CSSの確認方法は次の記事で詳しく解説しています。
HTMLとCSSのtableでよくある疑問
tableにborder属性を書いてもよいですか？
現在は、罫線の見た目をHTMLのborder属性ではなくCSSで指定します。HTMLは表の構造、CSSは色・線・余白というように役割を分けると、デザインを変更しやすくなります。
theadやtbodyは省略できますか？
簡単な表ではtrを直接記述できる場合もありますが、見出しとデータ部分を明確に分けるため、この記事のようにtheadとtbodyを使う書き方がおすすめです。CSSでも各部分を選びやすくなります。
表の中で改行できますか？
thやtdの中には通常の文章やリンクを入れられます。文中の適切な位置で明示的に改行したい場合はbr要素を使えますが、列幅に合わせた自然な折り返しで十分なら追加する必要はありません。
表を中央に配置するにはどうしますか？
表に幅または最大幅を指定し、margin-inline: autoを加えます。セル内の文字を中央揃えにするtext-align: centerとは役割が異なる点に注意してください。
まとめ
HTMLの表は、tableの中に行を表すtrを作り、見出しセルのthとデータセルのtdを並べるのが基本です。caption、thead、tbodyも使うと、表の意味を分かりやすく伝えられます。
CSSでは、まずborder-collapse、border、paddingを指定して読みやすくします。列数が多い表は、スマートフォンで横スクロールできるようにして、表の構造と文字サイズを保ちましょう。