表（テーブル）に関する<table>タグ、関連タグ（tr、th、td、caption、thead、tbody、tfoot、colgroup、col）の基本的な使用方法を掲載
HTML5
対応ブラウザ
カテゴリー・コンテンツモデル
| カテゴリー | コンテンツモデル | |
|
table要素（表を表す） |
|
以下の順番で記述可
|
|
th（表の見出しセルを表す） |
なし |
フローコンテンツ。ただし、header、footer要素、セクショニングコンテンツ、 ヘッディングコンテンツを子孫要素に持つことは不可 |
|
tr要素（表の行を表す） |
なし | 0個以上のtd要素またはth要素 |
|
td要素（表のセルを表す） |
|
tr要素の子要素として |
|
caption要素（表のタイトルを表す） |
なし |
|
|
thead要素（ヘッダー部分の行グループを表す） |
なし | 0個以上のtr要素 |
| tbody要素（本体部分の行グループを表す） | なし | 0個以上のtr要素 |
| tfoot要素（フッター部分の行グループを表す） | なし | 0個以上のtr要素 |
| colgroup要素（列グループを表す） | なし |
|
| col要素（表の列を表す） | なし | 空 |
グローバル属性（共通）
グローバル属性は、すべての要素に指定できる共通の属性のことです。
accesskey（アクセスキー）
要素にアクセスキーを割り当てます。いわゆるショートカットキーになります。
autocapitallze
入力／編集されたとき、入力文字列の先頭大文字化が自動的に行われるかどうかなどを指定します
| 値 | 内容 |
|---|---|
| offまたはnone | 自動的な大文字化は指定しない |
| onまたはsentences | 最初の文字を大文字化する |
| words | 各語の最初の文字を大文字化する |
| characters | すべての文字を大文字化する |
class（クラス）
要素に分類上の名前を指定します。CSSのセレクタで、特定の要素を選択できるようになります。
contenteditable（コンテント・エディタブル）
要素の内容が閲覧者による編集可能かどうか指定します。
| 値 | 内容 |
|---|---|
| trueまたは、空 | 閲覧者による編集可能。 |
| false | 閲覧者による編集不可。 |
data-
カスタムデータ属性、JavaScriptで使用するための独自の属性を指定します。「data-*****=””」のような形式で開発者が自由に指定できます。JavaScriptを利用してデータ処理したり、独自のデータを入力したりするために使用します。
dir（ディレクショナリティ）
要素の内容の書字方向（文字を書き進める方向）を指定します。
| 値 | 内容 |
|---|---|
| ltr | テキストを左から右へ書き進める。「Left to Righ」の略 |
| rtl | 要素は編集不可。「Right to Left」の略 |
| auto | ユーザーエージェントによって自動的に書字方向を決める |
draggable
Drag and Drop APIを使用して要素をドラッグすることができるか指定します。
| 値 | 内容 |
|---|---|
| テキストを左から右へ書き進める。「Left to Righ」の略 | |
| auto | ユーザーエージェントによって自動的に書字方向を決める |
hidden（ヒドゥン）
要素がその時点でのページの内容に関連がないことを表し、指定された要素は表示されません。用途としては、ページ内に表示したくないデータの値などをセットしておき、POSTなどで値を送信する場合などに使用したりします。（商品IDやユーザーID）
id（アイディー）
要素にユニークな識別IDを指定します。文章内で一意である必要があり、同じ値を複数のidに設定することはできません。CSSのセレクタで、特定の要素を選択できるようになります。また、リンクのフラグメント識別子としても利用できます。
空白文字は使用できません。
lang（ランゲージ）
要素の内容の言語を指定します。html要素や文書全体に対して指定することができます。また、一部の要素に対しても指定することができます。
例：lang=”ja”
spellcheck（スペルチェック）
要素の内容に対するスペルチェックの可否を指定します。
| true | スペルチェックをします。 |
| false | スペルチェックをしません。 |
style（スタイル）
要素に直接スタイルシートを指定します。
※style属性でスタイルを指定する方法はあまり推奨されていません。
tabindex（タブインデックス）
「TABキー」による移動順序を指定します。正の数値で指定すると、その順序にフォーカスが移動します。負の数値を指定すると選択することができますが、TABキーでの移動順序に含まれません。また、0を指定した要素は最後にフォーカスします。
title（タイトル）
要素に補足情報を加えます
translate（トランスレート）
翻訳対象にするかどうかを指定します。
| 値 | 内容 |
|---|---|
| yes | 翻訳対象とする |
| no | 翻訳非対象とする |
イベントハンドラ属性は、JavaScriptのコードを閲覧者の操作に合わせて実行する属性です。
onclick
要素をクリックしたときにスクリプトを実行します。
oninput
入力コントロールにデータを入力したときにスクリプトを実行します。
onsubmit
入力コントロールからデータを送信するときにスクリプトを実行します。
table要素
ブロックレベル要素
書式・概要
<table 属性="属性値">～</table >表は、その全体を<table>～</table>で囲います。表内のセルは、th要素またはtd要素としてタグを付けます。th要素の「th」は「table header」の略で、表内で見出しとなるセルについては<th>～</th>で囲います。td要素の「td」は「table data」の略で、見出しではなくデータが入っているセルは<td>～</td>で囲います。
横1列分ずつ<tr>～</tr>で囲ってまとめます。
border属性は、かつては表の枠線の太さをピクセル単位で指定するために使用されていましたが、HTML5以降ではtable要素がレイアウト用に使われているんではないことを示す属性に変更されました。これに伴い、HTML5以降では、border属性の値は「1」にするか「空」にするかのいずれかの指定となります。
音声ブラウザでは表をどのように読み上げるのか？
HTMLのtable要素は表をマークアップするためのもんですが、現実的にはレイアウト目的で使用されることもあります。セルの区切り方によっては、音声ブラウザなどの環境では内容が正しく伝わらない場合があります。
多くの音声ブラウザは、内容を表のソースコード順に、上のセルから順に横1列ずつ左から右へと読み上げいきます。そのため、あるセルの内容が右隣のセルではなく、真下のセルへと続いているよな場合には、内容が正しい順序で読み上げられなくなってしまうのです。テーブルレイアウトをする場合にはこの点に注意が必要です。
使用できる属性
border（ボーダー）
table要素がレイアウト目的で使われていあにことを明示的に表します。空の文字列化、「1」のどちらかを指定できます。
HTML5以前では、枠線の太さをピクセル数で指定するために使われていました。そのため、現在でも一般的なブラウザではこの属性を指定すると枠線を表示します。
HTML5では、表示を制御するための要素と属性は基本的に削除されています。
<table border="0">
</table>sorttable（ソータブル）
テーブルを閲覧者によって並べ替え可能である表であることを表します。
<table sortable>
</table>HTML5で非推奨となった属性（HTML4属性）
align、bgcolor、border、cellpadding、cellspacing、frame、rules、summary、width、height
caption要素-書式・概要
<caption>～</caption>caption要素はテーブルのタイトルを表します。table要素を除くフローコンテンツを含むことができ、タイトルだけではなくテーブルに関する説明を記述できます。
tr要素-書式・概要
<tr>～</tr>テーブルにおける行を表します。
td要素
書式・概要
<td 属性="属性値">～</td>テーブルにおけるセルを表します。
使用できる属性
colspan（カラム・スパン）
結合する列数を指定して、複数の列を結合します。値は正の整数のみ可能です。
<td colspan="2">～</td>rowspan（ロウ・スパン）
結合する行数を指定して、複数の行を結合します。値は「0」または、正の整数のみ可能です。「0」を指定した場合、そのセルが属する行グループの最後の行まで結合します。
<td rowspan="2">～</td>headers（ヘッダーズ）
th要素に与えたid属性値を指定することで、セルと見出しセルを関連付けます。値は半角スペースで区切って複数指定できます。
<td headers="">～</td>th要素
書式・概要
<th 属性="属性値">～</th>th要素はテーブルにおける見出しセルを表します。セル（td要素）と組み合わせたり、colspan属性値やrowspan属性を指定することで、複数列、または複数行を結合したセルを作成できたりします。
使用できる属性
colspan（カラム・スパン）
結合する列数を指定して、複数の列を結合します。値は正の整数のみ可能です。
<td colspan="2">～</td>rowspan（ロウ・スパン）
結合する行数を指定して、複数の行を結合します。値は「0」または、正の整数のみ可能です。「0」を指定した場合、そのセルが属する行グループの最後の行まで結合します。
<td rowspan="2">～</td>headers（ヘッダーズ）
th要素に与えたid属性値を指定することで、セルと見出しセルを関連付けます。値は半角スペースで区切って複数指定できます。
<td headers="">～</td>scope（スコープ）
見出しセルがどの方向のセルに対尾するのか以下のキーワードで指定します。
- col:見出しセルが属する列の下方向のセルに対応
- row:見出しセルが属する行の、該当するセル以降のセルすべてに対応させる。
- colgroup:見出しセルが属する列グループのうち、該当するセル以降のセルすべてに対応する
- rowgroup:見出しセルが属する行グループのうち、該当するセル以降のセルすべてに対応する
- auto:文脈によって自動判定されます。（デフォルト）
abbr（アブリヴィエーション）
見出しセルに入っているテキストの省略形を指定します。見出しセルの内容を短く表す名称を指定する必要があります。
thead要素
書式・概要
<thead>～</thead>thead要素（テーブル・ヘッダー）はテーブルにおける、ヘッダー部分の行グループを表します。
tbody要素-書式・概要
<tbody>～</tbody>tbody要素（テーブル・ボディ）はテーブルにおける、本体部分の行グループを表します。
tfoot要素-書式・概要
<tbody>～</tbody>tbody要素（テーブル・フッター）はテーブルにおける、本体部分の行グループを表します。
colgroup要素
書式・概要
<colgroup 属性="属性値">～</colgroup>colgroup要素（カラム・グループ）はテーブルの列グループを表します。列に対してclass名を与えることが可能で、これをセレクタにしてCSSを適用できます。
使用できる属性
span（スパン）
colgroup要素内にcol要素が１つもない場合に、グループの対象となる列数を指定できます。値は正の整数で指定します。
col要素
書式・概要
<col 属性="属性値">～</col>col要素はテーブルの列を表します。
使用できる属性
span（スパン）
グループの対象となる列数を指定します。値は正の整数で指定します。
<col span="1">～</col>表を作成する。
caption要素で表のタイトルを付けています。th要素で各列の見出しを付けています。table要素のborder属性を指定した場合委は、表は枠線で表示されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>サンプルページ</title>
<meta charset="uft-8"><!-文字コードを指定->
</head>
<body>
<h1>border=0</h1>
<table border="0">
<caption>東部営業所の売上一覧</caption>
<tr>
<th>年月</th><th>酒井営業所</th><th>小湊営業所</th><th>池田営業所</th>
</tr>
<tr>
<td>2022/1</td><td>500万円</td><td>2,100万円</td><td>250万円</td>
</tr>
<tr>
<td>2022/2</td><td>1,500万円</td><td>300万円</td><td>3,500万円</td>
</tr>
<tr>
<td>2022/3</td><td>2,500万円</td><td>1,700万円</td><td>1,500万円</td>
</tr>
</table>
<h1>border=1</h1>
<table border="1">
<caption>東部営業所の売上一覧</caption>
<tr>
<th>年月</th><th>酒井営業所</th><th>小湊営業所</th><th>池田営業所</th>
</tr>
<tr>
<td>2022/1</td><td>500万円</td><td>2,100万円</td><td>250万円</td>
</tr>
<tr>
<td>2022/2</td><td>1,500万円</td><td>300万円</td><td>3,500万円</td>
</tr>
<tr>
<td>2022/3</td><td>2,500万円</td><td>1,700万円</td><td>1,500万円</td>
</tr>
</table>
</body>
</html>実行サンプル
chrome実行サンプル
Firefox実行サンプル
edge 実行サンプル
opera 実行サンプル
セルを横や縦に結合する
rowspan属性やcolspan属性を利用すると、あるセルから指定した個数分のセルをひとつのセルとしてまとめることができます。
東部地区の（th)に対してcolspan=”5″を指定して、１つの列に結合しています。
営業所の（th)に対してcolspan=”2″を指定して、１つ列に結合しています。
年（td)に対してrowspan=”3″を指定して、1つの行に結合しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>サンプルページ</title>
<meta charset="uft-8"><!-文字コードを指定->
</head>
<body>
<table border="1">
<caption>東部営業所の売上一覧</caption>
<tr>
<th colspan="5">東部地区</th>
</tr>
<tr>
<th colspan="2"></th><th>酒井営業所</th><th>小湊営業所</th><th>池田営業所</th>
</tr>
<tr>
<td rowspan="3">2022年</td><td>1月</td><td>500万円</td><td>2,100万円</td><td>250万円</td>
</tr>
<tr>
<td>2月</td><td>1,500万円</td><td>300万円</td><td>3,500万円</td>
</tr>
<tr>
<td>3月</td><td>2,500万円</td><td>1,700万円</td><td>1,500万円</td>
</tr>
</table>
</body>
</html>実行サンプル
chrome実行サンプル
Firefox実行サンプル
edge 実行サンプル
opera 実行サンプル
テーブルのヘッダー・フッター・本体をグループ化する
thead要素、tbody要素、tfoot要素は、いずれも表の横列（tr要素）をグループ化する要素です。グループ化する部分が表のヘッダであればthead要素を、表の本体部分であればtbody要素を、表のフッタであればtfoot要素を使用します。
グループ化しておくことで、そのグループに対してスタイルシートをまとめて適用できるようになります。なお、thead要素とtfoot要素は、ひとつのテーブル内にひとつずつしか配置できません。tbody要素は必要に応じて複数配置することができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>サンプルページ</title>
<meta charset="uft-8"><!-文字コードを指定->
</head>
<body>
<table border="1">
<caption>東部営業所の売上一覧</caption>
<thead>
<tr>
<th colspan="5">東部地区</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="2"></th><th>酒井営業所</th><th>小湊営業所</th><th>池田営業所</th>
</tr>
<tr>
<td rowspan="3">2022年</td><td>1月</td><td>500万円</td><td>2,100万円</td><td>250万円</td>
</tr>
<tr>
<td>2月</td><td>1,500万円</td><td>300万円</td><td>3,500万円</td>
</tr>
<tr>
<td>3月</td><td>2,500万円</td><td>1,700万円</td><td>1,500万円</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">合計</th><th>4,500万円</th><th>4,100万円</th><th>5,250万円</th>
</tr>
</tfoot>
</table>
</body>
</html>実行サンプル
chrome実行サンプル
Firefox実行サンプル
edge 実行サンプル
opera 実行サンプル
縦列をグループ化する
<colgroup span="縦列数">～</colgroup>
<col span="縦列数">
表の列をグループ化するには、colgroup要素を使用します。何列の縦列をグループ化するのかは、span属性で指定します。これによって、複数の縦列に対して、背景や幅などのスタイルシートがまとめて指定できるようになります。
colgroup要素の指定位置は、caption要素の直後で、thead要素、tbody要素、tfoot要素、tr要素よりも前の位置に配置する必要があります。
colgroup要素の内部にcol要素を配置することで、colgroup要素でグループ化した縦列の内部で縦列を個別に扱うことができるようになります。（同じグループ内の縦列に別々のスタイルが適用できます。）
デフォルトではcol要素1つで1つの縦列をわらわしますが、span属性を指定することで2列分以上の縦列をわらすことも可能です。要素内容としてcol要素をいれたcolgroup要素には、span属性は指定できない点が注意です
※colgroup要素の内部にcol要素を配置した場合、colgroup要素にはspan属性を指定できなくなります。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>サンプルページ</title>
<meta charset="uft-8"><!-文字コードを指定->
</head>
<body>
<table border="1">
<caption>東部営業所の売上一覧</caption>
<colgroup class="ym" span="2">
<colgroup>
<col class="sakai" span="1">
<col class="kominato" span="2">
<colgroup>
</colgroup>
<tbody>
<tr>
<th colspan="2"></th><th>酒井営業所</th><th>小湊営業所</th><th>池田営業所</th>
</tr>
<tr>
<td rowspan="3">2022年</td><td>1月</td><td>500万円</td><td>2,100万円</td><td>250万円</td>
</tr>
<tr>
<td>2月</td><td>1,500万円</td><td>300万円</td><td>3,500万円</td>
</tr>
<tr>
<td>3月</td><td>2,500万円</td><td>1,700万円</td><td>1,500万円</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">合計</th><th>4,500万円</th><th>4,100万円</th><th>5,250万円</th>
</tr>
</tfoot>
</table>
</body>
<style type="text/css">
.ym { background-color: #ffe9ea;}
.sakai { background-color: #ffe8fa;}
.kominato { background-color: #f0ffd9;}
</style>
</html>実行サンプル
chrome実行サンプル
Firefox実行サンプル
edge 実行サンプル
opera 実行サンプル
コメント