表(テーブル)を定義する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

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

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 フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

注目のテーマ

デザインハック 記事ランキング

本日 月間
ソリューションFLASH