<TABLE>

HTMLタグ<TABLE> は表を作成します。 表は大きく分けてヘッダ・ボディ・フッタの3つの部分から構成されています。 しかし、Microsoft Internet Explorer 6 ではこれらの扱いにとくに違いはありません。 表には<tr>タグで行を挿入します。行には<TH>タグ、または<TD>タグでセルを挿入します。<CAPTION>タグで見出しを付けることもできます。 TABLEはブロック要素です。

構文

HTML

<TABLE [attribute=value ...] content-model </TABLE>

XHTML

<table [attribute=value ...] content-model </table>

内容モデル

開始タグと終了タグの間には、以下に示す要素タイプを含めることができます。

TABLE要素タイプの内容モデル
要素タイプ 条件
CAPTION 現れないか、1回出現
COL 現れないか、任意回数出現
COLGROUP 現れないか、任意回数出現
THEAD 現れないか、1回出現
TFOOT 現れないか、1回出現
TBODY 1回以上出現
TR 現れないか、任意回数出現

属性

table要素の属性
属性 HTML 4.01 Transitional HTML 4.01 Strict XHTML 1.0 Strict HTML5
summary Supported Supported Supported Supported
width Supported Supported Supported Supported
border Supported Supported Supported Supported
frame Supported Supported Supported Supported
rules Supported Supported Supported Supported
cellspacing Supported Supported Supported Supported
cellpadding Supported Supported Supported Supported
align Supported Not supported Not supported Not supported
bgcolor Supported Not supported Not supported Not supported
datapagesize Supported Supported Not supported Supported
id Supported Supported Supported Supported
class Supported Supported Supported Supported
style Supported Supported Supported Supported
title Supported Supported Supported Supported
lang Supported Supported Supported Supported
xml:lang Not supported Not supported Supported Not supported
dir Supported Supported Supported Supported
onclick Supported Supported Supported Supported
ondblclick Supported Supported Supported Supported
onmousedown Supported Supported Supported Supported
onmouseup Supported Supported Supported Supported
onmouseover Supported Supported Supported Supported
onmousemove Supported Supported Supported Supported
onmouseout Supported Supported Supported Supported
onkeypress Supported Supported Supported Supported
onkeydown Supported Supported Supported Supported
onkeyup Supported Supported Supported Supported
summary
音声出力のため、表の目的や構造を記述します。
width
表の幅をピクセル単位かパーセンテージ単位で指定します。ピクセル単位で指定するときは px は省略できます。
align
表を配置する位置を指定します。次にalign属性に指定できる値を示します。
align
意味
left左(規定値)
center中央
right
border
表の境界線の太さを指定します。省略した場合、境界線の太さは"0"になります。
frame
表の外枠に罫線を描く位置
frame属性
説明
void罫線なし
above
below
hsides上と下
lhs
rhs
vsides左と右
box上下左右
border上下左右
rules
表の内枠に罫線を描く位置
rules属性
説明
none罫線なし
groups列グループと列グループの間
rows行と行の間
cols列と列の間
allセルとセルの間
cellpadding
枠線とセルの内容の間の隙間の大きさをピクセル単位かパーセンテージ単位で指定します。
cellspacing
内枠の太さをピクセル単位かパーセンテージ単位で指定します。cellspacing属性に"0"を指定すると、立体感の無い枠線になります。

HTMLのバージョンにより、指定できる属性が異なります。HTMLのバージョンごとに指定できる属性の一覧を次の表に示します。

DTD

HTML の各要素は DTD によって定義されています。 TABLE 要素が DTD でどのように定義されているかを見るには、次のリンクをクリックしてください。

使用例

HTMLタグ <table> の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<table border="0">
 <tr>
  <td>cell #1</td>
  <td>cell #2</td>
 </tr>
</table>
cell #1cell #2
<table border="1">
 <tr>
  <td>cell #1</td>
  <td>cell #2</td>
 </tr>
</table>
cell #1cell #2
<table border="4">
 <tr>
  <td>cell #1</td>
  <td>cell #2</td>
 </tr>
</table>
cell #1cell #2
<table border="1" cellspacing="0">
 <tr>
  <td>left</td>
  <td>cell #1</td>
 </tr>
</table>
cell #1cell #2
<table border="1" cellspacing="4">
 <tr>
  <td>left</td>
  <td>cell #1</td>
 </tr>
</table>
cell #1cell #2
<table cellpadding="0" border="1">
 <tr>
  <td>left</td>
  <td>cell #1</td>
 </tr>
