悩む人HTMLで表を作りたいけれど、tableタグの使い方がいまいち分からない…
そんな悩みをお持ちではありませんか？
初心者の方にとって、tableタグは一見シンプルなようでいて、構造や装飾、正しい使い方を理解するには意外とつまずきやすいポイントがたくさんあります。
また、HTMLだけでなくCSSを組み合わせたデザイン調整も必要になるため、
悩む人どう書けばいいのか分からない
と手が止まってしまう人も多いはずです。
この記事は、HTMLとCSSの基礎を理解しはじめたばかりの初級〜中級のWeb制作者・学習者に向けて、tableタグの正しい書き方から、デザインの工夫、現場で役立つ活用例までを丁寧に解説します。
まずは、tableタグの基本から一緒に押さえていきましょう！
かすがHTMLの書き方を初心者の方向けにわかりやすく解説している以下の記事もぜひチェックしてみてくださいね！
tableタグの基本構造と、表を構成する各HTMLタグの役割- 表の見た目を整えるための、CSSによる基本的な装飾方法
colspan・rowspanを使ったセルの結合テクニック- 制作現場で意識すべきtableタグの正しい使い方と注意点
- 実際のWebデザインで使える、テーブルのカスタマイズ事例4選
tableタグの基本を確認
Webページでデータを見やすく整理して表示したいときに活躍するのが、HTMLのtableタグです。
日程表、料金表、比較表など、情報を「表形式」で伝えたい場面において、このタグは非常に便利です。
ここでは、tableタグの役割や使われる場面を紹介しながら、なぜこのタグが今もWeb制作で重宝されているのかを掘り下げていきましょう。
1.tableタグ：表を定義
tableタグは、HTMLで表（テーブル）を作る際の親要素となるタグです。このタグを使うことで、複数の行と列で構成されるデータを整理して表示できます。
以下は基本的な使用例です。
<table>
<!-- 行やセルをここに記述 -->
</table>
このように、<table>タグの中に、後述するtr・th・tdタグを組み合わせて表を構成していきます。
2.trタグ：行を定義
trタグは「table row」の略で、1行分のデータをまとめるために使用します。テーブルの中では、複数のtrタグを使って複数行の表を作ることが一般的です。
<table>
<tr>
<!-- セルをここに記述 -->
</tr>
</table>
各行の中に、セル（thやtd）を配置していきます。
3.thタグ：見出しセルを定義
thタグは「table header」の略で、表の見出し（ヘッダー）となるセルを定義します。
見出しセルはデフォルトで太字かつ中央揃えで表示され、内容のカテゴリを示す役割を担います。
<table>
<tr>
<th>商品名</th>
<th>価格</th>
</tr>
</table>
上記の例では、「商品名」と「価格」が列の見出しとして表示されます。
4.tdタグ：表のデータセルを定義
tdタグは「table data」の略で、実際のデータを表示するセルを表します。trタグの中でtdを並べることで、1行の各列にデータを配置します。
<table>
<tr>
<td>りんご</td>
<td>150円</td>
</tr>
</table>
この例では、りんごという商品とその価格が1行で表示されます。
5.theadタグ：テーブルのヘッダーを定義（任意）
theadタグは、表の中で見出し行（ヘッダー部分）をグループ化するためのタグです。構造を明確にするためや、CSS・JavaScriptでの操作対象を分けるために使います。
<table>
<thead>
<tr>
<th>商品名</th>
<th>価格</th>
</tr>
</thead>
</table>
このように使うことで、視覚的にもコード上でも「見出し部分」が明確になります。
6.tbodyタグ：テーブルのボディを定義（任意）
tbodyタグは、表のメインとなるデータ部分をグループ化するタグです。theadやtfootとセットで使うことで、表の構造がさらにわかりやすくなります。
<table>
<tbody>
<tr>
<td>りんご</td>
<td>150円</td>
</tr>
</tbody>
</table>
複数のデータ行が続く場合にも、このタグで囲むと整理しやすくなります。
7.tfootタグ：テーブルのフッターを定義（任意）
tfootタグは、表の最後に配置されるフッター部分を定義します。合計金額や備考など、データのまとめを記述するのに適しています。
<table>
<tfoot>
<tr>
<td>合計</td>
<td>450円</td>
</tr>
</tfoot>
</table>
スクロールするテーブルなどで、フッターを固定表示したい場合にもこのタグは活躍します。
tableタグの基本的なCSSでの装飾4つ
HTMLのtableタグだけで表を作成しても、デフォルトの状態では視認性に欠けることが多いです。情報は整っていても、見た目が整っていなければユーザーにとって親切なUIとは言えません。
ここでは、tableタグの見た目を整えるために最低限押さえておきたいCSSの装飾プロパティを4つ厳選して紹介します。
視覚的に読みやすい表を作るための第一歩として、ぜひ活用してみてください。
1.borderプロパティ：枠線をつける
表の各セルに枠線を表示したい場合、まず使いたいのがborderプロパティです。これを設定することで、テーブル全体や各セルに線を表示でき、表としての視認性が一気に高まります。
See the Pen 「html table 使い方」borderプロパティ：枠線をつける by kasuga (@kntkfmgf-the-vuer) on CodePen.
このようにtable、th、tdすべてに対してborderを適用するのが一般的です。これにより、すべてのセルに均一な枠線が付きます。線の太さや色は目的に応じて調整可能です。
2.border-collapseプロパティ：枠線の間隔を設定
border-collapseプロパティは、隣り合うセルの枠線を「まとめて表示する」か「分けて表示する」かを決めるためのCSSです。
以下に「border-collapse」プロパティの主な値とその説明を、表形式でわかりやすくまとめました。
| 値 | 説明 |
|---|---|
collapse | 隣接するセルの枠線を結合（重なった線を1本に）して表示する。一般的によく使われる。 |
separate（デフォルト） | セルの枠線を個別に分けて表示する。セル同士に隙間（セル間スペース）が生じる。 |
inherit | 親要素のborder-collapseの値を継承する。 |
デフォルトではセルごとに個別の線が表示され、二重線のように見えることがあります。それを防ぐために、以下のように設定します。
See the Pen 「html table 使い方」borderプロパティ：枠線をつける by kasuga (@kntkfmgf-the-vuer) on CodePen.
このように設定することで、セルの境界線が一体化し、すっきりした見た目になります。表のデザインに統一感を持たせたいときは、必ず適用しましょう。
3.backgroundプロパティ：背景色の設定
表の行やセルに背景色を設定することで、情報を強調したり、可読性を高めることができます。特にthタグには背景色を付けて見出しであることを視覚的に示すと効果的です。
See the Pen 「html table 使い方」backgroundプロパティ：背景色の設定 by kasuga (@kntkfmgf-the-vuer) on CodePen.
このように設定すると、見出し行の背景色が変わり、データ行との区別がつきやすくなります。また、特定の行や列だけを目立たせたい場合にも、背景色を活用することで情報の強調ができます。
4.paddingプロパティ：セルの余白を設定
paddingはセル内のテキストと枠線との間に余白をつけるためのプロパティです。余白がないと文字が詰まって見え、読みにくくなってしまいます。
See the Pen 「html table 使い方」backgroundプロパティ：背景色の設定 by kasuga (@kntkfmgf-the-vuer) on CodePen.
このように適切な余白を設けることで、文字が窮屈にならず、表全体の印象も落ち着いたものになります。デザインにこだわるのであれば、この細かい部分まで意識すると仕上がりが一段と良くなります。
これら4つの基本プロパティを活用するだけでも、テーブルの視認性や印象は格段に向上します。CSSの細かな調整次第で、単なるデータ表が洗練されたUI要素に変化するのです。
tableのセルを結合する
表を作成していると、「このセルは横に2列分結合したい」「ここは上下に1つのセルでまとめたい」といった場面によく出くわします。
そのようなときに活用できるのが、colspanとrowspanという属性です。これらを使えば、セルの結合を簡単に実現でき、より柔軟で見やすいレイアウトが可能になります。
1.colspan：列を結合する
colspan属性は、横方向（列）にセルを結合するために使います。たとえば、表の最上部に「タイトル」などの項目を横一列で表示したい場合に便利です。
以下は2列を結合した例です。
See the Pen 「html table 使い方」paddingプロパティ：セルの余白を設定 by kasuga (@kntkfmgf-the-vuer) on CodePen.
このように、colspan="2"を指定することで、1つのセルが2列分の幅を持つようになります。列数に応じて値を変更すれば、柔軟な表現が可能です。
2.rowspan：行を結合する
rowspan属性は、縦方向（行）にセルを結合するために使います。あるデータが複数の行にまたがる場合や、分類名などをまとめたいときに重宝します。
以下の例では、1つのカテゴリに属する複数のアイテムをまとめています。
See the Pen 「html table 使い方」colspan：列を結合する by kasuga (@kntkfmgf-the-vuer) on CodePen.
このように設定することで、「果物」というカテゴリが2行にまたがって表示され、データのまとまりが一目で伝わります。
セルの結合を活用することで、表の情報をより整理された形で伝えることができ、見た目も洗練されます。ただし、構造が複雑になりすぎないよう、使いすぎには注意が必要です。
tableタグを使うときのポイント3つ
tableタグは便利な一方で、使い方を誤ると可読性や保守性を損なうこともあります。
特に現代のWeb制作においては、HTMLの意味づけや構造の正確さが求められるため、単に「見た目で整っていればOK」というわけにはいきません。
ここでは、制作現場で押さえておくべきtableタグ利用時の重要なポイントを3つ紹介します。
1.tableタグの装飾は属性ではなくCSSで行う
かつては<table border="1">のようにHTMLの属性で装飾を加える書き方が一般的でしたが、現在では非推奨です。表の見た目に関する調整は、すべてCSSで行うのが基本となっています。
属性を使ったNGな例：
See the Pen 「html table 使い方」rowspan：行を結合する by kasuga (@kntkfmgf-the-vuer) on CodePen.
CSSを使ったOKな例：
See the Pen 「html table 使い方」borderプロパティ：枠線をつける by kasuga (@kntkfmgf-the-vuer) on CodePen.
このようにCSSを使用することで、表のデザインと構造を分離でき、保守性・再利用性の高いコードになります。
かすが属性での装飾方法を紹介している記事がかなりありますが、メンテ性が悪いのでマジでやめましょう！
2.表の構造には積極的にtableタグを使う
「CSSでなんでもレイアウトできる時代だから、tableは使わない」という意見も一部ありますが、本来の意味で表現すべき情報にはtableタグを使うべきです。
複雑なCSSレイアウトで無理やり表のように見せるより、tableタグを正しく使ったほうが、HTMLの意味づけとしても正しく、アクセシビリティの向上にもつながります。
tableタグを使用していないNGな例：
See the Pen 「html table 使い方」tableタグの装飾は属性ではなくCSSで行う（NG例） by kasuga (@kntkfmgf-the-vuer) on CodePen.
一見、表に見えますが、これではスクリーンリーダーなどに「表」であることが認識されず、意味的にも構造的にも適切ではありません。
tableタグを使用したOKな例：
See the Pen 「html table 使い方」borderプロパティ：枠線をつける by kasuga (@kntkfmgf-the-vuer) on CodePen.
このようにマークアップすることで、HTMLの意味が明確になり、ユーザーにも検索エンジンにも正しく内容が伝わります。
かすが一時、tableタグを無駄に避ける風潮がありましたが、それはレイアウトにtableタグを使うのがNGなだけであって、表はtableタグを絶対使うべきですよ！
3.tableタグの入れ子（ネスト）はなるべく避ける
技術的には、tableタグの中にさらにtableを入れる（入れ子にする）ことも可能です。
しかし、これは可読性を著しく低下させるだけでなく、レイアウト崩れやスタイル調整の難しさにもつながります。
避けたい例：
<table>
<tr>
<td>
<table>
<tr><td>入れ子の表</td></tr>
</table>
</td>
</tr>
</table>
このような入れ子構造は、レスポンシブ対応やCSSの設計にも悪影響を及ぼすため、基本的には避けるべきです。複雑なデザインが必要な場合は、CSS FlexboxやGridなど、より適したレイアウト技法を検討しましょう。
かすがtableのネストを紹介している記事も結構ありますが、やめた方が良いです！マジでコードが難解になるので、別のレイアウトで解決できる方法を探しましょう！
正しい使い方を押さえることで、tableタグは今でも非常に強力なツールになります。構造的に正確で、見た目も整った表を目指しましょう。
制作現場で使えるtableのデザインカスタマイズ4つ
Webサイトの見た目にこだわるなら、tableタグのデザインにも工夫を加えたいところです。
特にユーザーにとって重要な情報が詰まった表は、読みやすく視認性の高いスタイルで表示することが求められます。
ここでは、実際の制作現場でも使いやすく、かつユーザビリティに優れたtableのカスタマイズデザインを4つ紹介します。
1.行の線のみのシンプルスタイル
無駄な装飾を省き、横線だけで区切るシンプルなスタイルは、ミニマルなデザインのWebサイトと相性抜群です。以下は行の境界線のみを表示する例です。
See the Pen 「html table 使い方」行の線のみのシンプルスタイル by kasuga (@kntkfmgf-the-vuer) on CodePen.
このデザインは、行ごとの区切りが明確で視線を移動しやすく、ビジネス系や情報系サイトでよく使用されます。
かすが線はth・tdに指定することもできますが、記述が減るのでtrタグに指定しています。
2.ストライプデザインのテーブル
テーブルの偶数行と奇数行に異なる背景色をつけることで、視線のガイドが自然に生まれ、読みやすさが格段に向上します。とくに行数が多い場合におすすめです。
See the Pen 「html table 使い方」行の線のみのシンプルスタイル by kasuga (@kntkfmgf-the-vuer) on CodePen.
このようなストライプデザインは、単調な表にリズムを与える効果もあり、比較表や料金表などで多用されます。
かすがこちらもtrタグに背景色を指定しています。ポイントは擬似クラスtr:nth-child(odd)で奇数行に背景色を指定していることです！
3.料金表のデザイン
価格やプランの比較などを表で見せるときは、強調箇所を明確にすることでコンバージョン率向上にもつながります。見出しに目立つ背景色を加え、注目のセルに強調スタイルを与えると効果的です。
See the Pen 「html table 使い方」行の線のみのシンプルスタイル by kasuga (@kntkfmgf-the-vuer) on CodePen.
このように設定すれば、ユーザーの目線を意図的に誘導でき、強調したい内容をしっかり届けることができます。
かすが簡単な料金表ですが、一工夫加えて左上のセルのボーダーをなしにしています！
4.横スクロールできるテーブル
モバイル端末では、列数の多いテーブルが画面からはみ出してしまうことがあります。そんなときに役立つのが、横スクロールに対応したテーブルです。
See the Pen 「html table 使い方」行の線のみのシンプルスタイル by kasuga (@kntkfmgf-the-vuer) on CodePen.
この方法を使えば、スマートフォンやタブレットでもストレスなく表を閲覧できるようになり、UX（ユーザー体験）の質を高められます。
かすが注意したいのが横スクロールできることをわかりやすく伝えることです。そうしないと気づいてもらえないリスクがあります。
デザイン性と機能性のバランスを意識することで、tableは単なるデータ表示の手段から「魅せるUI要素」に変化します。状況に応じてスタイルを工夫し、ユーザーにとって最適な表現を目指しましょう。
WEBデザイナー・フロントエンドのスキルを確実に身につけたい方へ
「WEBデザインやフロントエンドを学びたい」と思い立ったとき、多くの方がまず独学を選びます。
しかし、独学では「何をどこから学べばいいかわからない」「つまずいたときに誰にも聞けない」といった壁にぶつかることも少なくありません。
一方、スクールで学べば、正しい順序で、現場で使えるスキルを効率よく習得することができます。最短ルートでスキルを身につけたい方には、スクール学習がおすすめです。
かすが私は26歳で印刷業からWEBデザイナーを目指して学び始めましたが、やはり独学に限界を感じ短期スクールで学びました。本気でスキルを身につけたいならスクールはマジで行った方が良いです！
- カリキュラムが体系化されているため、基礎から応用まで無駄なく学べる
- 現役のプロから実践的なフィードバックを受けられる
- わからないことをすぐに質問・解決できる環境がある
- 制作課題を通じて、ポートフォリオが作成できる
- 学習仲間や講師とのつながりが、モチベーション維持につながる
- カリキュラムが現場で必要とされる技術に対応しているか
- 現役デザイナー・エンジニアが講師として在籍しているか
- ポートフォリオ制作のサポートが充実しているか
- 卒業後の就職・転職支援が用意されているか
- オンライン・通学など、自分の生活スタイルに合った受講形式か
遠回りせず、確実にスキルを身につけたいなら、プロに教わるのが一番の近道です。
WEBデザイナー・フロントエンドエンジニアとして一歩踏み出したいあなたにぴったりのスクールを、下記の記事でご紹介しています。ぜひチェックしてみてください。
tableタグまとめ
HTMLのtableタグは、構造化されたデータを視覚的にわかりやすく伝えるために欠かせない要素です。この記事では、基本構造から装飾、応用的なデザインまで、幅広く解説しました。
最後に、これまでのポイントを整理して振り返っておきましょう。
tableタグ：表全体を囲む親要素trタグ：表の1行を定義thタグ：見出しセル。中央揃えで太字がデフォルトtdタグ：データセルthead・tbody・tfoot：表の構造を分かりやすくするためのグループ化（任意）
border：枠線を表示してセルを区切るborder-collapse：枠線の間隔を詰めて一体化background：見出しやセルの背景色設定に活用padding：セル内に余白をつけ、文字を読みやすくする
- 装飾はHTML属性ではなくCSSで行うのが現代の基本
- 本来「表」である情報は素直にtableタグで記述すべき
- 入れ子（ネスト）構造のテーブルは極力避ける。可読性・保守性・レスポンシブ対応の面で不利
- 行だけに横線を引くシンプルスタイル：ミニマルな印象
- ストライプデザイン：交互に背景色を変えて視線誘導
- 料金表スタイル：見出しや強調セルに装飾してコンバージョン促進
- 横スクロール可能なテーブル：スマホ対応に必須のテクニック
tableタグは正しい意味づけとデザインの工夫で、使いやすく美しいUIを実現可能- 構造とスタイルを分けて記述することで、保守性の高いコードになる
- CSSと組み合わせることで、あらゆるデバイスやユーザーに配慮した情報提示が可能になる
構文の理解だけでなく、実際の利用シーンやデザインへの応用を踏まえて使えるようになることが、プロフェッショナルなWeb制作の第一歩です。ぜひ、実際のプロジェクトで積極的に活用してみてください。
