【HTML Living Standard】table要素の使い方
table要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
tableオブジェクトは、表形式のデータを表現するためのHTML要素です。この要素は、情報を行と列に整理して表示する際に使用されます。例えば、製品の価格リストや統計データなど、構造化されたデータをウェブページ上で視覚的に分かりやすく提示するために不可欠です。
table要素内には、表全体のタイトルを表すcaption要素を含めることができ、これにより表の内容を簡潔に説明できます。また、表の構造を明確にするために、thead（ヘッダー行グループ）、tbody（データ行グループ）、tfoot（フッター行グループ）といった要素を配置することが推奨されます。これらのグループ要素の中には、表の行を定義するtr要素が配置されます。さらに、tr要素の中には、ヘッダーセルを表すth要素や、データセルを表すtd要素を配置し、個々の情報を格納します。
これらの要素を構造的に適切に用いることで、ウェブページのコンテンツが持つ意味を明確にし、スクリーンリーダーなどの補助技術を使用するユーザーにとっても内容が理解しやすくなります。table要素は、データを表として表現することに特化しており、ウェブページのレイアウトを整える目的で使用することは推奨されません。現代のウェブ開発では、レイアウトはCSS（Cascading Style Sheets）を用いて制御することが標準的なプラクティスです。データの意味構造を保ちつつ、見た目のデザインはCSSに任せることで、より柔軟でアクセシブルなウェブページを作成できます。
構文(syntax)
1<table> 2 <thead> 3 <tr> 4 <th>列ヘッダー1</th> 5 <th>列ヘッダー2</th> 6 </tr> 7 </thead> 8 <tbody> 9 <tr> 10 <td>行1データ1</td> 11 <td>行1データ2</td> 12 </tr> 13 <tr> 14 <td>行2データ1</td> 15 <td>行2データ2</td> 16 </tr> 17 </tbody> 18</table>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTMLテーブルとボーダーを設定する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTMLテーブルとボーダーのサンプル</title> 7 <style> 8 /* 9 * CSSを使用してテーブル、ヘッダーセル、データセルにボーダーを設定します。 10 * HTML5 (Living Standard) では、<table>要素のborder属性は非推奨であり、 11 * CSSでの設定が推奨されます。 12 */ 13 table, th, td { 14 border: 1px solid black; /* 1ピクセル幅の実線ボーダー、色は黒 */ 15 } 16 17 /* 18 * border-collapseプロパティにより、隣接するセルのボーダーが結合され、 19 * 二重線ではなく単一線として表示されます。 20 */ 21 table { 22 border-collapse: collapse; 23 width: 80%; /* テーブルの幅を80%に設定 */ 24 margin: 20px auto; /* テーブルを中央に配置し、上下に余白を設定 */ 25 } 26 27 /* ヘッダーセルとデータセルのパディングとテキスト配置 */ 28 th, td { 29 padding: 8px; /* セルの内側の余白 */ 30 text-align: left; /* テキストを左寄せ */ 31 } 32 33 /* テーブルヘッダーの背景色 */ 34 th { 35 background-color: #f2f2f2; 36 } 37 </style> 38</head> 39<body> 40 41 <!-- シンプルなHTMLテーブルの例 --> 42 <table> 43 <!-- テーブルのヘッダー部分 --> 44 <thead> 45 <tr> 46 <th>製品名</th> 47 <th>価格</th> 48 <th>在庫数</th> 49 </tr> 50 </thead> 51 <!-- テーブルのボディ部分 --> 52 <tbody> 53 <tr> 54 <td>ノートPC</td> 55 <td>120,000円</td> 56 <td>50</td> 57 </tr> 58 <tr> 59 <td>スマートフォン</td> 60 <td>80,000円</td> 61 <td>120</td> 62 </tr> 63 <tr> 64 <td>タブレット</td> 65 <td>50,000円</td> 66 <td>80</td> 67 </tr> 68 </tbody> 69 </table> 70 71</body> 72</html>
HTMLの<table>要素は、データを視覚的に整理し、行と列の形式で表示するための重要な構造要素です。Webページ上で表形式のデータを扱う際に用いられ、システム開発において情報の可読性を高める上で不可欠な存在となります。
この要素は、単独で使用するのではなく、通常はテーブルヘッダーを表す<thead>、テーブル本体を表す<tbody>、行を表す<tr>、ヘッダーセルを表す<th>、データセルを表す<td>といった子要素と組み合わせて具体的な表を作成します。
<table>要素は、プログラミング言語の関数のような「引数」や「戻り値」を直接持ちません。HTMLの要素は、その要素自身の役割を定義し、必要に応じて「属性」によって追加の情報を指定したり、動作を調整したりするものです。
サンプルコードでは、製品情報を行と列で構成された表として表示しています。特に注目すべきは、テーブルの見た目、つまり「ボーダー（罫線）」の設定方法です。かつてHTMLの<table>要素にはborder属性がありましたが、HTML Living Standardではこの属性は非推奨とされています。現代のWeb開発では、デザインに関する設定はCSS（Cascading Style Sheets）で行うことが推奨されており、サンプルコードもそのベストプラクティスに従っています。
CSSでは、table, th, tdセレクタに対してborderプロパティを設定することで罫線を引いています。また、border-collapse: collapse;プロパティを使用することで、隣接するセルのボーダーが二重にならず、単一の線として表示されるように制御しています。これにより、見栄えの良いシンプルな表が実現され、データの構造が明確に伝わるようになります。このように、HTMLでデータの構造を定義し、CSSでデザインを調整するのが現代のWeb開発の基本的な考え方です。
HTMLの<table>要素は表形式のデータを表示するために使用します。特に注意すべきは、テーブルのボーダー設定です。HTML5 (Living Standard) では、<table>タグに直接border属性を記述することは非推奨とされています。
代わりに、CSSのborderプロパティを使用して、table要素だけでなく、th（ヘッダーセル）やtd（データセル）要素にも個別にボーダーを設定するのが正しい方法です。また、隣接するセルのボーダーが二重線になるのを防ぐためには、table要素に対してCSSでborder-collapse: collapse;プロパティを適用することが推奨されます。
このようにCSSでデザインを管理することで、HTMLは構造の定義に専念し、CSSが表現を担当するという役割分担が明確になります。サンプルコードでは<thead>や<tbody>といったセマンティックなタグも使われており、テーブルの構造が分かりやすくなり、可読性やアクセシビリティの向上にも繋がります。
HTML table セル結合を行う
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML table セル結合のサンプル</title> 7</head> 8<body> 9 <h1>商品在庫表 (セル結合の例)</h1> 10 11 <!-- <table>要素は、表形式でデータを表示するために使用します。 --> 12 <!-- セルを結合するには、rowspan（行結合）とcolspan（列結合）属性を使用します。 --> 13 <!-- border="1" は、表に境界線を表示するための属性です。 --> 14 <table border="1"> 15 <thead> 16 <tr> 17 <!-- colspan="2" は、この<th>セルが2つの列にまたがることを意味します。 --> 18 <th colspan="2">製品情報</th> 19 <th>在庫数</th> 20 </tr> 21 </thead> 22 <tbody> 23 <tr> 24 <!-- rowspan="2" は、この<td>セルが2つの行にまたがることを意味します。 --> 25 <td rowspan="2">電子機器</td> 26 <td>スマートフォン</td> 27 <td>100</td> 28 </tr> 29 <tr> 30 <!-- 上の行で「電子機器」セルが2行を結合しているため、この行には「カテゴリ」の<td>は不要です。 --> 31 <td>ノートPC</td> 32 <td>50</td> 33 </tr> 34 <tr> 35 <td rowspan="2">文房具</td> 36 <td>ペン</td> 37 <td>200</td> 38 </tr> 39 <tr> 40 <td>ノート</td> 41 <td>150</td> 42 </tr> 43 <tr> 44 <td rowspan="2">食品</td> 45 <td>パン</td> 46 <td>80</td> 47 </tr> 48 <tr> 49 <td>牛乳</td> 50 <td>30</td> 51 </tr> 52 </tbody> 53 </table> 54</body> 55</html>
HTMLの<table>要素は、ウェブページ上でデータを表形式で表示するために使われます。このサンプルコードでは、特に表のセルを結合する機能について説明しています。
表のセルを横方向（列方向）に結合するにはcolspan属性を、縦方向（行方向）に結合するにはrowspan属性を使用します。これらの属性は、<th>（テーブルヘッダ）や<td>（テーブルデータ）要素に指定できます。
colspan属性の役割は、指定したセルが何列分の幅を占めるかを定義することです。例えば、<th colspan="2">と記述すると、その見出しセルは2つの列にまたがって表示されます。これにより、複数の列に共通するヘッダを作成できます。
rowspan属性の役割は、指定したセルが何行分の高さを占めるかを定義することです。例えば、<td rowspan="2">と記述すると、そのデータセルは2つの行にまたがって表示されます。これにより、複数の行に共通するカテゴリ名などをまとめることが可能です。
これらの属性を使う際は、結合したい列数や行数を数値で指定します。そして、属性を指定したセルが他のセルの領域を覆うため、結合によって不要となるセル（結合対象だった隣接するセル）は記述しないように注意が必要です。
サンプルコード内のborder="1"は、表の各セルに境界線を表示するための属性です。これは見た目を整え、表の構造を分かりやすくするために用いられます。システムエンジニアとして、データを見やすく整理する際にこれらのセル結合は非常に役立ちます。
rowspanやcolspanでセルを結合する際は、結合した分のセルは次の行や列で記述を省略することを忘れないでください。これを誤ると、表のレイアウトが崩れてしまいます。サンプルコードではrowspan="2"の次の行で余分な<td>が省略されている点に注目してください。
また、border="1"のようにHTML属性で見た目を指定する方法は現在非推奨です。スタイルはCSSで適用し、HTMLはデータの構造を示すことに徹するのが正しい作法です。<thead>や<tbody>を用いて表の構造を明確にすることは、アクセシビリティやメンテナンス性を高める上で非常に重要です。
複雑なセル結合は表の構造を把握しにくくし、スクリーンリーダーなどによる読み上げにも影響を与える場合があります。必要最小限に抑え、シンプルな設計を心がけましょう。