</table>
cell #1cell #2
<table cellpadding="2" border="1">
 <tr>
  <td>left</td>
  <td>cell #1</td>
 </tr>
</table>
cell #1cell #2
<table cellpadding="4" border="1">
 <tr>
  <td>left</td>
  <td>cell #1</td>
 </tr>
</table>
cell #1cell #2

frame="void"の例を次に示す。

<table rules="void" border="1">
 <tr><td>cell</td><td>cell</td></tr>
 <tr><td>cell</td><td>cell</td></tr>
</table>
cellcell
cellcell

frame="above"の例を次に示す。

<table rules="above" border="1">
 <tr><td>cell</td><td>cell</td></tr>
 <tr><td>cell</td><td>cell</td></tr>
</table>
cellcell
cellcell

frame="below"の例を次に示す。

<table rules="below" border="1">
 <tr><td>cell</td><td>cell</td></tr>
 <tr><td>cell</td><td>cell</td></tr>
</table>
cellcell
cellcell

frame="hsides"の例を次に示す。

<table rules="hsides" border="1">
 <tr><td>cell</td><td>cell</td></tr>
 <tr><td>cell</td><td>cell</td></tr>
</table>
cellcell
cellcell

frame="lhs"の例を次に示す。

<table rules="lhs" border="1">
 <tr><td>cell</td><td>cell</td></tr>
 <tr><td>cell</td><td>cell</td></tr>
</table>
cellcell
cellcell

frame="rhs"の例を次に示す。

<table rules="rhs" border="1">
 <tr><td>cell</td><td>cell</td></tr>
 <tr><td>cell</td><td>cell</td></tr>
</table>
cellcell
cellcell

frame="vsides"の例を次に示す。

<table rules="vsides" border="1">
 <tr><td>cell</td><td>cell</td></tr>
 <tr><td>cell</td><td>cell</td></tr>
</table>
cellcell
cellcell

frame="box"の例を次に示す。

<table rules="box" border="1">
 <tr><td>cell</td><td>cell</td></tr>
 <tr><td>cell</td><td>cell</td></tr>
</table>
cellcell
cellcell

frame="border"の例を次に示す。

<table rules="border" border="1">
 <tr><td>cell</td><td>cell</td></tr>
 <tr><td>cell</td><td>cell</td></tr>
</table>
cellcell
cellcell

rules="none"の例を次に示す。

<table rules="none" border="1">
 <colgroup><col><col></colgroup>
 <colgroup><col><col></colgroup>
 <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
 <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
 <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
</table>
cellcellcellcell
cellcellcellcell
cellcellcellcell

rules="groups"の例を次に示す。

<table rules="groups" border="1">
 <colgroup><col><col></colgroup>
 <colgroup><col><col></colgroup>
 <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
 <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
 <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
</table>
cellcellcellcell
cellcellcellcell
cellcellcellcell

rules="rows"の例を次に示す。

<table rules="rows" border="1">
 <colgroup><col><col></colgroup>
 <colgroup><col><col></colgroup>
 <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
 <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
 <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
</table>
cellcellcellcell
cellcellcellcell
cellcellcellcell

rules="cols"の例を次に示す。

<table rules="cols" border="1">
 <colgroup><col><col></colgroup>
 <colgroup><col><col></colgroup>
 <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
 <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
 <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
</table>
cellcellcellcell
cellcellcellcell
cellcellcellcell

rules="all"の例を次に示す。

<table rules="all" border="1">
 <colgroup><col><col></colgroup>
 <colgroup><col><col></colgroup>
 <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
 <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
 <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
</table>
cellcellcellcell
cellcellcellcell
cellcellcellcell

<CAPTION>

HTMLタグ<caption>は表に見出しをつけます。

書式

<CAPTION [attribute=value ...] content-model </CAPTION>

開始タグ

caption要素の開始タグは省略できません。

終了タグ

caption要素の終了タグは省略できません。

開始タグと終了タグの間にはインライン要素を含めることができます。属性はすべて省略可能です。

TABLE要素タイプの内容モデルであり、<table> と </table> の間に0回または1回だけ現れます。

属性

align
表の見出しの位置を指定します。省略した場合は、表の上に見出しが付きます。
意味
top上(規定値)
right
bottom
left
HTML 4.01 Transitional でのみ指定可能な属性です。 HTML 4.01 Strict や XHTML ではスタイルシート属性 caption-side を使用して見出しの位置を指定します。

