表に関するタグ

HTMLでは専用のタグを使って表を作れます。

表のサンプル
タグの名前 効果
TABLE 表を作成
  1. 表とは <table>
  2. 表作成の基本
  3. 見出しセル    <th>
  4. 高さと幅の指定    width height 属性
  5. 文字や表の配置    valign 属性
  6. セルと文字の間隔   cellspacing  cellpadding 属性
  7. 背景色と罫線の色   bgcolor bordercolor 属性
  8. 複数の行、列にまたがるセル   rowspan colspan 属性
  9. 罫線が見えない表の活用   border 属性




　

 

1 表とは

HTMLではTABLEタグを利用して 表を作成することが出来ます。
またTABLEタグは、表として利用するほか、罫線を見えなくすることでページの段組みやレイアウト等に使用することができるので
幅広く活用されています。

2 表作成の基本

表を作るためには、<table> と </table> タグを使います。
<table> タグには border 属性を指定して、表の罫線の太さを決められます。
border に 属性値 として 0 を指定すると、罫線が見えなくなります。

さらに、表の中のセルをつくるために、<table>タグの範囲内に
<tr> </tr> と
<td> </td> タグを記入します。

<tr>と</tr>で囲まれた範囲が 表の横1行となります。 この範囲内に <td>と</td>を記入します。
<td>と</td>で囲まれた範囲が 表のセルとなります。

<table> <tr> <td> タグ それぞれの使い方は以下のようなイメージになります。

<tr> タグと <td> タグのセットを増やすと、表の列や行を増やすことが出来ます。

基本的な書き方

実際のHTMLでは、表を以下のように表記します。

HTML入力

<table border="1">

<tr> <td>シンプルな表</td> <td>うまくいくかな</td> </tr>
<tr> <td>　 第2行 　　</td> <td>　　第2行　　　</td> </tr>

</table>

出力

シンプルな表 うまくいくかな
第2行 第2行

罫線が太い表の例

HTML入力

<table border="5">

<tr> <td>　罫線が　</td> <td>　　太い表　</td> </tr>

</table>

出力

　罫線が　 　太い表　

罫線が見えない表の例

HTML入力

<table border="0">

<tr> <td>　罫線が　</td> <td>　　見えない表　</td> </tr>

</table>

出力

　罫線が 　見えない表　

罫線が見えない表を使って、段組やレイアウトを行うと、様々な表現を行えます。
詳しくは後述します。

3 見出しセル ( TH タグ )

<td> タグの代わりに <th> タグを使うと、少し目立つ 見出しセル が作れます。
見出しセルは 内部の文字が自動的に 太字、中央揃え になります。
行や列方向の見出しとして使用すると良いでしょう。

HTML入力

<table border="1">

<tr> <th> 見出し1 　　</th> <th> 見出し2 　　　</th> </tr>
<tr> <td> ここは内容1 </td> 　<td> ここは内容2　 </td>　 </tr>

</table>

　
出力

見出し1 見出し2
ここは内容1 ここは内容2

表の中で項目名などを表現するのに適しています。

4 高さと幅の指定 ( width と height 属性 )

<table> タグに width や height 属性を追加すると 表の幅や高さを指定することが出来ます。
属性値に 数字を指定すると ピクセル単位での幅、高さ指定となります。
属性値の数字の後ろに％をつけると ウィンドウの幅、高さに対する割合での表の幅、高さ指定となります。

同様に <td> や <th> タグに width や height 属性を指定すると セルの幅や高さが指定できます。

HTML入力

<table border="1" width="300" height="200">

<tr> <th> 見出し1 　　</th> <th> 見出し2 　　　 　　 </th> 　 </tr>
<tr> <td> この表は </td> 　<td> 幅300 高さ200ピクセルです </td>　 </tr>

</table>

　
出力

　
見出し1 見出し2
この表は 幅300 高さ200ピクセルです

通常、表のサイズは自動的に調整されますが、width と height 属性を使えば自由なサイズで表を作ることができます。

5 文字や表の配置 ( align   valign 属性 )

<table> に align 属性を追加すると、表全体をページの左(left) 中央(center) 右(right) に配置できます。
(例)   <table align="center"> .......... </table>

<td> に align 属性を追加すると、セルの中の文字を 左(left) 中央(center) 右(right) に配置できます。

HTML入力

