<table>
<tr><th>見出し1</th><th>見出し2</th>‥(必要分繰返し)</tr>
<tr><td>データ1</td><td>データ2</td>‥(必要分繰返し)</tr>
<tr><td>データ3</td><td>データ4</td>‥(必要分繰返し)</tr>
・
・
</table>
<tr><th>見出し1</th><th>見出し2</th>‥(必要分繰返し)</tr>
<tr><td>データ1</td><td>データ2</td>‥(必要分繰返し)</tr>
<tr><td>データ3</td><td>データ4</td>‥(必要分繰返し)</tr>
・
・
</table>
要素名 | 属性名 | 説明 属性値 | 非推奨 | 必須属性 |
---|---|---|---|---|
table | 表の作成 | |||
summary | 音声出力・点字出力などの非視覚環境に対して、この表の目的や構成の説明を記述します 値‥テキスト | |||
width | 表全体の横幅の指定 値に整数(ピクセル単位)又はプラウザの幅に対する割合を%で指定 | |||
border | 外枠線の太さの指定 値に整数をピクセル単位で指定 | |||
frame | 外枠の表示形式の指定 void‥枠線を表示しない(初期値)、above‥上の枠線のみ表示、below‥下の枠線のみ表示、rhs‥右の枠線のみ表示、lhs‥左の枠線のみ表示、vsides‥左右の枠線のみ表示、hsides‥上下の枠線のみ表示、box‥上下左右全ての枠線を表示 | |||
rules | 表の各セルの罫線の表示形式の指定 none‥枠線を表示しない(初期値)、rows‥横列の境界のみ、cols‥縦列の境界のみ、all‥すべての境界、groups‥列グループ・行グループの間の枠線のみ | |||
cellspacing | セルの間隔の指定 整数(ピクセル単位)又は%で指定 | |||
cellpadding | セルの枠と内容との余白の指定 整数(ピクセル単位)又は%で指定 | |||
align | 表の配置位置の指定 left‥表を左に配置、後続の内容を右側に回り込ます center‥表を中央に配置 right‥表を右に配置、後続の内容を左側に回り込ます | 非推奨 | ||
bgcolor | 表全体の背景色の指定 16進数のRGB値、またはカラーコードで指定 | 非推奨 | ||
class | クラス名を用いてスタイルを適用させる スタイルシートのクラス名 | |||
id | ID名を用いてスタイルを適用させる スタイルシートのID名 | |||
title | 補足情報 テキスト | |||
style | 要素に対して直接スタイルを適用させる スタイルシート(スタイル情報) | |||
lang | 言語コードの指定 言語コード | |||
dir | 文字表記の方向の指定 lft(左から右) rtl(右から左) | |||
要素名 | 属性名 | 説明 属性値 | 非推奨 | 必須属性 |
tr | 表の中の行(横一列分) | |||
align | 行揃え left 左揃え(td要素の初期値) right 右揃え center 中央揃え(th要素の初期値) justify 両端揃え char | |||
valign | 縦方向の位置揃え top 上端揃え、 middle 中央揃え(初期値) bottom 下端揃え、baseline 横方向の列での一行目のベースライン | |||
char | char属性で指定した文字を基準に揃えて表示する 特定の文字(初期値は小数点) | |||
charoff | セルの左端から、char属性で指定した基準となる文字までの距離 整数(ピクセル)又はパーセント(%) | |||
bgcolor | 表の行の背景色の指定 16進数のRGB値、またはカラーコードで指定 | 非推奨 | ||
class | クラス名を用いてスタイルを適用させる スタイルシートのクラス名 | |||
id | ID名を用いてスタイルを適用させる スタイルシートのID名 | |||
title | 補足情報 テキスト | |||
style | 要素に対して直接スタイルを適用させる スタイルシート(スタイル情報) | |||
lang | 言語コードの指定 言語コード | |||
dir | 文字表記の方向の指定 lft(左から右) rtl(右から左) | |||
要素名 | 属性名 | 説明 属性値 | 非推奨 | 必須属性 |
th、td | 見出しセル、データセル | |||
rowspan | 下方向に統合する セルの数 | |||
colspan | 左右方向に統合する セルの数 | |||
align | 行揃え left 左揃え(td要素の初期値) right 右揃え center 中央揃え(th要素の初期値) justify 両端揃え char | |||
valign | 縦方向の位置揃え top 上端揃え、 middle 中央揃え(初期値) bottom 下端揃え、baseline 横方向の列での一行目のベースライン | |||
char | char属性で指定した文字を基準に揃えて表示する 特定の文字(初期値は小数点) | |||
charoff | セルの左端から、char属性で指定した基準となる文字までの距離 整数(ピクセル)又はパーセント(%) | |||
abbr | 見出しセルの省略形 | |||
axis | 見出しセルの分類名 | |||
headers | 関連する見出しセルのID名 | |||
scope | 見出しセルの対象となる範囲 | |||
nowrap | 改行の禁止 nowrap(属性値は省略) | 非推奨 | ||
bgcolor | 各セルの背景色の指定 16進数のRGB値、またはカラーコードで指定 | 非推奨 | ||
width | セルの横幅の指定 ピクセル又はパーセント値 | 非推奨 | ||
height | セルの高さの指定 ピクセル又はパーセント値 | 非推奨 | ||
class | クラス名を用いてスタイルを適用させる スタイルシートのクラス名 | |||
id | ID名を用いてスタイルを適用させる スタイルシートのID名 | |||
title | 補足情報 テキスト | |||
style | 要素に対して直接スタイルを適用させる スタイルシート(スタイル情報) | |||
lang | 言語コードの指定 言語コード | |||
dir | 文字表記の方向の指定 lft(左から右) rtl(右から左) |
表は、table要素で表現します。表全体を<table>〜</table>で囲って表示します。その表の中の
1つ分の行(横一列分)を<tr>〜</tr>で囲って表示し、その行の中の各セルは<th>〜</th>、
又は<td>〜</td>で囲って表します。
つまり、table要素の内容は1つ分の行(横一列分)を表すtr要素で構成され、各tr要素の内容はセルを表すth要素、又はtd要素で 構成されるという事になります。
tr要素は、表の中の1つの行を表し、th要素は、そのセルが見出しのセルであるということを表し、td要素は、そのセルの内容がデータであるということを 示します。プラウザでは、th要素内の文字は太字でセンタリングされて表示されます。又、普通はtable要素にborder 要素を指定しなければ、表の枠は表示されません。
つまり、table要素の内容は1つ分の行(横一列分)を表すtr要素で構成され、各tr要素の内容はセルを表すth要素、又はtd要素で 構成されるという事になります。
tr要素は、表の中の1つの行を表し、th要素は、そのセルが見出しのセルであるということを表し、td要素は、そのセルの内容がデータであるということを 示します。プラウザでは、th要素内の文字は太字でセンタリングされて表示されます。又、普通はtable要素にborder 要素を指定しなければ、表の枠は表示されません。
Sample
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>表の基本形。</title>
</head>
<body>
<table>
<tr><th>見出し1</th><th>見出し2</th><th>見出し3</th></tr>
<tr><td>データ1</td><td>データ2</td><td>データ3</td></tr>
<tr><td>データ4</td><td>データ5</td><td>データ6</td></tr>
<tr><td>データ7</td><td>データ8</td><td>データ9</td></tr>
</table>
<table border="2">
<tr><th>見出し1</th><th>見出し2</th><th>見出し3</th></tr>
<tr><td>データ1</td><td>データ2</td><td>データ3</td></tr>
<tr><td>データ4</td><td>データ5</td><td>データ6</td></tr>
<tr><td>データ7</td><td>データ8</td><td>データ9</td></tr>
</table>
</body>
</html>
Internet Explorer8での表示例