HTML の各要素は DTD によって定義されています。 CAPTION 要素が DTD でどのように定義されているかを見るには、次のリンクをクリックしてください。

HTMLタグ<caption>の使用例と表示サンプルを次に示します。

<table border="1">
 <caption>captionの例</caption>
 <tr>
  <td>cell #1</td>
  <td>cell #2</td>
 </tr>
</table>
captionの例
cell #1cell #2

<COLGROUP>

<COLGROUP>と</COLGROUP>の間にある複数の<COL>タグをまとめて1つのグループにします。 複数の<COL>タグに対して、まとめて属性を指定するときに便利です。

書式

<COLGROUP [attribute=value ...] content-model </COLGROUP>

HTMLでは終了タグを省略できます。XHTMLでは省略できません。 開始タグと終了タグの間にはCOL要素タイプが任意回数表れます。 TABLE要素タイプの内容モデルで、<table> と </table> の間に任意回数現れます。

属性

span
列の数を指定します。
width
列の幅を数値と単位で指定します。

対応状況

Webブラウザ対応状況
Internet Explorer 6.0
FireFox 3.0×
Google Chrome 1.0×
Opera 9.62×
Safari 3.2×

DTD

HTML の各要素は DTD によって定義されています。 COLGROUP 要素が DTD でどのように定義されているかを見るには、次のリンクをクリックしてください。

HTMLタグ <colgroup> の使用例と表示サンプルを次に示します。

<table border="1">
  <!-- 2つの列の文字の色を赤に指定する -->
  <colgroup style="color: red">
    <col> <!-- 1列目 -->
    <col> <!-- 2列目 -->
  </colgroup>
  <tr>
    <td>cell #1</td>
    <td>cell #2</td>
  </tr>
  <tr>
    <td>cell #3</td>
    <td>cell #4</td>
  </tr>
</table>
cell #1 cell #2
cell #3 cell #4

<COL>

<COL> は表の列に属性を指定するHTMLタグです。 縦の1列に対してスタイル(文字の大きさや色など)を統一したい場合、ひとつひとつのセルに対してスタイルを指定しなくても <COL> タグを使用することで、縦の1列すべてのスタイルを統一することができます。 <COLGROUP>タグと</COLGROUP>タグで挟むことにより、複数の<COL>タグをグループ化することができます。

col要素に指定できるスタイルシートを次に示す。

background, background-color, background-image, background-repeat, background-attachment, background-position, width

col要素に指定したスタイルシートは、表のセル内にあるテキストに影響を及ぼさない。したがって、以下のスタイルシートを指定することはできない。

color

font, font-style, font-variant, font-weight, font-size, font-family

border, border-top, border-right, border-bottom, border-left, border-width, border-top-width, border-right-width, border-bottom-width, border-left-width, border-style, border-top-style, border-right-style, border-bottom-style, border-left-style, border-color, border-top-color, border-right-color, border-bottom-color, border-left-color

text-align, vertical-align

padding, padding-top, padding-right, padding-bottom, padding-left

縦の列に対してスタイルシートを指定したい場合は、各セルのth要素td要素に対してひとつづつスタイルシートを指定するしかない。

書式

<COL [attribute=value ...] content-model </COL>

開始タグ

col要素の開始タグは省略できません。

終了タグ

col要素の終了タグは省略できます。

内容モデル

col要素の内容モデルは空です。開始タグと終了タグの間には何も現れません。

属性

span
列の数を指定します。
width
列の幅を数値と単位で指定します。

対応状況

Webブラウザ対応状況
Internet Explorer 6.0
FireFox 3.0×
Google Chrome 1.0×
Opera 9.62
Safari 3.2

DTD

HTML の各要素は DTD によって定義されています。 COL 要素が DTD でどのように定義されているかを見るには、次のリンクをクリックしてください。

HTMLタグ <col> の使用例と表示サンプルを次に示します。

<table border="1">
 <!-- 1列目は中央揃え -->
 <col align="center">
 <!-- 2列目は緑色の文字 -->
 <col style="color: green">
 <tr>
  <td>cell #1</td>
  <td>cell #2</td>
 </tr>
 <tr>
  <td>3</td>
  <td>4</td>
 </tr>
</table>
cell #1cell #2
34

col要素に対してwidthスタイルシートを指定する例を示す。

<table border="1">
    <col style="width:50px;">
    <col style="width:100px">
    <col style="width:200px;">
    <tr>
        <td>50px</td>
        <td>100px</td>
        <td>200px</td>
    </tr>
