table(表組み)に関する要素を覚えよう

表組みを表す要素であるtable要素について解説していきます。

table要素は、表組みを表すものでありレイアウト目的での使用は禁止となりました。

カテゴリー	フローコンテンツパルパブルコンテンツ
コンテンツモデル	次の順番で記述が可能です 1.caption要素（任意で1個） 2.colgroup要素（0個以上） 3.thead要素（任意で1個） 4.tfoot(任意で1個) 5.tbody要素（0個以上）またはtr要素（1個以上） 6.tfoot要素（任意で1個）ただしtfoot要素は合計1つまで

▼colgroupを使用してグループ分けの使用例

&lt;table&gt;
	&lt;caption&gt;表のタイトル&lt;/caption&gt;
	&lt;colgroup&gt;列のグループ&lt;/colgroup&gt;
	&lt;thead&gt;表のヘッダー&lt;/thead&gt;
	&lt;tbody&gt;表の本体&lt;/tbody&gt;
	&lt;tfoot&gt;表のフッター&lt;/tfoot&gt;
&lt;table&gt;

<table>

<caption>表のタイトル</caption>

<colgroup>列のグループ</colgroup>

<thead>表のヘッダー</thead>

<tfoot>表のフッター</tfoot>

<table>

▼table要素に使用できる属性

border	table要素がレイアウト目的で使用されていないことを明示的に表します。空文字か「1」のどちらかを指定可
sortable	表組みが閲覧者によってソート（並び替え）可能であることを表します。
グローバル属性

tableを構成する要素

表組みは、表の大枠、行、セルという、大きく3つの要素で形成されています。

table要素	表組みの大枠を作りその中に構成する要素を配置します。
tr要素	表の「行」を表します。
td要素	表の「セル（データセル）」を表します。
th要素	表の「セル（見出しデータセル）」を表します。

簡単な使用例

&lt;table border="1"&gt;
&lt;caption&gt;野菜の色&lt;/caption&gt;
	&lt;tr&gt;
		&lt;th&gt;ピーマン&lt;/th&gt;
		&lt;th&gt;ニンジン&lt;/th&gt;
		&lt;th&gt;トマト&lt;/th&gt;
		&lt;th&gt;ジャガイモ&lt;/th&gt;
		&lt;th&gt;ナス&lt;/th&gt;
	&lt;tr&gt;
	&lt;tr&gt;
		&lt;td&gt;緑&lt;/td&gt;
		&lt;td&gt;橙&lt;/td&gt;
		&lt;td&gt;赤&lt;/td&gt;
		&lt;td&gt;茶&lt;/td&gt;
		&lt;td&gt;紫&lt;/td&gt;
	&lt;tr&gt;
&lt;/table&gt;

<tr>

<th>ジャガイモ</th>

<tr>

<tr>

</table>

colgroup要素

表の列をグループ化する要素です

使用例（span属性を使用する場合）

&lt;colgroup&gt;
&lt;col&gt;
&lt;col&gt;
&lt;colgroup&gt;

<col>

使用例（col要素を使用しspan属性を使用する場合）

&lt;colgroup&gt;
&lt;col span="列の数"&gt;
&lt;col span="列の数"&gt;
&lt;colgroup&gt;

サンプルコード１

&lt;table border"1"&gt;
&lt;colgroup span="1" style="background-color: pink"&gt;&lt;/colgroup&gt;
&lt;colgroup span="2" style="background-color: green"&gt;&lt;/colgroup&gt;
	&lt;tr&gt;
		&lt;th&gt;見出しデータセル&lt;/th&gt;
		&lt;th&gt;見出しデータセル&lt;/th&gt;
		&lt;th&gt;見出しデータセル&lt;/th&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;td&gt;データセル&lt;/td&gt;
		&lt;td&gt;データセル&lt;/td&gt;
		&lt;td&gt;データセル&lt;/td&gt;
	&lt;/tr&gt;
&lt;/table&gt;

<tr>

<th>見出しデータセル</th>

</tr>

<tr>

<td>データセル</td>

</tr>

</table>

サンプルコード２

HTML

&lt;table border"1"&gt;
&lt;colgroup span="1"&gt;&lt;/colgroup&gt;
&lt;colgroup span="2"&gt;&lt;/colgroup&gt;
	&lt;tr&gt;
		&lt;th&gt;Aグループ人数&lt;/th&gt;
		&lt;th&gt;Aグループ人数（男性）&lt;/th&gt;
		&lt;th&gt;Aグループ人数（女性）&lt;/th&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;td&gt;50人&lt;/td&gt;
		&lt;td&gt;25人&lt;/td&gt;
		&lt;td&gt;25人&lt;/td&gt;
	&lt;/tr&gt;
&lt;/table&gt;

<tr>

<th>Aグループ人数</th>

<th>Aグループ人数（男性）</th>

<th>Aグループ人数（女性）</th>

</tr>

<tr>

</tr>

</table>

CSS

table{
	border-spacing: 0;
	border-collapse: collapse;
}
table th,table td{
	border: 1px solid #ccc;
	text-align: center;
	padding: 5px;
}
table th{
	background: #efefef;
}

table{

border-spacing: 0;

border-collapse: collapse;

}

table th,table td{

border: 1px solid #ccc;

text-align: center;

padding: 5px;

}

table th{

background: #efefef;

}

このように、table要素に関連付いて使用される要素が数多くあります。似たような名前も多いので間違えないように覚えておきましょう。