【HTML】tableの基本の書き方、 CSSによる修飾も解説｜HTML＆CSS入門講座（19）

【HTML】tableの基本の書き方、 CSSによる修飾も解説｜HTML＆CSS入門講座（19）のPodcast

下記のPodcastは、Geminiで作成しました。

ストーリーブック

はじめに

HTMLにおけるテーブル（表）の作成は、単にデータを格子状に並べるだけではなく、情報の相関関係を論理的に構造化し、あらゆるユーザーやデバイスに対して適切に情報を伝えるための重要な技術です。ウェブサイトの多機能化が進む2025年現在、テーブルは単なる情報の提示手段を超え、アクセシビリティやレスポンシブデザインの観点から非常に高度な設計が求められるようになっています。本講座では、初心者の方にも分かりやすく、最新のウェブ標準に基づいたテーブルの構築方法とCSSによる装飾技術を詳しく解説します。

テーブル作成の基本となる要素

テーブルを作成するための基本は、親子関係を持つ複数のタグを正しく組み合わせることにあります。HTML5および現在のLiving Standardにおいて、テーブルは情報の二次元的な関係性を示すために存在しており、レイアウト目的での使用は厳禁とされています。

根幹をなす4つのタグとその役割

テーブルを構成する最小単位は、主に以下の4つの要素で構成されます。これらは入れ子構造になっており、順番を間違えると正しく表示されません。

`<table>`要素

すべてのテーブルコンテンツを包む、表全体のコンテナです。この要素が「ここからここまでは表である」という範囲を定義し、表全体のフォーマット文脈を確立します。

`<tr>`要素（Table Row）

「行」を定義するための要素です。テーブルは上から下へと行を積み重ねることで構成されるため、このタグの中にその行に含まれるセルを横並びに配置していきます。

`<th>`要素（Table Header）

「見出しセル」を定義します。その列や行がどのような種類のデータを示しているかを記述するためのもので、デフォルトでは太字かつ中央揃えで表示されるのが一般的です。

`<td>`要素（Table Data）

「データセル」を定義します。実際の数値や名称などの具体的な情報を格納する、表の最小単位のコンテナです。

基本的な記述例としては、まず`<table>`の中に`<tr>`を書き、その中に必要な数だけの`<th>`や`<td>`を記述するという流れになります。この構造を繰り返すことで、縦横に整列したデータ表が完成します。

セマンティクスを高める構造化要素

データ量が多くなったり、表の構造が複雑になったりする場合は、表の各部位に論理的な役割を与える「構造化要素」の使用が推奨されます。これらを使用することで、ブラウザやスクリーンリーダーに対して、表のどの部分が見出しで、どの部分が本体であるかを明確に伝えることができます。

これらの要素を活用することで、CSSでのスタイリングが容易になるだけでなく、印刷時にヘッダーを各ページに繰り返すといった高度な制御も可能になります。

セルの結合と詳細な制御

表の項目によっては、複数のセルを一つにまとめて表示したい場合があります。これを実現するのがcolspanとrowspanという属性です。これらは`<th>`または`<td>`タグに対して直接記述します。

水平・垂直方向の結合

水平方向の結合（colspan）

複数の「列」をまたいで一つのセルを表示させる際に使用します。例えば、colspan="2"と指定すると、そのセルは右隣のセルを飲み込み、2列分の幅を占有します。

垂直方向の結合（rowspan）

複数の「行」をまたいで表示させる際に使用します。rowspan="3"と指定すれば、そのセルは下方向の2行分を含めた合計3行分の高さを持ちます。

これらの結合を行う際は、結合された領域に本来存在するはずだった他の`<td>`や`<th>`タグを削除しなければ、表のレイアウトが崩れてしまう点に注意が必要です。ブラウザはソースコードの記述順にセルを埋めていくため、結合によって「占有済み」となった場所には新しいセルを配置できないというルールがあります。

列単位の一括指定（colgroupとcol）

特定の列全体に対して特定の背景色を付けたり、幅を固定したりしたい場合、各行のセルに一つずつクラスを指定するのは非常に手間がかかります。このような場合に便利なのが`<colgroup>`要素です。

`<col>`要素

各列に対応する要素で、これを用いることで1列目、2列目といった列単位でのスタイル適用が可能になります。

span属性

複数の列を一つのグループとして扱いたい場合に`<col span="2">`のように記述します。これにより、CSSでのメンテナンス性が飛躍的に向上し、より簡潔なコードでテーブルのデザインを管理できるようになります。

CSSによるテーブルの装飾：2025年のスタンダード

HTMLで作成したテーブルは、そのまだと枠線が二ほどに見えたり、余白がなかったりと、視認性が高くありません。現代のウェブ開発において、見た目の制御はすべてCSSで行うことが鉄則です。

枠線の基本設定：border-collapse

テーブルのデザインにおいてもっとも重要なプロパティはborder-collapseです。デフォルトの状態では、テーブル全体の枠線と各セルの枠線が独立しているため、線が重なって太く見えたり、隙間が空いて見えたりします。

border-collapse: collapse;

