table要素 -- 表

基本データ

table要素
文書型 適用 子要素 開始タグ 終了タグ 分類
Strict ○ caption要素 col要素 colgroup要素 thead要素 tfoot要素 tbody要素
(tbody要素が省略され、tr要素が子要素になっているように見える場合があります)		 必須 必須 ブロックレベル要素
Transitional ○
Frameset ○

属性

固有属性

summary="表の概要"
Strict: ○ | Transitional: ○ | Frameset: ○
表の概要を記述します。音声ブラウザなどではsummary属性の値が最初に読み上げられ、表の概要をつかむことができます。必須ではありませんが、できるだけ記述することが望ましいです。
width="幅"
Strict: ○ | Transitional: ○ | Frameset: ○
表の横幅をピクセル値かパーセント値で指定します。
CSSで代用
table { width: 横幅; }
border="外枠の太さ"
Strict: ○ | Transitional: ○ | Frameset: ○
表の枠の太さをピクセル値で指定します。
CSSで代用
table, th, td { border-width: 幅; }
cellspacing="セルとセルの間隔"
Strict: ○ | Transitional: ○ | Frameset: ○
表の外枠とセルの間隔、及びセルとセルの間隔をピクセル値かパーセント値で指定します。
CSSで代用
table { border-spacing: 間隔; }(IEが未対応)
cellpadding="セルの枠と中身の間隔"
Strict: ○ | Transitional: ○ | Frameset: ○
セルの枠とセルの中身との間隔をピクセル値かパーセント値で指定します。
CSSで代用
th, td { padding: 間隔; }
frame="外枠の表示形式"
Strict: ○ | Transitional: ○ | Frameset: ○
表全体の外枠について、上下左右のうちどの枠線を表示するかを指定します。利用できる値は次のとおりです。
void
なし
above
上
below
下
hside
上と下
vside
右と左
lhs
左
rhs
右
box
上下左右すべて
border
上下左右すべて
非推奨属性ではありませんが、CSSを使って指定するほうが望ましいです。
rules="セルの罫線の表示形式"
Strict: ○ | Transitional: ○ | Frameset: ○
セル罫線のうちどの罫線を表示するかを指定します。利用できる値は次のとおりです。
none
なし
group
thead要素、tfoot要素、tbody要素、colgroup要素、col要素の境界
rows
横の行
cols
縦の列
all
すべて
非推奨属性ではありませんが、CSSを使って指定するほうが望ましいです。
align="表示位置"(非推奨)
Strict: × | Transitional: △ | Frameset: △
表の表示位置を指定します。利用できる値は次のとおりです。
left
左
center
中央
right
右

この属性は非推奨です。代わりにCSSを利用してください。

左に寄せる
table { margin-left: 0; margin-right: auto; }
中央に寄せる
table { margin-left: auto; margin-right: auto; }
右に寄せる
table { margin-left: auto; margin-right: 0; }

Internet Explorer 5.5以前のブラウザでは、この指定が正しく機能しません。詳しくはブロックレベル要素をセンタリングする方法 - Web標準普及プロジェクトを参照してください。

bgcolor="背景色"(非推奨)
Strict: × | Transitional: △ | Frameset: △
表の背景色を指定します。この属性は非推奨です。
CSSで代用
table { background-color: #色; }

解説

表全体を表す要素です。子要素の配置がやや複雑です。

  1. caption要素を0個または1個
  2. colgroup要素かcol要素を0個以上
  3. thead要素を0個または1個
  4. tfoot要素を0個または1個
  5. tbody要素を1個以上(thead要素、tfoot要素がない場合は省略可能)

基本的な表

table要素が表全体を表します。tr要素は横一行を表します。各セルはth要素かtd要素です。td要素が普通のセルであるのに対し、th要素は見出しを表すセルになります。

<table>
  <tr>
    <th>月</th><th>水道代</th><th>ガス代</th><th>電気代</th>
  </tr>
  <tr>
    <td>2月</td><td>4000円</td><td>3000円</td><td>5000円</td>
  </tr>
  <tr>
    <td>3月</td><td>6000円</td><td>4000円</td><td>3000円</td>
  </tr>
  <tr>
    <td>合計</td><td>10000円</td><td>7000円</td><td>8000円</td>
  </tr>
</table>
月水道代ガス代電気代
2月4000円3000円5000円
3月6000円4000円3000円
合計10000円7000円8000円

アクセシビリティの高い表

summary属性に概要を記述し、caption要素で表題をつけます。

視覚系ブラウザの利用者は、表形式で与えられた情報を視覚的に捉えることができ、容易に理解できます。しかし、音声ブラウザなどは表の内容を一次元的に読み上げるため、利用者はその内容を頭の中で組み立てなければならず、理解が困難に成ります。ですからsummary属性に表の概要を記述し、非視覚系ブラウザの利用者に表の全体像を示すことは、アクセシビリティの観点から重要なことです。

<table summary="2月?3月の光熱費。1列目が月、
            2列目から4列目までがそれぞれ水道代、ガス代、電気代です。">
  <caption>光熱費</caption>
  <tr>
    <th>月</th><th>水道代</th><th>ガス代</th><th>電気代</th>
  </tr>
  <tr>
    <td>2月</td><td>4000円</td><td>3000円</td><td>5000円</td>
  </tr>
  <tr>
    <td>3月</td><td>6000円</td><td>4000円</td><td>3000円</td>
  </tr>
  <tr>
  <td>合計</td><td>10000円</td><td>7000円</td><td>8000円</td>
  </tr>
</table>
光熱費
月水道代ガス代電気代
2月4000円3000円5000円
3月6000円4000円3000円
合計10000円7000円8000円

より完全な表

行のグループ化や列のグループ化を行うことができます。

行のグループ化
tbody要素
列のグループ化
colgroup要素
見出しセルの提示
th要素

Strict DTDの定義

<!ELEMENT TABLE - -
     (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>
<!ATTLIST TABLE                        -- table element --
  %attrs;                              -- %coreattrs, %i18n, %events --
  summary     %Text;         #IMPLIED  -- purpose/structure for speech output--
  width       %Length;       #IMPLIED  -- table width --
  border      %Pixels;       #IMPLIED  -- controls frame width around table --
  frame       %TFrame;       #IMPLIED  -- which parts of frame to render --
  rules       %TRules;       #IMPLIED  -- rulings between rows and cols --
  cellspacing %Length;       #IMPLIED  -- spacing between cells --
  cellpadding %Length;       #IMPLIED  -- spacing within cells --
  >

Information

現在の位置