表全体の指定
テーブルタグの基本的な構成
<table><tr><td><tbody>

 表を作成する基本的なタグです。<table>タグ、<tr>タグ、<td>タグ、<tbody>タグなどを組み合わせて使用します。

 ■ 表タグの基本構成とその概略
<table>
<tbody>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</tbody>
</table>
※ これらのタグは、表作りに必要な基本タグです。
<tbody>は、省略可能です。
tableイメージ
 ◆<table>タグ…表全体を指定するタグです。
 ◆<tbody>タグ…行をグループ化するタグです。<table>タグの下に記述します。
 ◆<tr>タグ…行を指定するタグです。<tbody>タグに囲まれた部分で使用します。
 ◆<td>タグ…セルを指定するタグです。<tr>タグに囲まれた部分で使用します。
表タグの各ページでは省いていますが、HTML4.01では<tbody>タグ(行のグループ化)の指定が必須とされています。

 【参考】 関連するページ テーブル作成タグ ◆「テーブル作成に使用するタグとその記載順位」を掲載しています。

 ★ 使用例とブラウザでの表示
※ 分かりやすくするために、このサンプルでは<table>タグにborder属性を加えています。
(borderを指定しないと、枠の線は表示されません。)
使 用 例   ブラウザの表示
☆1行の中に3列のセル
<table border=3>
<tr><td>セル1</td>
<td>セル2</td>
<td>セル3</td></tr>
</table>

セル1セル2セル3
☆2行の中に3列のセル
<table border=3>
<tr><td>セル1-1</td>
<td>セル1-2</td>
<td>セル1-3</td></tr>
<tr><td>セル2-1</td>
<td>セル2-2</td>
<td>セル2-3</td></tr>
</table>

セル1-1セル1-2セル1-3
セル2-1セル2-2セル2-3
☆1行の中に3列のセルborderなし)
<table>
<tr><td>セルA</td>
<td>セルB</td>
<td>セルC</td></tr>
</table>

セルAセルBセルC

表に説明を付ける
<table summary="">

 <table>タグに summary="" を追加すると、テーブル(表)の説明文を付けることができます。summary属性を指定してもブラウザに表示しませんが、音声ブラウザではこの説明文を「読み上げ」ます。

 <table summary="ここに説明文を記述">
summary="" 表の説明文を記述

 ★ 使用例とブラウザでの表示
使 用 例   ブラウザの表示
<table border=3 summary="お勧めサーバーの一覧。
左右2列の表でサーバー名と理由を紹介しています。"
>

<caption>お勧めサーバー</caption>
<tr><th>サーバー名</th><th>理 由</th></tr>
<tr><td>サーバーA</td>
<td>月額300円です。</td></tr>
<tr><td>サーバーB</td>
<td>転送量無制限。</td></tr>
</table>

お勧めサーバー
サーバー名理 由
サーバーA月額300円です。
サーバーB転送量無制限。

表の境界線を指定する
<table border="">

 <table>タグに border="" を追加すると、表の境界線を表示します。

 <table border="3">
border="" 外枠の太さをピクセル数で指定
※ 外枠の線は立体的な線で表示されます。
数値が大きくなるほど外枠の線は太くなり、"0" にすると全ての枠の線が消えます。
また、数値の指定は行わずに border だけを記述することもできます。 この場合、border="1" と同じになります。
この指定内容は、スタイルシートで代替えできます。
※ ただし、表示される境界線のスタイルは異なります。

 ★ 使用例とブラウザでの表示
使 用 例   ブラウザの表示
☆数値を指定しない場合
<table border>
<tr><td>ボーダーA</td>
<td>ボーダーB</td></tr>
</table>

ボーダーAボーダーB
※ この場合、border=1 と同じ
  になります。
☆ border=4 の場合
<table border=4>
<tr><td>ボーダーA</td>
<td>ボーダーB</td></tr>
</table>

ボーダーAボーダーB
☆ border=8 の場合
<table border=8>
<tr><td>ボーダーA</td>
<td>ボーダーB</td></tr>
</table>

ボーダーAボーダーB

関連するページ
HTML タグページ 境界線の色(表):境界線の色を指定する(表)
CSS スタイルシート表の境界線:表の境界線を指定する

セルの間隔を指定する
<table cellSpacing="">

 <table>に cellSpacing="" を追加すると、セルとセルの間隔を指定できます。

 <table cellSpacing="3">
cellSpacing="" セルの間隔をピクセル数で指定
 * cellspacing属性を指定しない場合は、一般的なブラウザでは 2 ピクセルの間隔が空きます。
 ※ 表内の境界線を表示させるには、border属性を指定しておく必要があります。
