W3G

表の外枠を表示

<table border="3"><tr><td>セル内容</td></tr></table>

border属性は表の外枠の罫線の太さを指定する属性です。値には外枠の太さを整数（ピクセル数で解釈）で指定します。一部の古いUAでborder属性の指定がない場合に、罫線がない区別し難い表の表示になります。なお、border属性は非推奨属性ではありませんが、CSS の border-widthプロパティで代替することもできます。

表の外枠の罫線の表示方法を指定

<table frame="vsides" border="3"><tr><td>セル内容</td></tr></table>

frame属性は表の外枠の罫線のうち上下左右のどの部分を表示させるかを指定します。値には次の9つのキーワードがあります。

void

枠線を表示しない（初期値）

above

上端の枠線のみ表示

below

下端の枠線のみ表示

lhs

左端の枠線のみ表示

rhs

右端の枠線のみ表示

hsides

上端と下端の枠線のみ表示

vsides

左端と右端の枠線のみ表示

box

上下左右全て（周囲）の枠線を表示

border

上下左右全て（周囲）の枠線を表示

初期値は "void" のため指定がない場合は罫線を表示しません。ただし、border属性の値が "1" 以上の時は自動的に frame="border" を補って解釈します。なお、frame属性は非推奨ではありませんが、CSS の border-widthプロパティ, border-styleプロパティで同様の表現に代替できます。

表の各セル間の間隔を指定

<table cellspacing="15" border="3">
<tr><td>セル内容</td><td>セル内容</td></tr></table>

cellspacing属性は、表のセルを区切る罫線（内罫線）のサイズを指定します。つまり、表の個々のセル同士の間隔を指定します。border属性の指定がない、もしくは値が "0" の場合は、セル同士を区切る内罫線は表示されません。内罫線を表示させる場合は、table要素に cellspacing属性と border属性をいっしょに指定します。cellspacing属性の値には内罫線のサイズを整数（ピクセル数で解釈）で指定します。cellspacing属性の指定がない場合、UA の多くは初期値が "2" に設定されています。なお、cellspacing属性は非推奨属性ではありませんが、CSS の border-spacingプロパティで代替が可能です。

表のセル内の余白を指定

<table cellpadding="15" border="3">
<tr><td>セル内容</td></tr></table>

cellpadding属性は表のセル内に余白を指定する属性で、セル同士を区切る内罫線とセル内のテキストやイメージなどの内容との間に詰め物をして設ける余白のサイズを指定します。cellpadding属性の値にはセル内の余白のサイズを整数（ピクセル数で解釈）で指定します。border属性の指定がない、もしくは値が "0" の場合はセル同士を区切る内罫線は表示されませんが、cellpadding属性で指定された余白のサイズは表示に反映されます。cellpadding属性の指定がない場合、UA の多くは初期値が "1" に設定されています。なお、cellpadding属性は非推奨属性ではありませんが、CSS で th要素, td要素をセレクタとする paddingプロパティで代替が可能です。

各セル同士を区切る内罫線の表示方法を指定

<table rules="cols" cellspacing="5" border="3">
<tr><td>セル内容</td><td>セル内容</td></tr></table>

rules属性は各セルの内罫線の表示方法を指定します。値には次の5つのキーワードがあります。

none

枠線を表示しない（初期値）

groups

列グループ・行グループの間の枠線のみ表示

rows

行の間の枠線のみ表示

cols

列の間の枠線のみ表示

all

すべて表示

初期値は "none" のため指定がない場合は罫線を表示しませんが、border属性の値が "1" 以上の時は自動的にrules="all" を補って解釈します。なお、rules属性は非推奨属性ではありませんが、CSS で tbody要素, thead要素, tfoot要素, col要素, colgroup要素をセレクタとする border-widthプロパティ, border-styleプロパティで同様の表現に代替できます。

表全体のサイズを指定

<table width="200" height="150">
<tr><td>セル内容</td></tr></table>

width属性, height属性は表全体のサイズを指定します。width属性は横幅、height属性は高さを指定する属性で、値は表のサイズを整数によるピクセル数で固定するか、または表示域の横幅、縦幅に対する パーセンテージ値（%）で指定します。ただし、指定されたサイズが各セルの内容となっているものの大きさ、間隔などを足したサイズよりも小さい場合は、このサイズ指定は無効です（無視されます）。パーセンテージ値（%）でサイズを指定した場合、ユーザ側の表示域のサイズ変動にあわせて表組全体のサイズも自動的に伸縮します。

