表（テーブル）を定義するtable要素
<table>……</table>

　table要素は、一覧表や年表など表を定義する際に使います。Webページ全体をレイアウトするために使うのは、好ましくありません。構造的に表が必要ない部分では、スタイルシートを使うようにしましょう。

例

野菜	値段	産地
野菜	値段	産地
キャベツ	100円	長野
長ネギ	50円	埼玉

<html>

    <head>

      <title>table要素のサンプル</title>

    </head>

    <body>

      <table>

    

        <thead>

          <tr>

            <th>野菜</th><th>値段</th><th>産地</th>

          </tr>

        </thead>

    

        <tfoot>

          <tr>

            <th>野菜</th><th>値段</th><th>産地</th>

          </tr>

        </tfoot>

    

        <tbody>

          <tr>

            <td>キャベツ</td><td>100円</td><td>長野</td>

          </tr>

          <tr>

            <td>長ネギ</td><td>50円</td><td>埼玉</td>

          </tr>

        </tbody>

    

      </table>

    </body>

    </html>

DOMでの参照方法

[window.]document.getElementById("【ID属性値名】")

オプション属性

属性	値	機能	入力例	DOM参照
align （非推奨属性）	"left" "center" "right"	水平方向の整列方法を指定	`<table align="center">……</table>`	`[window.]document.getElementById("【ID属性値名】").align`
bgcolor （非推奨属性）	頭に「#」を付けた16進数値か、あらかじめ定義されている色名を指定	背景色を指定	`<table bgcolor="red">……</table>`	`[window.]document.getElementById("【ID属性値名】").bgColor`
border	ピクセル値	表を囲む枠線の太さを指定	`<table border="1">……</table>`	`[window.]document.getElementById("【ID属性値名】").border`
cellpadding	ピクセル値、または％値	セルの枠線と内容の距離を指定	`<table cellpadding="3">……</table>`	`[window.]document.getElementById("【ID属性値名】").cellPadding`
cellspacing	ピクセル値、または％値	セルの枠線と外側の距離を指定	`<table cellspacing="3">……</table>`	`[window.]document.getElementById("【ID属性値名】").cellSpacing`
flame	"void" "above" "below" "lhs" "rhs" "hsides" "vsides" "box" "border"	表を囲む枠線を表示させる部分を指定	`<table border="3" flame="void">……</table>`	`[window.]document.getElementById("【ID属性値名】").flame`
rules	"none" "groups" "rows" "cols" "all"	セルの枠線と内容の距離を指定	`<table border="3" rules="groups">……</table>`	`[window.]document.getElementById("【ID属性値名】").rules`
summary	テキスト	表の内容を簡潔に説明。音声や点字のブラウザに表の内容を伝える	`<table summary="この表は、野菜の価格比較をしている表である">……</table>`	－
width	ピクセル値、または％値	表の横幅を指定	`<table width="80">……</table>`	`[window.]document.getElementById("【ID属性値名】").width`

追加が可能なイベントハンドラ属性

onclick、ondblclick、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onkeypress、onkeydown、onkeyup

HTMLタグリファレンスインデックス

有限会社タグパンダ
喜安亮介

2/11

INDEX
Web標準HTMLタグリファレンス（4）アクセシビリティも考慮して表組みするための10のタグテーブル
	table 表（テーブル）を定義するtable要素
	caption 表題を定義するcaption要素
	thead 表のヘッダ部分を定義するthead要素
	tfoot 表のフッタ部分を定義するtfoot要素
	tbody 表のメイン部分を表すtbody要素
	tr 表の行を定義するtr要素
	td 表内の最小単位の枠（セル）を表すtd要素
	th td要素に見出しの意味合いを付加するth要素
	colgroup 表の列を構造的にグループ分けするcolgroup要素
	col 列のスタイルをまとめて調節するcol要素

HTML5 + UX フォーラム新着記事

GASで棒、円、折れ線など各種グラフを作成、変更、削除するための基本 （2017/7/12）
　資料を作る際に、「グラフ」は必要不可欠な存在だ。今回は、「グラフの新規作成」「グラフの変更」「グラフの削除」について解説する
GET／POSTでフォームから送信された値をPHPで受け取る「定義済みの変数」【更新】 （2017/7/10）
　HTMLのフォーム機能についておさらいし、get/postメソッドなどの内容を連想配列で格納するPHPの「定義済みの変数」の中身や、フォーム送信値の取り扱いにおける注意点について解説します【PHP 7.1含め2017年の情報に合うように更新】
PHPのfor文＆ループ脱出のbreak/スキップのcontinue【更新】 （2017/6/26）
　素数判定のロジックからbreak文やcontinue文の利点と使い方を解説。for文を使ったループ処理の基本とwhile文との違い、無限ループなども併せて紹介します【PHP 7.1含め2017年の情報に合うように更新】
Spreadsheetデータの選択、削除、挿入、コピー、移動、ソート （2017/6/12）
　Spreadsheetデータの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する