table要素

このエントリーをはてなブックマークに追加

table要素は表を表現するための要素です。

caption要素colgroup要素thead要素tfoot要素tbody要素tr要素を直接の子要素として持つことができます。

<table>
	<tr>
		<th>見出し1</th>
		<th>見出し2</th>
	</tr>
	<tr>
		<td>内容1</td>
		<td>内容2</td>
	</tr>
</table>

border属性

border属性に1を指定するとレイアウト目的でtable要素が利用されていないことを明示できます。

<table border="1">
	<tr>
		<th>見出し1</th>
		<th>見出し2</th>
	</tr>
	<tr>
		<td>内容1</td>
		<td>内容2</td>
	</tr>
</table>

table要素で利用するborder属性には1か空文字しか指定できませんが、0を指定することでレイアウトテーブルとして利用していることを示すことができます。同様にWAI-ARIAで定義されているrole=”presentation”を指定することでレイアウトテーブルであることを明示することができます。

<table role="presentation">
	<tr>
		<td>左上</td>
		<th>右上</th>
	</tr>
	<tr>
		<td>左下</td>
		<td>右下</td>
	</tr>
</table>

また、2014年2月4日にリリースされたW3Cの仕様では利用可能属性からborder属性は削除されていますが、border属性の利用方法は残ったままです。

sortable属性

現在策定中のHTML5.1ではsortable属性を指定することでソート可能なテーブルであることを明示できます。将来的にはこの属性の指定によりブラウザ側でソート機能が提供される可能性があります。

<table sortable="sortable">
	<tr>
		<th>見出し1</th>
		<th>見出し2</th>
	</tr>
	<tr>
		<td>内容1</td>
		<td>内容2</td>
	</tr>
</table>

参考URL

4.9.1 The table element - HTML5 -W3C
4.9.1 The table element - HTML5.1

登録日 : 2014年03月30日 最終更新日 : 2014年6月29日

同じカテゴリー(テーブル)のエントリー

検索

スポンサードリンク

バージョン

リファレンス