テーブルの作成方法をステップ毎に解説。
| ステップ 1 | タグの種類と意味 | |
| ステップ 2 | タグを使って簡単なテーブルを作ってみましょう。 | |
| ステップ 3 | サンプルを応用して表を連結してみましょう。 | |
| ステップ 4 | 表を縦に連結してみましょう。 | |
| ステップ 5 | 枠線の幅を指定してみましょう。 | |
| ステップ 6 | テーブルのサイズを指定してみましょう。 | |
| ステップ 7 | セルのサイズを指定してみましょう。 | |
| ステップ 8 | 横方向にセルを連結してみましょう。 | |
| ステップ 9 | 横方向の連結を応用してみましょう。 | |
| ステップ 10 | 縦方向にセルを連結してみましょう。 | |
| ステップ 11 | 縦方向の連結を応用してみましょう。 | |
| ステップ 12 | 横・縦連結を応用してみましょう。 | |
| ステップ 13 | 枠線の色を指定してみましょう。 | |
| ステップ 14 | テーブルに背景色をつけて枠線を綺麗に表示してみましょう。 | |
| ステップ 15 | ここまでのステップを応用して、画像を使わずに角の丸いテーブルを作りましょう。 |
<table>タグは、表として使用しますが、ページのレイアウトで使用することの方が多いと思います。上手に利用すると凝ったレイアウトのページを作ることもできます。
でも、テーブルって理解するまでがなかなかわかりずらくて 「 どこをどうすればこうなる 」 というのが初心者ではむずかしいですよね。
不良パパもはじめはそうでした。見よう見まねでやってはみるものの、なかなか思うような形にならずに (;´д｀)トホホ でした。
このページで、テーブルの作成方法をステップ 1 〜 ステップ 15 まで順番に理解していけば、初心者でもテーブルを作成できるようになります。
理解してしまえばとても簡単にテーブルを作ることができるので、あきらめずに楽しんで作成してみましょう！
テーブルは、<table> 〜 </table>までを読み込んでから表示がはじまる性質があるので、あまり多用しすぎると表示が遅くなりやすいという短所もあるので注意して利用しましょう。とは言え、当サイトもテーブル使いまくりですけどね (^。^;)
ステップ 1 タグの種類と意味
<table ★> 〜 </table> 表 <tr> 〜 </tr> 横一列（行） <th> 〜 </th> 見出し <td> 〜 </td> セル★・・・border="ピクセル"（枠線の太さ）
<table> 〜 </table>は、このタグに挟まれた範囲がテーブル（表）だということを示す基本となるタグです。
<tr> 〜 </tr>は、行を表すタグで、横一列文の内容の最初と最後に記述します。
<th> 〜 </th>は、行や列の見出しになるタグです。このタグ内のテキストは、センタリングされて太字になります。
<td> 〜 </td>は、セルというタグでこの中に内容を記述します。
ステップ 2 これらのタグを使って簡単なテーブルを作ってみましょう。
下のようにタグを記述するとサンプルのように表示されます。表示される表と同じにタグをならべてあるので、わかりやすいと思います。<table border="1"> <tr><th>ここが見出し</th></tr> <tr><td>ここに内容を記述します。</td></tr> </table>
サンプル
| ここが見出し |
|---|
| ここに内容を記述します。 |
ステップ 3 上のサンプルを応用して表を連結してみましょう。
横2列の表です。<th> 〜 </th>と、<td> 〜 </td>を <tr> 〜 </tr>内に足すだけで簡単に連結することができます。
<table border="1"> <tr><th>ここが見出し</th><th>ここが見出し</th></tr> <tr><td>ここに内容を記述します。</td><td>ここに内容を記述します。</td></tr> </table>
サンプル
| ここが見出し | ここが見出し |
|---|---|
| ここに内容を記述します。 | ここに内容を記述します。 |
このように、<th> 〜 </th>と、<td> 〜 </td>を <tr> 〜 </tr>内にいくつでも足すことができます。
見出しが必要ない場合は、<th> 〜 </th>のかわりに<td> 〜 </td> を記述すれば下のサンプルのように表示されます。
サンプル
| ここが見出し | ここが見出し |
| ここに内容を記述します。 | ここに内容を記述します。 |
ステップ 4 表を縦に連結してみましょう。
下のようにタグを記述するとサンプルのように表示されます。表示される表と同じにタグをならべてあるので、わかりやすいと思います。混乱しないために、<th> 〜 </th>のかわりに<td> 〜 </td>を使って以下を説明しますね！
<table border="1"> <tr><td>ここに内容を記述します。</td></tr> <tr><td>ここに内容を記述します。</td></tr> </table>
サンプル
| ここに内容を記述します。 |
| ここに内容を記述します。 |
サンプルは、<tr> 〜 </tr>を横一列の一区切りとして、サンプルは2つあるので縦に2段表示されます。
縦連結の場合は、<tr> 〜 </tr>を足すだけで簡単に縦連結することができます。
縦に<tr> 〜 </tr>を3段足してみましょう。
<table border="1"> <tr><td>ここに内容を記述します。</td></tr> <tr><td>ここに内容を記述します。</td></tr> <tr><td>ここに内容を記述します。</td></tr> <tr><td>ここに内容を記述します。</td></tr> <tr><td>ここに内容を記述します。</td></tr> </table>
サンプル
| ここに内容を記述します。 |
| ここに内容を記述します。 |
| ここに内容を記述します。 |
| ここに内容を記述します。 |
| ここに内容を記述します。 |
ステップ 5 枠線の幅を指定してみましょう。
borderタグで枠線の幅（太さ）を指定することができます。1以上の数字をピクセルで指定します。ピクセルといっても数字を入れるだけなので簡単です。
この border属性を指定しなければ枠線は表示されません。ページのレイアウトで使用する場合などは枠線を表示させないほうが綺麗ですね。また、border="0"でも枠線は表示されません。
<table border="1"> <tr><td>これは、border="1"</td></tr> </table>
サンプル
| これは、border="1" |
<table border="2"> <tr><td>これは、border="2"</td></tr> </table>
サンプル
| これは、border="2" |
<table border="3"> <tr><td>これは、border="3"</td></tr> </table>
サンプル
| これは、border="3" |
<table border="6"> <tr><td>これは、border="6"</td></tr> </table>
サンプル
| これは、border="6" |
ステップ 6 テーブルのサイズを指定してみましょう。
ここまでのサンプルのように、テーブルのサイズを指定しない場合は内容にあわせてテーブルは伸縮します。width属性やheight属性でテーブル全体の幅と高さを指定することができます。
<table width="★" height="☆"> 〜 </table>
★・・・テーブルの幅☆・・・テーブルの高さ
下のようにタグを記述するとサンプルのように表示されます。
<table width="100" height="100" border="1"> <tr><td>これは、width="100" height="100"</td></tr> </table>
サンプル
| これは、width="100" height="100" |
<table width="200" height="100" border="1"> <tr><td>これは、width="200" height="100"</td></tr> </table>
サンプル
| これは、width="200" height="100" |
テーブルの高さは、内容にあわせて伸縮したほうがコンテンツを増やせるので、特に理由がなければ height（高さ）は指定しなくてもいいでしょう。
テーブルの幅は、ピクセル（数字）か ％ で指定できます。
ピクセルで指定した場合は、ブラウザの大きさに関係なく指定された大きさで表示され、 ％ で指定した場合はブラウザのウィンドウサイズに対する割合で 表示され、ブラウザの大きさがかわればテーブルの大きさもかわります。
<table width="50%" height="100" border="1"> <tr><td>これは、width="50%" height="100"</td></tr> </table>
サンプル
| これは、width="50%" height="100" |
<table width="80%" height="100" border="1"> <tr><td>これは、width="80%" height="100"</td></tr> </table>
サンプル
| これは、width="80%" height="100" |
ステップ 7 セルのサイズを指定してみましょう。
<th>や<td>タグに width 属性や height 属性を指定することで、セルの横幅や高さを指定することができます。
<th width="★" height="☆"> 〜 </th>
<td width="★" height="☆"> 〜 </td>
☆・・・セルの高さ
<table border="1"> <tr> <tdwidth="300" height="100">これは、width="300" height="100"</td> <tdwidth="50" height="100">これは、width="50" height="100"</td> </tr> </table>
サンプル
| これは、width="300" height="100" | これは、width="50" height="100" |
width="★" height="☆"で指定すれば、下のような表も作ることができます。
<table border="1"> <tr> <td width="50" height="10">内容</td> <td width="100">内容</td> <td width="50">内容</td> <td width="100">内容</td> </tr> <tr> <td height="50">内容</td> <td>内容</td> <td>内容</td> <td>内容</td> </tr> </table>
サンプル
| 内容 | 内容 | 内容 | 内容 |
| 内容 | 内容 | 内容 | 内容 |
ステップ 8 横方向にセルを連結してみましょう。
<th>や<td>タグに colspan 属性を指定することで、そのセルから指定された数の右方向のセルを連結して、1つのセルにすることができます。
<th colspan="★"> 〜 </th>
<td colspan="★"> 〜 </td>
下のサンプルのような表にする方法です。
<table width="300" border="1"> <tr> <td colspan="3">今月のお小遣い</td> </tr> <tr> <td width="50">入金</td> <td width="100">10,000円</td> <td width="150">ホクホク (⌒〜⌒)ニンマリ</td> </tr> <tr> <td>出費</td><td>8,500円</td><td>使いすぎ〜 (￣Д￣;;</td> </tr> </table>
サンプル
| 今月のお小遣い | ||
| 入金 | 10,000円 | ホクホク (⌒〜⌒)ニンマリ |
| 出費 | 8,500円 | 使いすぎ〜 (￣Д￣;; |
サンプルの場合、横方向に3つのセルが並んでいます。「今月のお小遣い」の部分を1つに連結したいときは、3つを1つにするので colspan="3" です。 つまり、連結したいセルの数だけ数字をかえるだけで連結することができます。
このとき注意してほしいことは、横方向のセルを1つに連結したので必要のないセルは必ず削除するということです。
上のサンプルは、横方向に3つセルがあります。それを1つにするのでセルの右側の
<td> 〜 </td>は削除します。
以下のように横方向を1つに連結するので、赤い部分を削除します。
<table width="300" border="1"> <tr> <td colspan="3">内容</td><td>内容</td><td>内容</td> </tr> <tr> <td width="50">内容</td><td width="100">内容</td><td width="150">内容</td> </tr> <tr> <td>内容</td><td>内容</td><td>内容</td> </tr> </table>
必要ないタグを削除しないと以下のように連結はされますが、必要のないセルも表示されてしまうので注意しましょう。
| 内容 | 内容 | 内容 | ||
| 内容 | 内容 | 内容 | ||
| 内容 | 内容 | 内容 | ||
ステップ 9 横方向の連結を応用してみましょう。
<table width="300" border="1"> <tr> <td colspan="3">今月のお小遣い</td> </tr> <tr> <td width="50">入金</td> <td width="100">10,000円</td> <td width="150">ホクホク (⌒〜⌒)ニンマリ</td> </tr> <tr> <td>出費</td><td colspan="2">8,500円 使いすぎ〜 (￣Д￣;; <br> (T.T )( T.T)おろおろ</td> </tr> </table>
サンプル
| 今月のお小遣い | ||
| 入金 | 10,000円 | ホクホク (⌒〜⌒)ニンマリ |
| 出費 | 8,500円 使いすぎ〜 (￣Д￣;; (T.T )( T.T)おろおろ |
|
サンプルの場合、横方向に3つのセルが並んでいます。「今月のお小遣い」の部分を1つに連結するので、colspan="3" 。
「8,500円 使いすぎ〜 (￣Д￣;; (T.T )( T.T)おろおろ」の部分は2つ分のセルを1つにしたいので、colspan="2" 。
ステップ 10 縦方向にセルを連結してみましょう。
<th>や<td>タグに rowspan 属性を指定することで、そのセルから指定された数の下方向のセルを連結して、1つのセルにすることができます。
<th rowspan="★"> 〜 </th>
<td rowspan="★"> 〜 </td>
下のサンプルのような表にする方法です。
<table width="300" border="1"> <tr> <td rowspan="3" width="50">コメント</td><td>見出し 1</td><td>見出し 2</td> </tr> <tr> <td width="100">内容 1</td><td width="150">内容 2</td> </tr> <tr> <td>内容 3</td><td>内容 4</td> </tr> </table>
サンプル
| コメント | 見出し 1 | 見出し 2 |
| 内容 1 | 内容 2 | |
| 内容 3 | 内容 4 |
サンプルの場合、縦方向に3つのセルが並んでいます。「コメント」の部分を1つに連結したいときは、3つを1つにするので rowspan="3" です。 つまり、連結したいセルの数だけ数字をかえるだけで連結することができます。
このとき注意してほしいことは、縦方向のセルを1つに連結したので必要のないセルは必ず削除するということです。
上のサンプルは、縦方向に3つセルがあります。それを1つにするのでセルの下側の
<td> 〜 </td>は削除します。
以下のように縦方向を1つに連結するので、赤い部分を削除します。
<table width="300" border="1"> <tr> <td width="50" rowspan="3">内容</td><td>内容</td><td>内容</td> </tr> <tr> <td>内容</td><td width="100">内容</td><td width="150">内容</td> </tr> <tr> <td>内容</td><td>内容</td><td>内容</td> </tr> </table>
必要ないタグを削除しないと以下のように連結はされますが、必要のないセルも表示されてしまうので注意しましょう。
| 内容 | 内容 | 内容 |
| 内容 | 内容 | 内容 |
| 内容 | 内容 | 内容 |
ステップ 11 縦方向の連結を応用してみましょう。
<table width="300" border="1"> <tr> <td rowspan="3" width="50">コメント</td><td>見出し 1</td><td>見出し 2</td> </tr> <tr> <td width="100">内容 1</td><td width="150" rowspan="2">内容 2</td> </tr> <tr> <td>内容 3</td> </tr> </table>
サンプル
| コメント | 見出し 1 | 見出し 2 |
| 内容 1 | 内容 2 | |
| 内容 3 |
サンプルの場合、縦方向に3つのセルが並んでいます。「コメント」の部分を1つに連結するので、rowspan="3" 。
「内容 2」の部分は縦に2つ分のセルを1つにしたいので、rowspan="2" 。
ステップ 12 ここまでの横・縦連結を応用してみましょう。
<th colspan="★"> 〜 </th>
<td colspan="★"> 〜 </td>
<th rowspan="★"> 〜 </th>
<td rowspan="★"> 〜 </td>
<table width="450" border="1"> <tr> <td colspan="4">見出し</td> </tr> <tr> <td width="50" rowspan="3">コメント 1</td> <td width="100">内容 1</td> <td width="150" rowspan="2">コメント 2</td> <td width="200">内容 4</td> </tr> <tr> <td>内容 2</td><td>内容 5</td> </tr> <tr> <td>内容 3</td><td>コメント 3</td><td>内容 6</td> </tr> </table>
サンプル
| 見出し | |||
| コメント 1 | 内容 1 | コメント 2 | 内容 4 |
| 内容 2 | 内容 5 | ||
| 内容 3 | コメント 3 | 内容 6 | |
サンプルの場合、横方向に4つのセルが並んでいます。「見出し」の部分を1つに連結するので、colspan="4" 。
「コメント 1」の部分を縦方向3つのセルを1つに連結するので、rowspan="3" 。
「コメント 2」の部分は縦に2つ分のセルを1つにしたいので、rowspan="2" 。
ステップ 13 枠線の色を指定してみましょう。
テーブルの枠線の色を指定するには、<table border> に bordercolor などの属性をつけます。
<table border="★" bordercolor="☆"> 〜 </table>
★・・・枠線の太さ☆・・・枠線の色
<table border="1" bordercolor="#ff0000"> <tr> <td>枠線に色をつける</td> <tr> </table>
サンプル
| 枠線に色をつける |
サンプルのような枠線だと、デザイン的に ( >_<)イヤッ という方は多いと思うので別の枠線の指定方法を見てみましょう。
cellspacing と cellpadding を使います。
cellspacing はテーブルの外枠とセルや、セルとセルの間隔を指定します。
cellpadding はセルの枠とセル内の内容との間隔を指定します。
<table border="1" cellspacing="0" cellpadding="0"> <tr> <td>綺麗な枠線</td><td>綺麗な枠線</td><td>綺麗な枠線</td> </tr> <tr> <td>綺麗な枠線</td><td>綺麗な枠線</td><td>綺麗な枠線</td> </tr> </table>
サンプル
| 綺麗な枠線 | 綺麗な枠線 | 綺麗な枠線 |
| 綺麗な枠線 | 綺麗な枠線 | 綺麗な枠線 |
つまり、何も指定しなければ枠線やセルの間隔で枠線が太く見えますが、実際は外枠とセルの内側の影のような線が表示されるために太く見えてしまいます。
ですから、外枠とセルとの間隔を cellspacing でなくしてしまえば線が細く綺麗に表示されるようになります。
しかし、このままでは cellpadding が 0 でセルの枠とセルの内容との間隔がないので中のテキストなどが見にくくなります。
その場合は cellpadding="3" などと、数字を大きくした分だけセルの枠とセルの内容との間隔があきます。
<table border="1" cellspacing="0" cellpadding="5"> <tr> <td>綺麗な枠線</td><td>綺麗な枠線</td><td>綺麗な枠線</td> </tr> <tr> <td>綺麗な枠線</td><td>綺麗な枠線</td><td>綺麗な枠線</td> </tr> </table>
サンプル
| 綺麗な枠線 | 綺麗な枠線 | 綺麗な枠線 |
| 綺麗な枠線 | 綺麗な枠線 | 綺麗な枠線 |
ページのレイアウトなどの場合は、cellpadding="0" にして間隔をあけずにピッタリとくっつけることもできますから、利用方法はいろいろです。
ステップ 14 テーブルに背景色をつけて枠線を綺麗に表示してみましょう。
枠線の表示は、border="★"や cellspacing="★"などで綺麗に表示することができますが、枠線に色を付けてもっと綺麗な枠線にしてみましょう。
ここまでは border="1"などで枠線を表示して、 cellspacing="★"などで調節をしました。今度は border="0" つまり、テーブルの枠線を表示させずに背景に色をつけて枠線とセルとの間隔を利用して色つきの綺麗な枠線にします。
文章で説明するよりも、サンプルを見たほうがわかりやすいと思います。
まず、 bgcolor="背景色"でテーブル全体に色をつけます。このとき、border="0"で枠線は表示されないので枠線とセルとの間隔を cellspacing="1"にしてみましょう。
<table width="100" border="0" cellspacing="1" cellpadding="5" bgcolor="#dcdcdc"> <tr> <td>綺麗な枠線</td> </tr> </table>
サンプル
| 綺麗な枠線 |
テーブル全体を bgcolor="色"で指定することで背景色がつきましたが、このままでは枠線にはならないので、今度はセルに違う色の背景色を指定します。
<table width="100" border="0" cellspacing="1" cellpadding="5" bgcolor="#dcdcdc"> <tr> <td bgcolor="#ffffff">綺麗な枠線</td> </tr> </table>
サンプル
| 綺麗な枠線 |
これは、枠線ではなくて border="0"で見えなくなった外枠とセルとの間隔 cellspacing="1"が、色をそれぞれ指定することで枠線のように表示されるということです。
cellspacing="★"の ★の数字を大きくすれば、枠線は太くなります。
<table width="100" border="0" cellspacing="3" cellpadding="5" bgcolor="#dcdcdc"> <tr> <td bgcolor="#ffffff">綺麗な枠線</td> </tr> </table>
サンプル
| 綺麗な枠線 |
それぞれの背景に色を指定すれば、表なども綺麗に表示することができます。
<table border="0" cellspacing="1" cellpadding="5" bgcolor="#808080"> <tr> <td colspan="3" bgcolor="#dcdcdc">タイトル</td> </tr> <tr> <td bgcolor="#dcdcdc">項目 1</td> <td bgcolor="#ffffff">綺麗な枠線 1</td> <td bgcolor="#ffffff">綺麗な枠線 2</td> </tr> <tr> <td bgcolor="#dcdcdc">項目 2</td> <td bgcolor="#ffffff">綺麗な枠線 3</td> <td bgcolor="#ffffff">綺麗な枠線 4</td> </tr> </table>
サンプル
| タイトル | ||
| 項目 1 | 綺麗な枠線 1 | 綺麗な枠線 2 |
| 項目 2 | 綺麗な枠線 3 | 綺麗な枠線 4 |
ステップ 15 ここまでのステップを応用して、画像を使わずに角の丸いテーブルを作りましょう。
- <th> 〜 </th>は、行や列の見出しになるタグです。このタグ内のテキストは、センタリングされて太字になります。
- border="★"は、外枠の太さです。
- width="★" height="☆" ★・・・テーブルの幅 ☆・・・テーブルの高さ
- cellspacing="★" はテーブルの外枠とセルや、セルとセルの間隔を指定します。
- cellpadding="★" はセルの枠とセル内の内容との間隔を指定します。
- bgcolor="色"は、背景に色をつけます。
<table border="0"><tr><th> <table cellspacing="0" bgcolor="#dcdcdc" height="1" width="200"> <tr><td></td></tr></table> <table cellspacing="0" bgcolor="#dcdcdc" height="1" width="204"> <tr><td></td></tr></table> <table cellspacing="0" bgcolor="#dcdcdc" height="1" width="206"> <tr><td></td></tr></table> <table cellspacing="0" bgcolor="#dcdcdc" height="2" width="208"> <tr><td></td></tr></table> <table cellspacing="1" cellpadding="5" bgcolor="#dcdcdc" width="210"> <tr><td align="left"> タイトル </td></tr><tr><td bgcolor="#ffffff"> <p>角が丸いテーブル</p><p>角が丸いテーブル</p><p>角が丸いテーブル</p> </td></tr> </table> </th></tr></table>
サンプル
|
|---|
上のサンプルは、いくつかのテーブルなどの組み合わせです。どんな構造かをわかりやすくするために全ての枠線を表示してみます。
サンプル
|
|---|
つまり、いちばん外側のテーブルを入れ子にして<th> 〜 </th> 内に width で幅を少しずつ変えたテーブルを height を指定して細くしたものを入れるだけです。
<th> 〜 </th>は、行や列の見出しになるタグで、このタグ内のテキストは、センタリングされて太字になります。 ですから、<th> 〜 </th>内に入れた各テーブルはそれぞれ少しずつ幅が違うので、センタリングされて角が丸くなって見えます。
応用として、<th> 〜 </th>の代わりに<td> 〜 </td> を入れ子にすると、何も指定しなければ入れ子内は左側によります。すると、それぞれ幅の違うテーブルが左側からそろって表示されます。もう、わかりますよね！サンプルを見てください。
<table border="0"><tr><td> <table cellspacing="0" bgcolor="#dcdcdc" height="1" width="200"> <tr><td></td></tr></table> <table cellspacing="0" bgcolor="#dcdcdc" height="1" width="204"> <tr><td></td></tr></table> <table cellspacing="0" bgcolor="#dcdcdc" height="1" width="206"> <tr><td></td></tr></table> <table cellspacing="0" bgcolor="#dcdcdc" height="2" width="208"> <tr><td></td></tr></table> <table cellspacing="1" cellpadding="5" bgcolor="#dcdcdc" width="210"> <tr><td align="left"> タイトル </td></tr><tr><td bgcolor="#ffffff"> <p>右角が丸いテーブル</p><p>右角が丸いテーブル</p><p>右角が丸いテーブル</p> </td></tr> </table> </td></tr></table>
サンプル
|
こんどは、右側にテーブルをそろえて左角を丸く。
<table border="0"><tr><td align="right"> <table cellspacing="0" bgcolor="#dcdcdc" height="1" width="200"> <tr><td></td></tr></table> <table cellspacing="0" bgcolor="#dcdcdc" height="1" width="204"> <tr><td></td></tr></table> <table cellspacing="0" bgcolor="#dcdcdc" height="1" width="206"> <tr><td></td></tr></table> <table cellspacing="0" bgcolor="#dcdcdc" height="2" width="208"> <tr><td></td></tr></table> <table cellspacing="1" cellpadding="5" bgcolor="#dcdcdc" width="210"> <tr><td align="left"> タイトル </td></tr><tr><td bgcolor="#ffffff"> <p>左角が丸いテーブル</p><p>左角が丸いテーブル</p><p>左角が丸いテーブル</p> </td></tr> </table> </td></tr></table>
サンプル
|
| 角が丸いテーブル ↓ |
|
<body> 〜 </body>内に記述 |
| 右角が丸いテーブル ↓ |
|
<body> 〜 </body>内に記述 |
| 左角が丸いテーブル ↓ |
|
<body> 〜 </body>内に記述 |
内容の部分に textarea を入れれば、更新履歴などにも使えますね。
サンプル
|
|---|
| テーブルを利用した更新履歴 ↓ |
|
<body> 〜 </body>内に記述 |