<table border="1" width="200">
<tr>
<th> クラス </th>
<th> 得点</th>
</tr>
<tr>
<td>Aクラス</td>  <td align="right">1,200</td>
</tr>
<tr>
<td>Bクラス</td>  <td align="right">900</td>
</tr>
<tr>
<td>Cクラス</td>  <td align="right">9,800</td>
</tr>
</table>

　
出力

クラス 得点
Aクラス 1,200
Bクラス 900
Cクラス 9,800

<td>に valign 属性を追加すれば セルの中の文字を 上（top） 中（middle） 下（bottom） に配置できます。

HTML入力

<table border="1" width="300" height="200">

<tr> <th> 見出し1 　　</th> <th> 見出し2 　　　 　　 </th> 　 </tr>
<tr> <td valign="top"> この表は </td> 　<td valign="bottom"> 幅300 高さ200ピクセルです</td>　 </tr>

</table>

　
出力

　
見出し1 見出し2
この表は 幅300 高さ200ピクセルです

Internet Explorer では 初期状態で縦方向の中央揃えになります。
valign 属性は縦に長いセルに文字を表示する際に活用できます。

6 セルと文字の間隔 ( cellspacing cellpadding 属性 )

<table> タグに cellspacing 属性を追加すると、セルとセルの間隔をピクセル単位で指定できます。

HTML入力

<table border="1" width="200"cellspacing="10">
<tr>
<th> クラス </th>
<th> 得点</th>
</tr>
<tr>
<td> Aクラス </td>  <td align="right">1,200</td>
</tr>
<tr>
<td>Bクラス</td>  <td align="right">900</td>
</tr>
<tr>
<td>Cクラス</td>  <td align="right">9,800</td>
</tr>
</table>

　
出力

クラス 得点
Aクラス 1,200
Bクラス 900
Cクラス 9,800



<table> タグに cellpadding 属性を追加すると、罫線と、セル内の文字等の距離をピクセル単位で指定できます。

HTML入力

<table border="1" width="200"cellpadding="10">
<tr>
<th> クラス </th>
<th> 得点</th>
</tr>
<tr>
<td> Aクラス </td>  <td align="right">1,200</td>
</tr>
<tr>
<td>Bクラス</td>  <td align="right">900</td>
</tr>
<tr>
<td>Cクラス</td>  <td align="right">9,800</td>
</tr>
</table>

　
出力

クラス 得点
Aクラス 1,200
Bクラス 900
Cクラス 9,800

cellpadding を 0 に設定すると 罫線と文字が密着して見づらいですが、
画像などを隙間なく 敷き詰めたい時などは、あえて cellpadding や cellspacing を 0 に設定する場合があります。

7 背景色と罫線の色 ( bgcolor bordercolor 属性 )

<table> <td> <th> タグには、bgcolor 属性を追加することでそれぞれの範囲の背景色を指定できます。
また bordercolor 属性を追加すれば、罫線の色を指定できます。

HTML入力

<table border="1" bordercolor="green" >

<tr> <td>　　　　　　　　　　　　　　　　　　　　</td>　　<td bgcolor="red">   赤いセル　</td> </tr>
<tr> <td bgcolor="#8888ff">青いセル</td>　　<td>　　　　　　　　 　　　　カラフルな表　</td> </tr>

</table>


出力

赤いセル
青いセル カラフルな表

8 複数の行、列にまたがるセル ( colspan rowspan 属性 )

1つのセルが複数の列や行にまたがる場合は、<td> や <th> タグに colspan rowspan 属性を追加します。

colspan="3" なら横に３列にまたがるセル
rowspan="2" なら縦に２行にまたがるセルを作れます。

HTML入力

<table border="1">

<tr> <td>例</td>　　　　　　　　　　　　　　　　<td colspan="2">横長セル　　　　　</td> </tr>
<tr> <td rowspan="2">縦長セル</td> 　<td>横長の場合は</td> <td>rowspan</td> </tr>
<tr>　　　　　　　　　　　　　　　　　　　　　 　　　<td>縦長の場合は</td> <td>colspan</td> </tr>

</table>

出力

例 横長セル
縦長セル 横長の場合は rowspan
縦長の場合は colspan

9 罫線が見えない表の活用 ( border="0" )

<table>タグの border 属性で表の罫線の太さを指定できますが、 太さを 0 に指定すると罫線が見えなくなるので、
結果的に表が見えなくなります。

この見えない表は、様々な使い方ができます。