隣接するセルの枠線を重ねて一本の線にする設定です。現代の多くのウェブサイトではこの設定が採用されており、すっきりとした清潔感のあるデザインになります。

border-collapse: separate;

枠線を分離させたままにする設定です。この場合、border-spacingプロパティを併用することで、セル同士の距離をピクセル単位で微調整できます。

余白と配置の最適化

読みやすいテーブルを作るためには、セル内の余白（padding）を十分に確保することが重要です。文字が枠線に近すぎると、情報の読み取りが困難になります。また、データの種類に応じてテキストの配置を調整することも一般的です。

左揃え（text-align: left;）：名称や文章など、一般的なテキスト情報に適しています。

右揃え（text-align: right;）：金額や数量などの数値データに適しています。桁数を揃えることで、視覚的に比較しやすくなります。

中央揃え（text-align: center;）：アイコンや記号、または短い見出しなどに適しています。

読みやすさを劇的に向上させる「ゼブラストライプ」

データ行数が多いテーブルでは、一行おきに背景色を変える「ゼブラストライプ」という手法が非常に有効です。これは、ユーザーの視線が横一行を追いやすくするための視覚的なガイドとなります。

css

tbody tr:nth-child(odd) {
  background-color: #f2f2f2; /* 奇数行の背景を薄いグレーに */
}

この修飾は、CSSの疑似クラス:nth-child(odd)（奇数）や:nth-child(even)（偶数）を使用することで、HTML側にクラスを書き込むことなく自動的に適用できます。動的に行が追加・削除されるテーブルであっても、常に交互の色が維持されるため非常に効率的です。

アクセシビリティ：誰もが情報を得られるテーブルへ

ウェブアクセシビリティとは、高齢者や障害のある方を含む、あらゆる人々がウェブサイトの情報にアクセスできるようにすることです。テーブルは情報の関係性が複雑であるため、特に配慮が必要です。

scope属性の重要性

スクリーンリーダー（画面読み上げソフト）を使用しているユーザーにとって、格子状のデータを一つひとつ読み上げる際に、そのセルがどの見出しに属しているかを把握するのは困難です。これを助けるのがscope属性です。

`<th scope="col">`：そのセルが「列」の見出しであることを示します。

`<th scope="row">`：そのセルが「行」の見出しであることを示します。

この属性を記述することで、スクリーンリーダーは「氏名：山田太郎、年齢：25歳」といった形で、見出しとデータを結びつけて読み上げることが可能になります。これは現代のコーディングにおいて必須の習慣と言えます。

複雑な表におけるidとheadersの活用

複数のヘッダーが重なっているような非常に複雑な表の場合、scope属性だけでは不十分なことがあります。その場合は、各見出し（`<th>`）にidを付与し、各データセル（`<td>`）のheaders属性に関連するidを列挙することで、プログラム的に完全な関連付けを行うことができます。ただし、この方法は管理が煩雑になるため、可能な限りテーブル構造をシンプルに保つことが推奨されています。

2025年におけるレスポンシブデザインの最適解

スマートフォンの小さな画面で、横に長いテーブルをどう表示させるかはウェブ制作者にとっての大きな課題です。2025年現在、主に以下の3つの手法が推奨されています。

1. 横スクロールの導入

もっとも一般的で安全な手法は、テーブルを特定のコンテナで囲み、そのコンテナに対して横スクロールを許可することです。これにより、表全体のレイアウトを崩さずに情報を提供できます。

css

   .table-container {
     width: 100%;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch; /* iOSでの滑らかな操作感 */
   }

この際、tabindex="0"をコンテナに付与することで、キーボード操作のみを行っているユーザーもスクロール領域にアクセスできるよう配慮することが望ましいです。

2. 表示形式の切り替え（スタック表示）

画面幅が非常に狭い場合、メディアクエリを使用してテーブルの要素（`<tr>`や`<td>`など）をすべてdisplay: block;に変更し、縦に積み上げる手法があります。この際、本来の見出し行を隠し、CSSの::before疑似要素とdata-label属性を組み合わせて、各データの横にラベルを表示させることで、モバイル専用のカード型レイアウトを実現できます。

3. スティッキーヘッダーによる視認性の確保

長い表をスクロールする際、見出し行が画面から消えてしまうと、データの意味がわからなくなってしまいます。CSSのposition: sticky;を使用すれば、表の見出しを画面上部に固定したままスクロールさせることが可能です。

css

   thead th {
     position: sticky;
     top: 0;
     z-index: 2;
     background-color: #fff; /* 背後のデータが透けないように背景色を指定 */
   }

この技術は現代のほぼすべての主要ブラウザでサポートされており、ユーザー体験を大幅に向上させることができます。

非推奨となった古い属性と注意点

以前のHTMLでは広く使われていた属性の多くが、現在は非推奨（Deprecated）となっており、使用を避けるべきです。これらはデザインをHTMLに直接書き込む手法であり、現在の「構造とデザインの分離」という原則に反するためです。

また、初心者が陥りやすいミスとして「全角スペース」の使用が挙げられます。HTMLコード内の属性の間やタグの間全角スペースを入れると、エラーの原因になったり、予期せぬ空白がページ上に表示されたりすることがあります。空白を入れる場合は必ず半角スペースを使用し、大きな余白が必要な場合はCSSのpaddingやmarginで制御するようにしてください。