この指定内容は、スタイルシートで代替えできます。

 ★ 使用例とブラウザでの表示
使 用 例   ブラウザの表示
☆ cellSpacing=0 の場合
<table border=1 cellSpacing=0>
<tr><td>セルスペースA</td>
<td>セルスペースB</td></tr>
</table>

セルスペースAセルスペースB
☆ cellSpacing=10 の場合
<table border=1 cellSpacing=10>
<tr><td>セルスペースA</td>
<td>セルスペースB</td></tr>
</table>

セルスペースAセルスペースB

関連するページ
CSS スタイルシート境界線の間隔指定:境界線の間隔を指定する

セル内のパディング(余白)を指定する
<table cellPadding="">

 <table>タグに cellPadding="" を追加すると、セル内のパディング(余白)を指定できます。

 <table cellPadding="3">
cellPadding="" セルの余白をピクセル数で指定
この指定内容は、スタイルシートで代替えできます。

 ★ 使用例とブラウザでの表示
使 用 例   ブラウザの表示
☆ cellPadding=0 の場合
<table border=1 cellPadding=0>
<tr><td>パディングA</td>
<td>パディングB</td></tr>
</table>

パディングAパディングB
☆ cellPadding=10 の場合
<table border=1 cellPadding=10>
<tr><td>パディングA</td>
<td>パディングB</td></tr>
</table>

パディングAパディングB

関連するページ
CSS スタイルシートセルの余白:セル内の余白を指定する

表の大きさ(横幅)を指定する
<table width="">

 <table>タグに width="" を追加すると、表の大きさ(横幅)を指定できます。

 <table width="400">
width="" 横のサイズをピクセル数かパーセントで指定
height="" 縦のサイズをピクセル数かパーセントで指定
* サイズの指定がない場合は、表の内容により自動的に調整されます。
height属性について
<table>タグに対するheight属性(表の高さ)は、HTML4.01の仕様にはありません。しかし、一般的なブラウザでは、この属性にも対応しているようです。
この指定内容は、スタイルシートで代替えできます。

 ★ 使用例とブラウザでの表示
使 用 例   ブラウザの表示
☆サイズを指定しない場合
<table border=1>
<tr><td>横幅指定A</td>
<td>横幅指定B</td></tr>
</table>

横幅指定A横幅指定B
☆ width="200"の場合
<table border=1 width=200>
<tr><td>横幅指定A</td>
<td>横幅指定B</td></tr>
</table>

横幅指定A横幅指定B
☆ width="200"、height="60"の場合
<table border=1 width=200 height=60>
<tr><td>縦横指定A</td>
<td>縦横指定B</td></tr>
</table>

縦横指定A縦横指定B

関連するページ
CSS スタイルシート表の大きさ:表の大きさ(幅と高さ)を指定する

外枠の表示方法を指定する
<table frame="">

 <table>タグに frame="" を追加すると、外枠の表示スタイルを指定できます。

 <table frame="border">
frame="" void全ての外枠を表示しない
lhs左の外枠のみ表示
rhs右の外枠のみ表示
vsides左右の外枠のみ表示
above上の外枠のみ表示
below下の外枠のみ表示
hsides上下の外枠のみ表示
box
border
全ての外枠を表示
border属性の値に 1 以上の数値を指定した場合は、同時に frame="border" が指定されたものと解釈されます。

 ★ 使用例とブラウザでの表示
使 用 例   ブラウザの表示
☆ void 全ての外枠を表示しない
<table border=4 frame=void>
<tr><td>外枠指定A</td>
<td>外枠指定B</td></tr>
</table>

外枠指定A外枠指定B
☆ vsides 左右の外枠のみ表示
<table border=4 frame=vsides>
<tr><td>外枠指定A</td>
<td>外枠指定B</td></tr>
</table>

外枠指定A外枠指定B
☆ hsides 上下の外枠のみ表示
<table border=4 frame=hsides>
<tr><td>外枠指定A</td>
<td>外枠指定B</td></tr>
</table>

外枠指定A外枠指定B

内枠の表示方法を指定する
<table rules="">

 <table>タグに rules="" を追加すると、内枠の表示スタイルを指定できます。

 <table rules="none">
rules="" none全ての内枠を表示しない
rows内枠の横線のみ表示
cols内枠の縦線のみ表示
groupsグループの内枠のみ表示
all全ての内枠を表示
border属性の値に 1 以上の数値を指定した場合は、同時に rules="all" が指定されたものと解釈されます。
グループについては、「行をグループ化する」「列をグループ化する」のページをご覧下さい。

 ★ 使用例とブラウザでの表示
