トップページへ戻る / タグ辞典トップに戻る / HP作成講座トップへ戻る

テーブルタグ
▲テーブルを作成する
<table border=1>
<tr>
<td>1行1列目</td>
<td>1行2列目</td>
</tr>
<tr>
<td>2行1列目</td>
<td>2行2列目</td>
</tr>
</table>
1行1列目 1行2列目
2行1列目 2行2列目
  • <tr>で行、<td>で列が作られます。
  • borderが枠の太さとなります。指定しない場合や、border=0にした場合は、枠は表示されません。
▲テーブルの幅、高さを指定する
<table border=1 width=200 height=200>
<tr>
<td>テーブルの幅200、高さ200に指定</td>
</tr>
</table>
テーブルの幅200、高さ200に指定
<table border=1 width=80%>
<tr>
<td>テーブルの幅を80%の比率で指定</td>
</tr>
</table>
テーブルの幅を80%の比率で指定
  • widthで幅、heigthで高さの指定ができます。
  • 普通にピクセル数で指定するのが一般的ですが、例のように比率での指定もできます。
▲テーブルの表示位置の指定
<table border=1 align=left>
<tr>
<td>テーブルの位置左</td>
</table>

<table border=1 align=center>
<tr>
<td>テーブルの位置真ん中</td>
</table>

<table border=1 align=right>
<tr>
<td>テーブルの位置右</td>
</table>
テーブルの位置左


テーブルの位置真ん中

テーブルの位置右


  • leftで左、centerで真ん中、rightで右です。そのまんまです。
▲テーブルに見出しをつける
<table border=1>
<tr>
<th>見出し</th>
</tr>
<tr>
<td>↑これが見出し</td>
</tr>
</table>
見出し
↑これが見出し
  • <td>ではなく、<th>で囲むと、見出しとなります。
  • 見出しは、太字で中央揃え表示になります。
▲セルを結合する
<table border=1>
<tr>
<td colspan=2>列を結合</td>
</tr>
<tr>
<td rowspan=2>行を結合</td>
<td>2行2列目</td>
</tr>
<tr>
<td>3行2列目</td>
</tr>
</table>
列を結合
行を結合 2行2列目
3行2列目
  • colspan=結合したいセル数で列の結合ができます。
  • rowspan=結合したいセル数で行の結合ができます。
  • tdだけではなく、ｔhで見出しを結合することもできます。
▲セル同士の間隔を指定する
<table border=1 cellspacing=10>
<tr>
<td>1行1列目</td>
<td>1行2列目</td>
</tr>
<tr>
<td>2行1列目</td>
<td>2行2列目</td>
</tr>
</table>
1行1列目 1行2列目
2行1列目 2行2列目
  • cellspacing=ピクセル数で、セル同士の間隔を指定できます。
▲セル内のマージンを指定する
<table border=1 cellpadding=10>
<tr>
<td>1行1列目</td>
<td>1行2列目</td>
</tr>
<tr>
<td>2行1列目</td>
<td>2行2列目</td>
</tr>
</table>
1行1列目 1行2列目
2行1列目 2行2列目
  • cellpadding=ピクセル数で、セル同士の間隔を指定できます。
  • テーブルを見やすくするために、このタグはかなり使えます。
▲外枠の色を指定する
<table border=3 bordercolor=#00FFFF>
<tr>
<td>1行1列目</td>
<td>1行2列目</td>
</tr>
<tr>
<td>2行1列目</td>
<td>2行2列目</td>
</tr>
</table>
1行1列目 1行2列目
2行1列目 2行2列目
<table border=3 bordercolorlight=00FFFF bordercolordark=#00AAAA>
<tr>
<td>1行1列目</td>
<td>1行2列目</td>
</tr>
<tr>
<td>2行1列目</td>
<td>2行2列目</td>
</tr>
</table>
1行1列目 1行2列目
2行1列目 2行2列目
  • 外枠の色を指定するには、bordercolorを使います。
  • bordercolorlight、bordercolordarkを指定して、枠線を立体的に見せる方法もあります。しかし、これはNetscapeではうまく動作しません。
▲セルの背景に色をつける
<table border=1>
<tr>
<td bgcolor=white>1行1列目</td>
<td bgcolor=red>1行2列目</td>
</tr>
<tr>
<td bgcolor=blue>2行1列目</td>
<td bgcolor=green>2行2列目</td>
</tr>
</table>
1行1列目 1行2列目
2行1列目 2行2列目
  • 背景色を変えたいセルのTDでbgcolorを指定すると、色を変えられます。
  • 色については、カラーコード表を参考にして下さい。
▲テーブルの背景に画像を使う
<table border=1 background=kabe.gif>
<tr>
<td>1行1列目</td>
<td>1行2列目</td>
</tr>
<tr>
<td>2行1列目</td>
<td>2行2列目</td>
</tr>
</table>
1行1列目 1行2列目
2行1列目 2行2列目
  • tableでbackground=画像ファイルのURLを指定すると、テーブルの背景にその画像が表示されます。
  • この例の場合の画像ファイルはkabe.gifになります。Webbing Studioの素材を使用しています。