<table> - テーブル（表） <table> - テーブル（表）| 項目 | 説明 |
|---|---|
| 形式 | <table>〜</table> |
| サポート | H3+ / e2+ / N2+ / Fx1+ / Op6+ / Ch1+ / Sa1+ |
| タグの省略 | 開始タグ：必須、終了タグ：必須 |
| 包含可能要素 | caption / col / colgroup / thead / tbody / tfoot （直接 tr を記述した場合は、<tbody> タグが省略されていると見なす。） |
| 属性 | 意味 |
|---|---|
| border=n | H3+/e2+/N2+。枠線の太さを指定します。この属性を記述しない、または、0 を指定すると枠線を表示しません。HTML5 では 1 のみ指定可能で、太さはスタイルシートを用いるようになります。 |
| bordercolor=color | e2+/N4+。枠線の色を指定します。 |
| bordercolordark=color | e2+。立体的な枠線の暗い部分の色を指定します。 |
| bordercolorlight=color | e2+。立体的な枠線の明るい部分の色を指定します。 |
| frame=frame | H4/e3+。各セルの上下左右の枠線について、表示する/しないを制御します。HTML5 では廃止される予定です。 void：表示しない。（既定値） above：上側のみ。 below：下側のみ。 hsides：上下のみ。 vsides：左右のみ。 lhs：左側（Left Hand Side）のみ。 rhs：右側（Right Hand Side）のみ。 box：上下左右。 border：上下左右。 |
| rules=rules | H4/e3+。テーブルの内側の枠線を表示するルールを指定します。HTML5 では廃止予定です。 none：表示しない。 groups：<thead>, <tbody>, <tfoot> で指定したグループの境界のみ。 rows：横方向のみ。 cols：縦方向のみ。 all：すべて。（既定値） |
| 属性 | 意味 |
|---|---|
| background=url | e3+/N4+。背景画像を指定します。<tr>, <th>, <td> でも指定可能です。 |
| bgcolor=color | H4T/e2+/N3+。背景色を指定します。<tr>, <th>, <td> でも指定可能です。 |
| 属性 | 意味 |
|---|---|
| align=align | H3-H4T/e2+/N2+。テーブルの表示位置を指定します。 center：中央表示（H3/e2/N4） left：左端表示（H2/e2/N2）（既定値） right：右端表示（H2/e2/N2） |
| cellpadding=n | H3-H4/e2+/N2+。枠線とセルの内容の間の隙間をピクセル単位で指定します。 |
| cellspacing=n | H3-H4/e2+/N2+。内枠の太さを指定します。0 を指定すると、立体感の無い枠線を表示することができます。 |
| height=n | e2+/N2+。テーブルの高さをピクセルまたはパーセンテージで指定します。 |
| hspace=n | N2+。テーブルの周りの横方向の余白をピクセル単位で指定します。 |
| vspace=n | N2+。テーブルの周りの縦方向の余白をピクセル単位で指定します。 |
| width=n | H3-H4/e2+/N2+。テーブルの横幅をピクセルまたはパーセンテージで指定します。 |
| 属性 | 意味 |
|---|---|
| cols=n | e3+/N4+。列数を指定します。この属性を指定することにより、テーブルの表示速度が若干速くなる場合がある。 |
| datapagesize=size | e4+。データバインド機能を用いる際の、レコード数を指定します。 |
| datasrc=datasrc | e4+。データバインド機能を用いる際の、データソースの ID を指定します。 |
| summary=summary | H4。音声読み上げブラウザなどのために、この表の目的や構成の説明を記述します。HTML4.01 では必須属性とされていましたが、HTML5 では廃止される予定です。 |
| 属性 | 意味 |
|---|---|
| class=class | H4+/e3+/N4+。クラスを指定します。 |
| id=id | H4+/e3+/N4+。ID を指定します。 |
| style=style | H4+/e3+/N4+。スタイルシートを指定します。 |
| title=title | H4+/e4+/N6+。タイトルを指定します。 |
| dir=dir | H4+/e5+/N6+。文字の表示方向を指定します。 |
| lang=lang | H4+/e4+/N6+。言語を指定します。 |
| accesskey=key | H5+。アクセスキーを指定します。 |
| tabindex=n | H5+。タブインデックスを指定します。 |
| contenteditable=bool | H5+/e55+。要素を編集可能にします。 |
| contextmenu=id | H5+。コンテキストメニューを指定します。 |
| draggable=bool | H5+。ドラッグを可能にします。 |
| dropzone=value | H5+。ドロップを可能にします。 |
| hidden | H5+。要素を非表示にします。 |
| spellcheck=bool | H5+。スペルをチェックします。 |
| IE拡張属性 | 他にもIEで拡張された属性が指定可能です。 |
<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つのテーブルを重ね合わせることで、細い線のテーブルを表現することができます。
|
|
|
|||||||||||||
| <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>