使 用 例   ブラウザの表示
☆ none 全ての内枠を表示しない
<table border=4 rules=none>
<tr><td>内枠指定A</td>
<td>内枠指定B</td></tr>
<tr><td>内枠指定C</td>
<td>内枠指定D</td></tr>
</table>

内枠指定A内枠指定B
内枠指定C内枠指定D
☆ rows 内枠の横線のみ表示
<table border=4 rules=rows>
<tr><td>内枠指定A</td>
<td>内枠指定B</td></tr>
<tr><td>内枠指定C</td>
<td>内枠指定D</td></tr>
</table>

内枠指定A内枠指定B
内枠指定C内枠指定D
☆ groups グループの内枠のみ表示
<table border=4 rules=groups>
<thead><tr>
<th colSpan=2>ヘッダ</th></tr></thead>
<tbody>
<tr><td>内枠指定A</td>
<td>内枠指定B</td></tr>
<tr><td>内枠指定C</td>
<td>内枠指定D</td></tr></tbody>
<tfoot><tr>
<th colSpan=2>フッタ</th></tr></tfoot>
</table>

ヘッダ
内枠指定A内枠指定B
内枠指定C内枠指定D
フッタ
この指定に対応していないブラウザでは、全ての内枠が表示されます。

表にタイトルを付ける
<caption>

 <caption>タグで、表にタイトルを付けることができます。

 <caption>表のタイトル</caption>
* <caption>タグで指定したタイトルは、表の上部中央に表示されます。
 <caption>タグの記述位置
 ★ このタグは、<table>タグの直下に記述します。
☆グループ化の指定を行っていない場合   ☆グループ化の指定を行っている場合
*<table>タグと<tr>タグの間に記述します。

<table>
<caption>タイトル</caption>
<tr><td>表の内容</td></tr>
 ・
 ・
</table>
*<table>タグと<thead>(<tfoot><tbody>)タグの間、
または<table>タグと<colgroup>タグの間に記述。
<table>
<caption>タイトル</caption>
<tbody><tr><td>表の内容</td></tr>
 ・
 ・
</table>

 【参考】 関連するページ テーブル作成タグ ◆「テーブル作成に使用するタグとその記載順位」を掲載しています。

 ★ 使用例とブラウザでの表示
使 用 例   ブラウザの表示
<table border=1>
<caption>表-1 県庁所在地</caption>
<tr><td>北海道:札幌市</td>
<td>青森県:青森市</td></tr>
</table>

表-1 県庁所在地
北海道:札幌市青森県:青森市

表タイトルの位置を指定する
<caption align="">

 <caption>タグに align="" を追加すると、表タイトルの表示位置を指定できます。

 <caption align="bottom">表のタイトル</caption>
align="" top表の上部中央に表示(初期値)
bottom表の下部中央に表示
left左寄りに表示
right右寄りに表示
 表示位置の違い
 leftright の指定は、ブラウザによりタイトルの表示位置が異なります。これらの値を指定した場合、Internet Exp. や Opera などでは表の上部の左側(または右側)にタイトルを表示しますが、Firefox などでは表の左側(または右側)に回り込んでタイトルを表示します。
この属性は、HTML4.01では非推奨とされています。詳細は、「非推奨タグと非推奨属性」のページをご覧下さい。非推奨タグのページへ
この指定内容は、スタイルシートで代替えできます。

 ★ 使用例とブラウザでの表示
使 用 例   ブラウザの表示
☆上部にタイトルを表示する場合
<table border=1>
<caption align=top>表-1 県庁所在地</caption>
<tr><td>北海道:札幌市</td>
<td>青森県:青森市</td></tr>
</table>

表-1 県庁所在地
北海道:札幌市青森県:青森市

*align属性を省略した場合と同じです。
☆下部にタイトルを表示する場合
<table border=1>
<caption align=bottom>表-1 県庁所在地</caption>
<tr><td>北海道:札幌市</td>
<td>青森県:青森市</td></tr>
</table>

表-1 県庁所在地
北海道:札幌市青森県:青森市
☆左にタイトルを表示する場合
<table border=1>
<caption align=left>表-1 県庁所在地</caption>
<tr><td>北海道:札幌市</td>
<td>青森県:青森市</td></tr>
</table>

表-1 県庁所在地
北海道:札幌市青森県:青森市
align属性は、HTML4.01では非推奨とされています。

関連するページ
CSS スタイルシート表タイトルの位置:表タイトルの位置を指定する
CSS スタイルシート表タイトルの水平位置:表タイトルの位置(水平方向)を指定する
Utilety Page (参考)非推奨タグ:「非推奨タグと非推奨属性」へ

表の基本表の説明 表の境界線セル間隔 セル余白表の大きさ 外枠の表示内枠の表示 タイトルタイトルの位置 テーブtag リファレンス へ