なお、height属性はブラウザの独自機能で HTML の仕様で正式に定義されているわけではありませんが、主要視覚ブラウザはすべて対応しています。width属性は非推奨属性ではありませんが、height属性もあわせて、CSS の heightプロパティ, widthプロパティでそれぞれ代替が可能です。

表の表示位置（水平方向の揃え方）の指定

<table align="center">
<tr><td>セル内容</td></tr></table>

align属性は表の配置とその後に続くテキストの揃え方を指定します。値には次の3つのキーワードを指定できます。

left

表は左に配置、その右にテキスト（複数行）が回り込む

center

表を中央揃えに表示する

right

表は右に配置、その左にテキスト（複数行）が回り込む

なお、align属性は非推奨属性のため、CSS の floatプロパティで左右の配置とその後に続くテキストの揃え方を、marginプロパティ（ "table { margin-right : auto ; margin-left : auto ; }"）で中央揃えをそれぞれ代替指定することが推奨されています（CSS によるブロックレベル要素の左右中央揃えを参照）。また、回り込んだテキストを途中で解除したい場合には、br要素に clear属性を指定すれば良いのですが、clear属性も非推奨属性のため、表の後に続く要素に clearプロパティを指定するか、回り込みが指定されている要素の親要素にclearfixを用いるようにしましょう。

個々のセルのサイズを指定

<table border="1"><tr>
<th width="250" height="150">見出セル</th>
<td width="250" height="150">セル内容</td>
</tr></table>

th要素, td要素の width属性, height属性は個々のセルの表示サイズを指定します。width属性がセルの横幅, height属性がセルの高さを設定する属性で、値はセルのサイズを整数によるピクセル数で固定するか、または表示域の横幅、縦幅に対するパーセンテージ値（%）で指定します。サイズの指定は個々のセルに対して指定できますが、列・行それぞれの横幅・高さの表示サイズは、その列、行内でもっとも大きなサイズを指定したセルのサイズが適用されることになります。なお、height属性, width属性ともに非推奨属性のため、CSS の heightプロパティ, widthプロパティで代替することが推奨されています。

セル内のテキストの折り返しを禁止

<table border="1"><tr>
<th nowrap>見出セル</TH>
<td nowrap>セル内容</TD>
</tr></table>

th要素, td要素の nowrap属性はセル内のテキストを折り返しさせないで表示させる属性です。通常、表示域のサイズに応じて、または表やセルのサイズが指定されている場合はセル内に配置されたテキストはそのサイズに応じて自動的に折り返して表示されます。nowrap属性はその折り返しを禁止する属性で、これが追加されたセル内のテキストは表示域のサイズが縮小されても、テキストの折り返しが行われず、表示域からはみ出して横スクロールを表示することもあります。これは nobr要素と同じ機能です。なお、nowrap属性は非推奨属性のため、CSS の white-spaceプロパティで代替することが推奨されています。

セル内容の水平（左右）方向の揃え方の指定

<table border="1" align="center">
<tr align="center"><th>見出しセル</th><td>セル内容</td></tr>
<tr><th align="center">見出しセル</th>
<td align="center">セル内容</td></tr></table>

align属性は表のセル内のテキストやイメージなどの内容の水平（左右）方向の揃え方を指定します。tr要素に対して align属性を指定した場合は、その行内に含まれるセル全てを対象に位置揃えを指定することができます。align属性の値には次の5つのキーワードがあります。

left

内容とテキストを左揃えで表示する

right

内容とテキストを右揃えにする

center

内容とテキストを中央揃えにする

justify

文字を均等に配置し、テキストを両端揃えで表示する

char

char属性で指定した特定の文字を基準に揃えて表示する

align属性を指定しない場合、セル内容の位置揃えは、使用する言語の書字方向に応じて表示されます。使用する言語は lang属性に指定されている言語コードにより決定されます。日本語（ja）であれば初期値は左揃えの状態（left）で表示されます。ただし、見出しにあたるセルを定義する th要素の内容は使用する言語に関係なく多くの場合、中央揃えで表示されます。なお、align属性は非推奨属性のため、CSS の text-alignプロパティでテキストや画像などのセル内容の水平（左右）方向の揃え方を代替することが推奨されています。

