<table>タグ
<table>タグの機能と属性
機能 |
テーブル(表)を定義 |
属性 |
HTML-4.01 |
コア 言語 イベント summary width border frame rules cellspacing cellpadding datapagesize |
XHTML-1.0 |
コア 言語 イベント summary width border frame rules cellspacing cellpadding |
<table>タグは、テーブル(表)を定義します。最低、行を定義する<tr>タグと、セルを定義する<td>タグをネストします。その他、項目名を定義する<th>、表題を定義する<caption>などがあります。<table>にネストされるその他のタグについては、詳細ページを参照してください。
<table>にネストされるタグ
タグ名 |
機能 |
詳細 |
<caption> |
テーブルの表題を定義 |
詳細 |
<tr> |
テーブルに新しい行を定義 |
詳細 |
<th> |
ヘッダセル(項目名のセル)を定義 |
詳細 |
<td> |
データセル(通常のセル)を定義 |
詳細 |
<thead> |
テーブルのヘッダ部を定義 |
詳細 |
<tbody> |
テーブルのボディ部を定義 |
詳細 |
<tfoot> |
テーブルのフッタ部を定義 |
詳細 |
<colgroup> |
テーブルの列グループを定義 |
詳細 |
<col> |
列グループの中で列を定義 |
詳細 |
border属性
border属性を指定すると、テーブルの周囲とセルに縁取りを表示します。この属性の値には、整数値(ピクセル数)を指定します。縁取りは、指定された太さで表示されます。下の例は、基本的なテーブルに、border属性を指定したものです。
table_border.html
<html>
<head>
<title><table>タグの例</title>
</head>
<body>
<h1>属性にborder="1"を指定</h1>
<table border="1">
<caption>表題</caption>
<tr>
<th>項目名1</th>
<td>データ1a</td>
<td>データ1b</td>
</tr>
<tr>
<th>項目名2</th>
<td>データ2a</td>
<td>データ2b</td>
</tr>
</table>
</body>
</html>
cellspacing属性
cellspacing属性は、セルとセルの間隔と、テーブルの周囲との間隔を指定します。指定する値は数値(ピクセル数)です。何も指定しない場合は、2ピクセルとなります。
table_cellspacing.html
<html>
<head>
<title><table>タグの例</title>
</head>
<body>
<h1>cellspacing属性の例</h1>
<h2>属性にborder="1" cellspacing="10"を指定</h2>
<table border="1" cellspacing="10">
<caption>表題</caption>
<tr>
<th>項目名1</th>
<td>データ1a</td>
<td>データ1b</td>
</tr>
<tr>
<th>項目名2</th>
<td>データ2a</td>
<td>データ2b</td>
</tr>
</table>
<h2>属性にborder="1" cellspacing="0"を指定</h2>
<table border="1" cellspacing="0">
<caption>表題</caption>
<tr>
<th>項目名1</th>
<td>データ1a</td>
<td>データ1b</td>
</tr>
<tr>
<th>項目名2</th>
<td>データ2a</td>
<td>データ2b</td>
</tr>
</table>
</body>
</html>
cellpadding属性
cellpadding属性は、セルの内容から、セルの端までの間隔を指定します。何も指定しない場合は、1ピクセルです。
table_cellpadding.html
<html>
<head>
<title><table>タグの例</title>
</head>
<body>
<h1>cellpaddingの例</h1>
<h2>属性にborder="1" cellpadding="10"を指定</h2>
<table border="1" cellpadding="10">
<caption>表題</caption>
<tr>
<th>項目名1</th>
<td>データ1a</td>
<td>データ1b</td>
</tr>
<tr>
<th>項目名2</th>
<td>データ2a</td>
<td>データ2b</td>
</tr>
</table>
<h2>属性にborder="1" cellpadding="0"を指定</h2>
<table border="1" cellpadding="0">
<caption>表題</caption>
<tr>
<th>項目名1</th>
<td>データ1a</td>
<td>データ1b</td>
</tr>
<tr>
<th>項目名2</th>
<td>データ2a</td>
<td>データ2b</td>
</tr>
</table>
</body>
</html>
summary属性
summary属性には、テーブルの内容をまとめたテキストを記述します。主に、障害を持つ人のために記述します。
frame属性
テーブルの縁取りのどの部分を表示するかを指定します。何も指定しない場合は、「border」(4辺全てを表示)です。ただし、ブラウザによっては、この属性を指定しても、機能しないものがあります。
指定できる値は次の通りです。
- void(表示しない)
- above(上辺のみ)
- below(下辺のみ)
- hsides(上辺と下辺)
- lhs(左辺のみ)
- rhs(右辺のみ)
- vsides(左辺と右辺)
- box(4辺全て)
- border(4辺全て(初期値))
rules属性
テーブル内に含まれるセルの枠線のどこを表示するかを指定します。何も指定しない場合は、「all」(全て表示)です。ただし、ブラウザによっては、この属性を指定しても、機能しないものがあります。
- rows(行、横方向のみ)
- cols(列、縦方向のみ)
- group(グループのみ)
- none(表示しない)
- all(全て表示)
with属性
with属性ではテーブル全体の幅を指定することができます。ただし、CSSを使用すれば、同等のことが可能ですので、テーブルの幅を調節したい場合には、CSSで指定するようにしてください。
datapagesize属性
この属性は何も定義されていないようです。