文章を2段組にするために使用

通常HTMLでは2段組等の高度な文章レイアウトはできませんが、罫線が見えない表を使うと
擬似的に2段組などが表現できます。

HTML入力

<table border="0">
<tr>
<td width="300" valign="top" >
これは表を使った二段組の例です。<br>
罫線が見えない表を使うと自然な二段組に見えます。<br>
</td>
<td width="300" valign="top" >
表のセルを増やすことで三段組や、新聞のような<br>
複雑なレイアウトを作成することもできます。<br>
</td>
</tr>
</table>

出力

これは表を使った二段組の例です。
罫線が見えない表を使うと自然な二段組に見えます。
 表のセルを増やすことで三段組や、 新聞のような
複雑なレイアウトを作成することもできます。

width や height 属性を使って表の大きさを指定したり、 valign 属性で文字を上詰めにすると良いでしょう。

画像を配置する際のレイアウトとして使用

<img> タグによる画像は通常、文字と同じように扱われるので、画像の左右に複数行の文字を入力したり
文字の回りこみを実現することはできません。

しかし 罫線の見えない表を使えばこれらレイアウト上の問題を解決できます。

HTML入力

<table border="0">
<tr>

<td width="250" valign="top">
<img src="image/cat2.jpg">
</td>

<td width="300" valign="top">
見えない表を使って画像の右側に文章を表示する。<br>
TABLEを使わないと画像の右側で改行などは<br>
できませんが、表のセルの中に文章を書けば<br>
通常と同じように文章が書けます。<br>
<br>
画像の右寄せ、左寄せなどが自然に表現できます。
</td>

</tr>
</table>

出力


 見えない表を使って画像の右側に文章を表示する。
TABLEを使わないと画像の右側で改行などは
できませんが、表のセルの中に文章を書けば
通常と同じように文章が書けます。

画像の右寄せ、左寄せなどが自然に表現できます。

この例ではこちらの画像を使用しています。 左のリンク部分を [右クリック] → [対象をファイルに保存] で画像をダウンロードできます。

デザインとして使用

表を四角形と捉えて、ページのデザインに使用できます。
使い方は以下を参考にしてください。

その1 サンプルページ
TABLEタグを使ったページデザイン

その2 TABLEを使った飾り枠

HTML入力

<table border="0" cellpadding="10">
<tr>

<td width="500" border="0" valign="top" bgcolor="wheat">
<img src="image/exq_r.gif" width="12" height="12"> 注意<br>
このようにTABLEタグを使って注意書きのための飾り枠を作れます。
</td>

</tr>
</table>

出力

注意
このようにTABLEタグを使って注意書きのための飾り枠を作れます。

画像とリンクを併用したメニューなどの表現

表と画像やリンクを併用して、メニュー や バナー や スイッチ などを表現できます。

HTML入力

<table width="150" border="0" cellspacing="0" cellpadding="0">
<tr> <td><a href="table_sample_01.html"><img src="image/btn_top.gif" alt="トップページへ" border="0"></a></td></tr>
<tr> <td><a href="table_sample_01.html"><img src="image/btn_site.gif" alt="サイト説明" border="0"></a></td>    </tr>
<tr> <td><a href="table_sample_01.html"><img src="image/btn_mem.gif" alt="メンバー登録" border="0"></a></td> </tr>
<tr> <td><a href="table_sample_01.html"><img src="image/btn_qa.gif" alt="よくある質問" border="0"></a></td>   </tr>
<tr> <td><a href="table_sample_01.html"><img src="image/btn_toi.gif" alt="お問い合わせ" border="0"></a></td> </tr>
</table>

出力

トップページへ
サイト説明
メンバー登録
よくある質問
お問い合わせ

この例の TABLE タグでは、 cellspacing="0" 属性を使ってセル同士の隙間をなくし、
cellpadding="0" 属性を使って罫線と画像の間の隙間を無くしています。
その結果、リンク化された画像を隙間なく並べています。

リンク先のファイル名を適切に設定すればサイト内の移動を楽にするメニューになります。

この例で使用している画像 ( [右クリック] → [名前をつけて画像を保存] で画像をダウンロードできます。  )
btn_top.gif
btn_site.gif
btn_mem.gif
btn_mem.gif
btn_toi.gif



このように<table>タグで作成する表は、表としての利用以外にページデザインのためにも幅広く使用できます。