テーブルを使いこなそう

トップ > ホームページ入門 > テーブルを使いこなそう

目次

最も基本的なテーブル

テーブル(表)を作成するには主に次のタグを用います。

<table border=1>
<tr><td>●</td><td>■</td><td>▲</td></tr>
<tr><td>○</td><td>□</td><td>△</td></tr>
</table>

これをブラウザで表示すると次のようになります。

項目を連結するには

<td colspan=n> を用いると、右方向に n 個の項目を連結することができます。

<table border=1>
<tr><td colspan=2>●</td><td>▲</td></tr>
<tr><td>○</td><td>□</td><td>△</td></tr>
</table>

これをブラウザで表示すると次のようになります。

<td rowspan=n> を用いると、縦方向に n 個の項目を連結することができます。

<table border=1>
<tr><td rowspan=2>●</td><td>■</td><td>▲</td></tr>
<tr><td>□</td><td>△</td></tr>
</table>

これをブラウザで表示すると次のようになります。

立体感のあるテーブルを作成するには

border=n を指定することにより、テーブルの枠線を立体感のあるものにすることができます。

<table border=8>
<tr><td>●</td><td>■</td><td>▲</td></tr>
<tr><td>○</td><td>□</td><td>△</td></tr>
</table>

これをブラウザで表示すると次のようになります。

立体感の無いテーブルを作成するには

cellspacing=0 を指定することにより、テーブルの枠線を立体感の無いものにすることができます。

<table border=1 cellspacing=0>
<tr><td>●</td><td>■</td><td>▲</td></tr>
<tr><td>○</td><td>□</td><td>△</td></tr>
</table>

これをブラウザで表示すると次のようになります。

色付きのテーブル

bordercolor= や bgcolor= で、テーブルに色をつけることができます。

<table border=1 bordercolor=red>
<tr bgcolor=yellow><td>●</td><td>■</td><td>▲</td></tr>
<tr><td bgcolor="#ccccff">○</td><td>□</td><td>△</td></tr>
</table>

これをブラウザで表示すると次のようになります。

テーブルを横方向に並べるには

テーブルを二重に囲んでやることで、テーブルを横方向に配置することができます。このテクニックはテーブルに限らず、他のテキストの配置にも応用することができます。

<table>
 <tr>
  <td>
   <table border=1>
    <tr><td>●</td><td>■</td></tr>
    <tr><td>○</td><td>□</td></tr>
   </table>
  </td>
  <td>
   <table border=1>
    <tr><td>●</td><td>■</td></tr>
    <tr><td>○</td><td>□</td></tr>
   </table>
  </td>
 </tr>
</table>

これをブラウザで表示すると次のようになります。


Copyright (C) 1997-2002 杜甫々
初版:1997年3月30日、最終更新:2002年3月3日
http://www.tohoho-web.com/wwwbeg4.htm