</table>
50px 100px 200px

スタイルの優先順位は「td要素 > tr要素 > tbody要素 > col要素 > table要素」である。

col要素にスタイル指定あり col要素とtd要素にスタイル指定あり スタイル指定なし スタイル指定なし
col要素とtr要素にスタイル指定あり col要素、tr要素、td要素にスタイル指定あり tr要素とtd要素にスタイル指定あり tr要素にスタイル指定あり

<THEAD>

表中の行をヘッダ・本体・フッタに分け、そのヘッダ部分であることを指定します。

印刷時にページの境界に跨るために表が分割されるとき、ヘッダをを各ページに複製するためにthead要素タイプを使用する。

TABLE要素タイプの内容モデルで、<TABLE> と </TABLE> の間に1回だけ出現します。

書式

<THEAD [attribute=value ...] content-model </THEAD>

開始タグ

thead要素の開始タグは省略できません。

終了タグ

HTMLではthead要素の終了タグは省略できます。XHTMLではthead要素の終了タグは省略できません。

内容モデル

開始タグと終了タグの間には TR要素タイプが1つ以上出現します。

対応状況

Webブラウザ対応状況
Internet Explorer 6.01
FireFox 3.0
Google Chrome 1.0×
Opera 9.61
Safari 3.2×

1 印刷時に表が複数ページに跨ってもヘッダやフッタは複製されない。

DTD

HTML の各要素は DTD によって定義されています。 THEAD 要素が DTD でどのように定義されているかを見るには、次のリンクをクリックしてください。

THEAD 要素の使用例を次に示します。

<table border="1">
 <thead>
  <tr>
   <td>thead</td>
  </tr>
 </thead>
 <tfoot>
  <tr>
   <td>tfoot</td>
  </tr>
 </tfoot>
 <tbody>
  <tr>
   <td>tbody</td>
  </tr>
 </tbody>
</table>

THEAD 要素の表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

thead
tfoot
tbody

<TFOOT>

表中の行をヘッダ・本体・フッタに分け、そのフッタ部分であることを指定します。

印刷時にページの境界に跨るために表が分割されるとき、フッタをを各ページに複製するためにtfoot要素タイプを使用する。 TABLE要素タイプの内容モデルで、<TABLE> と </TABLE> の間に1回だけ出現します。

書式

<TFOOT [attribute=value ...] content-model </TFOOT>

開始タグ

tfoot要素の開始タグは省略できません。

終了タグ

HTMLではtfoot要素の終了タグは省略できます。XHTMLではtfoot要素の終了タグは省略できません。

内容モデル

開始タグと終了タグの間には TR要素タイプが1回以上出現します。

対応状況

Webブラウザ対応状況
Internet Explorer 6.01
FireFox 3.0
Google Chrome 1.0×
Opera 9.61
Safari 3.2×

1 印刷時に表が複数ページに跨ってもヘッダやフッタは複製されない。

DTD

HTML の各要素は DTD によって定義されています。 TFOOT 要素が DTD でどのように定義されているかを見るには、次のリンクをクリックしてください。

TFOOT 要素の使用例を次に示します。

<table border="1">
 <thead>
  <tr>
   <td>thead</td>
  </tr>
 </thead>
 <tfoot>
  <tr>
   <td>tfoot</td>
  </tr>
 </tfoot>
 <tbody>
  <tr><td>tbody</td></tr>
  <tr><td>tbody</td></tr>
  <tr><td>tbody</td></tr>
  <tr><td>tbody</td></tr>
  <tr><td>tbody</td></tr>
  <tr><td>tbody</td></tr>
  <tr><td>tbody</td></tr>
  <tr><td>tbody</td></tr>
  <tr><td>tbody</td></tr>
  <tr><td>tbody</td></tr>
  <tr><td>tbody</td></tr>
  <tr><td>tbody</td></tr>
  <tr><td>tbody</td></tr>
  <tr><td>tbody</td></tr>
  <tr><td>tbody</td></tr>
  <tr><td>tbody</td></tr>
  <tr><td>tbody</td></tr>
  <tr><td>tbody</td></tr>
  <tr><td>tbody</td></tr>
  <tr><td>tbody</td></tr>
  <tr><td>tbody</td></tr>
  <tr><td>tbody</td></tr>
  <tr><td>tbody</td></tr>
  <tr><td>tbody</td></tr>
  <tr><td>tbody</td></tr>
  <tr><td>tbody</td></tr>
  <tr><td>tbody</td></tr>
  <tr><td>tbody</td></tr>
  <tr><td>tbody</td></tr>
  <tr><td>tbody</td></tr>
  <tr><td>tbody</td></tr>
  <tr><td>tbody</td></tr>
  <tr><td>tbody</td></tr>
  <tr><td>tbody</td></tr>
  <tr><td>tbody</td></tr>
  <tr><td>tbody</td></tr>
  <tr><td>tbody</td></tr>
  <tr><td>tbody</td></tr>
 </tbody>