セル内容の垂直（上下）方向の揃え方の指定

<table border="1" align="center">
<tr valign="top"><th>見出しセル</th><td>セル内容</td></tr>
<tr><th valign="top">見出しセル</th>
<td valign="top">セル内容</td></tr></table>

valign属性はセル内容の垂直（上下）方向の揃え方を指定します。tr要素に対して valign属性を指定した場合は、その行内に含まれるセル全てを対象に位置揃えを指定することができます。valign属性に指定できる値には次の4つのキーワードがあります。

top

セルの上辺に内容の上辺を揃えて表示する

middle

セルの垂直方向の長さの中央に表示する

bottom

セルの下辺に内容の下辺を揃えて表示する

baseline

テキストの1行目をベースラインで揃えて表示する（2行目以降は影響なし）

valign属性を指定しない場合、テキストやイメージは垂直方向の長さの中央（middle）に表示されます。なお、valign属性は非推奨属性ではありませんが、CSS で td要素, th要素の各セルをセレクタとする vertical-alignプロパティで同様の表現に代替できます。

1. 背景に色をつける

<table border="1" bgcolor="#000000">
<tr bgcolor="#FFFFFF"><th>見出し内容</th><td>内容</td></tr>
<tr><th bgcolor="#FFFFFF">見出し内容</th>
<td bgcolor="#FFFFFF">内容</td></tr></table>

table要素の bgcolor属性は表全体に背景色を指定する属性です。tr要素の bgcolor属性はその1行に含まれるセル全てに対して背景色を指定します。th要素, td要素の bgcolor属性は表の各セルに個別で背景色を指定することができます。いずれの要素の bgcolor属性の値も RGB値、またはカラーネームで色を指定します。なお、bgcolor属性は非推奨属性のため、それぞれの対象に対して CSS の background-colorプロパティで代替することが推奨されています。

2. 背景にイメージを表示する

<table border="1" background="画像ファイルのURI">
<tr background="画像ファイルのURI">
<th>見出しセル</th><td>セル内容</td></tr>
<tr><th background="画像ファイルのURI">見出しセル</th>
<td background="画像ファイルのURI">セル内容</td></tr></table>

table要素の background属性は表全体に背景画像を指定する属性です。tr要素の background属性はその1行に含まれるセル全てに対して背景画像を指定します。th要素, td要素の background属性は表の各セルに個別で背景画像を指定することができます。指定された背景画像は、それぞれ表全体のサイズ、セルのサイズに応じて縦横にタイル状に繰り返し表示されます。background属性の値には画像ファイルの所在を URI で指定します。

background属性は HTML の仕様には正式に定義されていないブラウザの独自機能ですが、主要視覚ブラウザはすべて対応しています。なお、代替表現は CSS の background-imageプロパティで行うことが可能です。

1. 複数行のセルを縦方向に連結する

<table border="2">
<tr><th rowspan="5">見出しセル</th>
<td>セル内容</td></tr>
<tr><td>セル内容</td></tr><tr><td>セル内容</td></tr>
<tr><td>セル内容</td></tr><tr><td>セル内容</td></tr>
</table>

th要素, td要素の rowspan属性はセルを縦方向の複数のセル（行）に連結する属性です。rowspan属性を追加した th要素、または td要素のセルは指定数のセルを連結させ、縦にまたいだ形で表示されます。指定方法の手順は、まず基本の表を作成し、その中で連結させる複数のセルのうち、いちばん上にあるセルに rowspan属性を追加し、まとめるセルの数に応じて値を整数で指定します。最後にまとめたことによって吸収される分のセルの記述を削除すると良いでしょう。

2. 複数行のセルを横方向に連結する

<table border="1">
<tr><th colspan="5">見出しセル</th></tr>
<tr><td>セル内容</td><td>セル内容</td><td>セル内容</td>
<td>セル内容</td><td>セル内容</td></tr>
</table>

th要素, td要素の colspan属性はセルを横方向の複数のセル（列）に連結する属性です。colspan属性を追加した th要素、または td要素のセルは指定数のセルを連結させ、横にまたいだような形で表示されます。指定方法の手順は、まず基本の表を作成し連結させる複数のセルをひとつにまとめて、そこに colspan属性を追加し、まとめるセルの数に応じて値を整数で指定します。最後にまとめたことによって吸収される分のセルの記述を削除すると良いでしょう。