結論

テーブルの作成は、適切なHTMLタグの選択から始まり、CSSによる視覚的な整理、そしてレスポンシブ環境やアクセシビリティへの配慮まで多岐にわたります。2025年の最新基準においては、単に「見える」だけでなく、「どのような環境でも正しく意味が伝わる」設計が不可欠です。基本となる`<table>`構造を理解し、最新のCSSプロパティを活用することで、美しく機能的なテーブルを構築することができます。本講座で学んだ知識を活かし、情報の価値を最大限に引き出す表組みを目指してください。

参考資料

1. HTMLTableElement - Web APIs | MDN, https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement

2. HTMLTableSectionElement - Web APIs | MDN, https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableSectionElement

3. HTML table basics - Learn web development | MDN, https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics

4. HTMLTableCellElement: scope property - Web APIs | MDN, https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElement/scope

5. Table accessibility - Learn web development | MDN, https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Table_accessibility

6. Creating Accessible Tables | Assistive Technology Initiative, https://ati.gmu.edu/web-accessibility/ictaccessibilitystandards/creating-accessible-tables/

7. border-collapse - CSS: Cascading Style Sheets | MDN, https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/border-collapse

8. :nth-child() - CSS: Cascading Style Sheets | MDN, https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:nth-child

9. border-spacing - CSS: Cascading Style Sheets | MDN, https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/border-spacing

10. Deprecated HTML5 Tags and Attributes, https://www.doe.mass.edu/nmg/html5-deprecated.html

11. HTML Deprecated Tags - Tutorialspoint, https://www.tutorialspoint.com/html/html_deprecated_tags.htm

12. Deprecated HTML Attributes, https://www.dofactory.com/html/attributes/deprecated

13. Deprecated HTML Attributes - W3Docs, https://www.w3docs.com/learn-html/deprecated-html-attributes.html

14. CSS Responsive Tables: Complete Guide with Code Examples for 2025, https://dev.to/satyam_gupta_0d1ff2152dcc/css-responsive-tables-complete-guide-with-code-examples-for-2025-225p

15. Adding a caption to your table with , https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Table_accessibility

16. Styling tables - Learn web development | MDN, https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Tables

17. Zebra Stripe HTML Tables with CSS - WPShout, https://wpshout.com/snippets/zebra-stripe-html-tables-with-css/

18. Zebra Tables - A List Apart, https://alistapart.com/article/zebratables/

19. Zebra tables using nth-child and hidden rows, https://christianheilmann.com/2013/12/12/zebra-tables-using-nth-child-and-hidden-rows/

20. Zebra-striping in dynamic table - User Experience Stack Exchange, https://ux.stackexchange.com/questions/48600/zebra-striping-in-dynamic-table

21. tfoot - XHTML Reference - XStandard, https://xstandard.com/en/articles/xhtml-reference/tfoot/

22. How to Create an HTML Table with Fixed Header and Scrollable Body? Step-by-Step Guide, https://wpdatatables.com/html-table-with-fixed-header-and-scrollable-body/

23. Visual layout of table contents - MDN, https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/table

24. Are HTML tables still relevant for accessibility? - Reddit, https://www.reddit.com/r/accessibility/comments/1ov720h/are_html_tables_still_relevant_for_accessibility/

25. Responsive Table Design - Oracle Content Management, https://docs.oracle.com/en/cloud/paas/content-cloud/creating-experiences/responsive-table-design.html

26. Responsive Data Tables - NPR Visuals Team, https://blog.apps.npr.org/2014/05/09/responsive-data-tables.html

27. Responsive Table Layout - All Things Smitty, https://allthingssmitty.com/2016/10/03/responsive-table-layout/

28. How To Create a Responsive Table in CSS? - GeeksforGeeks, https://www.geeksforgeeks.org/html/how-to-create-a-responsive-table-in-css/

29. HTMLに全角スペースを入れてはいけない理由と対策, https://web-camp.io/magazine/archives/78354/

30. HTMLの全角スペース入力が非推奨な理由, https://webliker.info/html/03847/

31. Web Standards Design Guide: Tables - BIA, https://www.bia.gov/webstandards/design/accessibility/tables

32. Digital Accessibility: Tables - Texas Tech University, https://www.ttu.edu/accessibility/digital-accessibility/accessibility-topics/tables.php

33. Table structuring with head, body, and footer - MDN, https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Table_accessibility

34. Data Tables - WebAIM, https://webaim.org/techniques/tables/data

35. Tables Tutorial | Web Accessibility Initiative (WAI) | W3C, https://www.w3.org/WAI/tutorials/tables/

36. Create Responsive Table with Sticky Header using HTML & CSS, https://www.sevensquaretech.com/create-responsive-table-sticky-header-html-css/

37. CSS position:sticky browser support - Can I use, https://caniuse.com/css-sticky

38. ウェブアクセシビリティ最新基準（JIS改正対応）, https://www.connecty.co.jp/topics/dx/20251210162625.html