</table>

TFOOT 要素の表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

thead
tfoot
tbody
tbody
tbody
tbody
tbody
tbody
tbody
tbody
tbody
tbody
tbody
tbody
tbody
tbody
tbody
tbody
tbody
tbody
tbody
tbody
tbody
tbody
tbody
tbody
tbody
tbody
tbody
tbody
tbody
tbody
tbody
tbody
tbody
tbody
tbody
tbody
tbody
tbody
tbody
tbody

<TBODY>

表中の行をヘッダ・本体・フッタに分け、その本体部分であることを指定します。

書式

<TBODY [attribute=value ...] content-model </TBODY>

開始タグ

tbody要素の開始タグは省略できます。

終了タグを省略できます。XHTMLでは省略できません。 TBODY要素タイプはTABLE要素タイプの内容モデルであり、<TABLE> と </TABLE> の間に0または1回出現します。

内容モデル

開始タグと終了タグの間には TR要素タイプが1回以上出現します。

DTD

HTML の各要素は DTD によって定義されています。 TBODY 要素が DTD でどのように定義されているかを見るには、次のリンクをクリックしてください。

使用例

TBODY 要素の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<table border="1">
 <tbody>
  <tr>
   <td>cell #1</td>
  </tr>
 </tbody>
</table>
cell #1

次は開始タグと終了タグを省略した例です。

<table border="1">
 <tr>
  <td>cell #1</td>
 </tr>
</table>
cell #1

TR

<TR>タグは表に行(Table Row)を挿入します。 行には<TH>タグ、または<TD>タグでセルを挿入します。 <TABLE>タグと</TABLE>タグの間に記述することができます。

書式

<TR [attribute=value ...] content-model </TR>

開始タグ

tr要素の開始タグは省略できません。

終了タグ

HTMLではtr要素の終了タグは省略できます。XHTMLではtr要素の終了タグは省略できません。

内容モデル

開始タグと終了タグの間にはTH要素タイプまたはTD要素タイプが1回以上現れます。

TBODY要素タイプおよびTHEAD要素タイプ、TFOOT要素タイプの内容モデルで、<TBODY> と </TBODY> の間(または<THEAD> と </THEAD> の間や <TFOOT> と </TFOOT> の間)に1回以上出現します。

属性

bgcolor
行内セルの背景色を指定します。色の指定方法は「色の指定方法とカラーチャート」のリンク先をご覧ください。

HTMLのバージョンにより、指定できる属性が異なります。HTMLのバージョンごとに指定できる属性の一覧を次の表に示します。

tr要素の属性
属性 HTML 4.01
Transitional
HTML 4.01
Strict
XHTML 1.0
Strict
cellhalign Supported Supported Supported
cellvalign Supported Supported Supported
bgcolor Supported Not supported Not supported

DTD

HTML の各要素は DTD によって定義されています。 TR 要素が DTD でどのように定義されているかを見るには、次のリンクをクリックしてください。

HTMLタグ <tr> の使用例と表示サンプルを次に示します。

<table border="1">
<caption>alignに指定する値</caption> <tr><th>値</th><th>見出しの位置</th></tr> <tr><td>top</td><td>表の上</td></tr> <tr><td>right</td><td>表の右</td></tr> <tr><td>bottom</td><td>表の下</td></tr> <tr><td>left</td><td>表の左</td></tr> </table>
alignに指定する値
見出しの位置
top 表の上
right 表の右
bottom 表の下
left 表の左

TH

表 (<TABLE>) に見出しセル(table header cell)を挿入します。<TD> タグで挿入する通常のセルと違い、文字が太字で表示されます。<TR>と</TR>の間に記述することができます。終了タグは省略できます。

書式

<TH [attribute=value ...] content-model </TH>

HTMLでは終了タグを省略できます。XHTMLでは終了タグを省略できません。

属性

属性はすべて省略可能です。

