Web プログラマになる

:: be web programmer ::

表を作成する

実際の Web プログラミングにおいて、文章を扱うことは多くありません。
ほとんどはデータを扱います。

そのため、<p> や <h2> などの文章系のタグよりも <table> タグを使用することが多くなります。

<table> タグはその名のとおり、表（テーブル）を表現するためのタグです。

例えば、次のような商品の表があったとします。

これをタグで書くと、次のようになります。

<table border="1">
 <tr>
  <th>品名</th>
  <th>型番</th>
  <th>値段</th>
 </tr>
 <tr>
  <td>マウス</td>
  <td>X-567</td>
  <td>1200</td>
 </tr>
 <tr>
  <td>キーボード</td>
  <td>Y-43210</td>
  <td>2800</td>
 </tr>
 <tr>
  <td>プリンタ</td>
  <td>Z-89</td>
  <td>37000</td>
 </tr>
</table>

table 要素の中に <tr> タグや <td> タグが入り、文章系のタグよりも複雑な構成になります。

それぞれのタグは、表の行やデータを表します。

• <tr> タグ … 行
• <th> タグ … 列の見出し
• <td> タグ … データ

基本的には <tr> タグで１行を表現し、一つ一つのデータを <td> タグで横に並べる形になります。

---

●セルを連結する

表の一つのマス目を「セル」と呼びます。
普通に <td> タグを並べると、一つずつのセルになります。

これらのセルは、自由に連結することができます。
例えば、次のように。

セルを連結するには、colspan または rowspan の属性を <td> タグに指定します。

<table border="1">
 <tr>
  <td colspan="2">セル１</td>
  <td>セル３</td>
 </tr>
 <tr>
  <td>セル４</td>
  <td>セル５</td>
  <td rowspan="2">セル６</td>
 </tr>
 <tr>
  <td>セル７</td>
  <td>セル８</td>
 </tr>
</table>

「 colspan="n" 」は、指定したセルから右方向に n 個のセルを連結します。
「 rowspan="n" 」は、指定したセルから下方向に n 個のセルを連結します。

n には、指定したセルの個数も含まれます。

この２つの属性は、<th> タグにも指定できます。

---

●表の外枠の太さを変更する

<table> タグの border 属性に 1 以上の値を指定すると、表の外枠とセルの境界線が表示されます。

外枠の太さは、この値で変更できます。
指定する値は、ピクセル単位です。

なお、border 属性に 0 を指定すると、全ての線が表示されなくなります。

---

●セル間の幅とセル内のマージンを変更する

<table> タグに cellspacing 属性を指定すると、セル間の幅を変更できます。

指定する値は、ピクセル単位です。

また、<table> タグに cellpadding 属性を指定すると、セル内のマージン（余白）を変更できます。

この属性も指定する値は、ピクセル単位です。

---

●表をページのレイアウトに使わない

ページのレイアウトは、スタイルシートで行うのが一般的になっています。
表でもレイアウトは可能ですが、推奨されていません。

表はたくさんのタグを使うため、ページの容量が増えます。
結果として、ページが重くなります。

表の中に表があると、さらに重くなります。

また、表はその中の全データが読み込まれるまで表示されません。 ページ全体を表にしてしまうと、全てが読み込まれるまで何も表示されない状態になります。

このように、表のレイアウトには多くの問題があります。
少なくともページ全体を表にすることだけは避けましょう。

• ▽ スタイルシートのレイアウトについてはこちら
• スタイルシートによるレイアウト

---