<table> - テーブル(表)

トップ > HTMLリファレンス > <table>

■ 概要

項目説明
形式<table>〜</table>
サポートH3+ / e2+ / N2+ / Fx1+ / Op6+ / Ch1+ / Sa1+
タグの省略開始タグ:必須、終了タグ:必須
包含可能要素caption / col / colgroup / thead / tbody / tfoot
(直接 tr を記述した場合は、<tbody> タグが省略されていると見なす。)

■ 説明

<tr><th><td> と組み合わせてテーブル(表)を作成します。

■ 属性

【ボーダー関連属性】
属性意味
border=nH3+/e2+/N2+。枠線の太さを指定します。この属性を記述しない、または、0 を指定すると枠線を表示しません。HTML5 では 1 のみ指定可能で、太さはスタイルシートを用いるようになります。
bordercolor=colore2+/N4+。枠線の色を指定します。
bordercolordark=colore2+。立体的な枠線の暗い部分の色を指定します。
bordercolorlight=colore2+。立体的な枠線の明るい部分の色を指定します。
frame=frameH4/e3+。各セルの上下左右の枠線について、表示する/しないを制御します。HTML5 では廃止される予定です。
  void:表示しない。(既定値)
  above:上側のみ。
  below:下側のみ。
  hsides:上下のみ。
  vsides:左右のみ。
  lhs:左側(Left Hand Side)のみ。
  rhs:右側(Right Hand Side)のみ。
  box:上下左右。
  border:上下左右。
rules=rulesH4/e3+。テーブルの内側の枠線を表示するルールを指定します。HTML5 では廃止予定です。
  none:表示しない。
  groups:<thead>, <tbody>, <tfoot> で指定したグループの境界のみ。
  rows:横方向のみ。
  cols:縦方向のみ。
  all:すべて。(既定値)
【背景関連属性】
属性意味
background=urle3+/N4+。背景画像を指定します。<tr>, <th>, <td> でも指定可能です。
bgcolor=colorH4T/e2+/N3+。背景色を指定します。<tr>, <th>, <td> でも指定可能です。
【配置関連属性】
属性意味
align=alignH3-H4T/e2+/N2+。テーブルの表示位置を指定します。
  center:中央表示(H3/e2/N4)
  left:左端表示(H2/e2/N2)(既定値)
  right:右端表示(H2/e2/N2)
cellpadding=nH3-H4/e2+/N2+。枠線とセルの内容の間の隙間をピクセル単位で指定します。
cellspacing=nH3-H4/e2+/N2+。内枠の太さを指定します。0 を指定すると、立体感の無い枠線を表示することができます。
height=ne2+/N2+。テーブルの高さをピクセルまたはパーセンテージで指定します。
hspace=nN2+。テーブルの周りの横方向の余白をピクセル単位で指定します。
vspace=nN2+。テーブルの周りの縦方向の余白をピクセル単位で指定します。
width=nH3-H4/e2+/N2+。テーブルの横幅をピクセルまたはパーセンテージで指定します。
【その他属性】
属性意味
cols=ne3+/N4+。列数を指定します。この属性を指定することにより、テーブルの表示速度が若干速くなる場合がある。
datapagesize=sizee4+。データバインド機能を用いる際の、レコード数を指定します。
datasrc=datasrce4+。データバインド機能を用いる際の、データソースの ID を指定します。
summary=summaryH4。音声読み上げブラウザなどのために、この表の目的や構成の説明を記述します。HTML4.01 では必須属性とされていましたが、HTML5 では廃止される予定です。
【一般属性】
属性意味
class=classH4+/e3+/N4+。クラスを指定します。
id=idH4+/e3+/N4+。ID を指定します。
style=styleH4+/e3+/N4+。スタイルシートを指定します。
title=titleH4+/e4+/N6+。タイトルを指定します。
dir=dirH4+/e5+/N6+。文字の表示方向を指定します。
lang=langH4+/e4+/N6+。言語を指定します。
accesskey=keyH5+。アクセスキーを指定します。
tabindex=nH5+。タブインデックスを指定します。
contenteditable=boolH5+/e55+。要素を編集可能にします。
contextmenu=idH5+。コンテキストメニューを指定します。
draggable=boolH5+。ドラッグを可能にします。
dropzone=valueH5+。ドロップを可能にします。
hiddenH5+。要素を非表示にします。
spellcheck=boolH5+。スペルをチェックします。
IE拡張属性他にもIEで拡張された属性が指定可能です。

■ 使用例

HTML
<table border=4 width=250 align=center>
 <caption>【テーブルの例】</caption>
 <tr bgcolor="#cccccc">
  <th><br></th>
  <th>列-A</th>
  <th>列-B</th>
  <th>列-C</th>
 </tr>
 <tr align=center>
  <td>行-1</td>
  <td>A1</td>
  <td>B1</td>
  <td rowspan=2>C1-C2</td>
 </tr>
 <tr align=center>
  <td>行-2</td>
  <td>A2</td>
  <td>B2</td>
 </tr>
 <tr align=center>
  <td>行-3</td>
  <td>A3</td>
  <td colspan=2>A3-B3</td>
 </tr>
</table>
表示
【テーブルの例】

列-A 列-B 列-C
行-1 A1 B1 C1-C2
行-2 A2 B2
行-3 A3 A3-B3

■ セルを連結する

<th> や <td> に colspan=3 とすると、セルを横方向に 3個連結します。rowspan=3 とすると、縦方向に 3個連結します。

■ 中身が空のセル

中身が何も無いセルを <td></td> のように書いてしまうと、セルのへこみが無くなり少々不細工になってしまいます。この場合、<td><br></td> のようにすると回避できるようです。

ああああああ
あああ
ああああああ
あああ

■ テーブルを横に並べる

テーブルを横に並べて書きたい時は、枠線無しのテーブルのセルとして、並べたいテーブルを記述する方法があります。

<table>
 <tr>
  <td><table border=1>〜</table></td>
  <td><table border=1>〜</table></td>
 </tr>
</table>

■ セルとセルの間の隙間を無くす

画像をテーブルでレイアウトする場合など、テーブルのセルとセルの間の隙間を無くしたい場合には、<table> タグに border=0 cellspacing=0 cellpadding=0 を指定し、かつ、<td>〜</td> の間に一度も空白や改行を入れないようにしてください。これを怠ると、Netscape Navigator で空白が開いてしまうことがあります。

■ 枠線を細くする

border=1 と指定しても、IE や Netscape Navigator では数ドット程度の太さの線になります。cellspacing や cellpadding を指定したり、背景色の異なる 2つのテーブルを重ね合わせることで、細い線のテーブルを表現することができます。

AAABBB
CCCDDD
AAABBB
CCCDDD
AAABBB
CCCDDD
<table
border=1
>
<table
border=1
cellspacing=0
cellpadding=2
>
下記参照
<table border=0 bgcolor="#000000" cellspacing=0 cellpadding=0>
 <tr>
  <td>
   <table border=0 cellspacing=1 cellpadding=3>
    <tr bgcolor="#FFFFFF"><td>AAA</td><td>BBB</td></tr>
    <tr bgcolor="#FFFFFF"><td>CCC</td><td>DDD</td></tr>
   </table>
  </td>
 </tr>
</table>

■ 関連項目

<caption><tr><th><td><thead><tbody><tfoot><col><colgroup>

Copyright (C) 1996-2011 杜甫々
初版:2000年10月9日 最終更新:2011年6月11日
http://www.tohoho-web.com/html/table.htm