abbr
ヘッダセルのための略語を指定します。
bgcolor
セルの背景色を指定します。色の指定方法は「色の指定方法とカラーチャート」のリンク先をご覧ください。
width
セルの幅をピクセル単位かパーセンテージ単位で指定します。ピクセル単位で指定するときは px を省略できます。
height
セルの高さをピクセル単位かパーセンテージ単位で指定します。ピクセル単位で指定するときは px を省略できます。

HTMLのバージョンにより、指定できる属性が異なります。HTMLのバージョンごとに指定できる属性の一覧を次の表に示します。

th要素の属性
属性 HTML 4.01
Transitional
HTML 4.01
Strict
XHTML 1.0
Strict
abbr Supported Supported Supported
axis Supported Supported Supported
headers Supported Supported Supported
scope Supported Supported Supported
rowspan Supported Supported Supported
colspan Supported Supported Supported
cellhalign Supported Supported Supported
cellvalign Supported Supported Supported
nowrap Supported Not supported Not supported
bgcolor Supported Not supported Not supported
width Supported Not supported Not supported
height Supported Not supported Not supported

◎ …… 指定必須
○ …… 指定可能(省略可)
× …… 指定不可

DTD

HTML の各要素は DTD によって定義されています。 TH 要素が DTD でどのように定義されているかを見るには、次のリンクをクリックしてください。

使用例と表示サンプル

<table border="1">
  <caption>alignに指定する値</caption>
  <tr>
    <th>値</th>
    <th>見出しの位置</th>
  </tr>
  <tr>
    <td>top</td>
    <td>表の上</td>
  </tr>
  <tr>
    <td>right</td>
    lt;td>表の右</td>
  </tr>
  <tr>
    <td>bottom</td>
    <td>表の下</td>
  </tr>
  <tr>
    <td>left</td>
    <td>表の左</td>
  </tr>
</table>
alignに指定する値
見出しの位置
top表の上
right表の右
bottom表の下
left表の左

<TD>

表 (<table>) にセル (table data cell) を挿入します。

書式

<TD [attribute=value ...] content-model </TD>

HTMLでは終了タグを省略できます。XHTMLでは省略できません。 開始タグと終了タグの間にはブロック要素またはインライン要素が任意回数表れます。 TR要素タイプの内容モデルで、<tr> と </tr> の間に1回以上現れます。

属性

abbr
ヘッダセルのための略語を指定します。
bgcolor
セルの背景色を指定します。色の指定方法は「色の指定方法とカラーチャート」のリンク先をご覧ください。
colspan
セルをn個、横方向に連結します。
rowspan
セルをn個、縦方向に連結します。
width
セルの幅をピクセル単位かパーセンテージ単位で指定します。ピクセル単位で指定するときは px を省略できます。
height
セルの高さをピクセル単位かパーセンテージ単位で指定します。ピクセル単位で指定するときは px を省略できます。

HTMLのバージョンにより、指定できる属性が異なります。HTMLのバージョンごとに指定できる属性の一覧を次の表に示します。

td要素の属性
属性 HTML 4.01
Transitional
HTML 4.01
Strict
XHTML 1.0
Strict
abbr Supported Supported Supported
axis Supported Supported Supported
headers Supported Supported Supported
scope Supported Supported Supported
rowspan Supported Supported Supported
colspan Supported Supported Supported
cellhalign Supported Supported Supported
cellvalign Supported Supported Supported
nowrap Supported Not supported Not supported
bgcolor Supported Not supported Not supported
width Supported Not supported Not supported
height Supported Not supported Not supported

DTD

HTML の各要素は DTD によって定義されています。 TD 要素が DTD でどのように定義されているかを見るには、次のリンクをクリックしてください。

使用例と表示サンプル

HTMLタグ <td> の使用例と表示サンプルを次に示します。

まず、colspan 属性で2つのセルを横方向に連結する例です。

<table border="1">
 <!-- 1行目 -->
 <tr>
  <td colspan="2">cell #1</td>
  <!-- 連結されているため2つめのセルは無し -->
 </tr>
 <!-- 2行目 -->
 <tr>
  <td>cell #2</td>
  <td>cell #3</td>
 </tr>
</table>
cell #1
cell #2cell #3

次に、rowspan 属性で2つのセルを縦方向に連結する例です。

<table border="1">
 <!-- 1行目 -->
 <tr>
  <td rowspan="2">cell #1</td>
  <td>cell #2</td>
 </tr>
 <!-- 2行目 -->
 <tr>
  <!-- 連結されているため1つめのセルは無し -->
  <td>cell #3</td>
 </tr>
</table>
cell #1cell #2
cell #3