「表」を作るTABLE要素

さて、多くの人が無駄な苦労をしてつまずくTABLE要素の説明をする番が回ってきました。

確かにTABLE要素はHTMLの要素の中でも慣れるのが一番難しい要素かもしれませんが、必要以上の苦労をしている人が多いです。

なんで無駄な苦労をするのかはここでは書きません。

TABLE要素とは表を作るための要素です。

まずは身近にある表としてわかりやすい例をあげましょう。

	月	火	水	木	金	土
午前	○	○	○	○	○	○
午後	○	○	○	×	○	×

これは丁度そばに置いてあった、病院の診察券に書いてある診察時間の表です。みなさんもおそらく一枚くらい持っているでしょう。

この表からは、木曜日と土曜日の午後はお休みということがわかりますね。

この表は以下のように書かれています。

<table border="1" cellspacing="0" cellpadding="3" summary="病院の診察時間表">
<tr>
<th></th><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th><th>土</th>
</tr>
<tr>
<th>午前</th><td>○</td><td>○</td><td>○</td><td>○</td><td>○</td><td>○</td>
</tr>
<tr>
<th>午後</th><td>○</td><td>○</td><td>○</td><td>×</td><td>○</td><td>×</td>
</tr>
</table>

TABLE、TR、TD、THという四つの要素が使われていることがわかると思います。

ではこれからその四つの要素をそれぞれ説明していきます。

TABLE要素

表の全体を囲うための要素です。リストにおけるUL要素のようなものです。開始タグは<table>、終了タグは</table>です。上の例では、border、cellspacing、cellpadding、summaryという四つの属性を使っていますが、後で解説します。

TR要素

TABLE要素で作った表の行をあらわすための要素です。一行ごとに必要です。

表を縦に広げるために必要だと思ってください。

TD要素

これは表の中の項目をあらわすための要素です。 表の中の項目のことを「セル」といいます。

TABLE要素がリストでいうところのUL要素なら、TD要素はその項目である LI要素のようなものです。

TD要素はTR要素で作られた行の中にしか書けません。 一行の中にたくさんのセルを作れば、それだけ表が横に広がります。 TR要素が表を縦に広げるためのものなら、TD要素は横に広げるようなものです。

TH要素

TD要素の意味がわかったならTH要素は簡単です。なぜならTH要素もTD要素と同じく、セルを作るための要素だからです。

では何が違うのかというと、使い方です。普通は、最初の診察券の例のように、午後、午前、月～土など他とかぶりようがないセルに使います。つまり表の見出しです。

たいていのブラウザでは、TH要素の中の文字は、真ん中に寄せられて太字で表示されます。

TABLE、TR、TDとTH。この四つの要素を覚えれば、とりあえず表は書けるようになります。

例えば縦×2、横×4の表を作ろうと思ったら以下のようにタグを書きます。

<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>

table要素の属性

sammary属性

これは、TABLE要素で作った表が一体何の表なのかを書くための属性です。最初の診療時間の表の例ですと、「summary="病院の診察時間表">」などと書くようにします。

IMG要素のalt属性のように、絶対必要な属性ではありませんが、できるだけ書くようにしましょう。

border属性

TABLE要素で作った表はそのままだと何もなくてわかりにくいため、 枠線を付けるための属性です。

スタイルシートを使ったほうがいいのですが、スタイルシートでテーブルの枠線を作るのはちょっとしたコツが必要です。

cellspacing属性

TDやTHのセルとセルの間隔を設定するためのの属性です。この属性の値が大きいほど、セル同士のすきまが広くなります。

下の画像は、TABLE要素の開始タグにcellspacing="10"と、cellspacing="0" と書いた表の例です。わかりやすくするため、border="3"と枠線をつけています。

cellspacing="10"と書いた左の表のほうが、セル同士が離れていることがわかると思います。

cellpadding属性

これはセルの中身と枠との間隔を設定するための属性です。この属性の値が大きいほど、スペースは大きくなります。

今度は、開始タグにcellpadding="10"、cellpadding="0" と書いた表の例を出します。

cellpadding="10"と書いた左の表のほうが、中身と枠の間が離れていますよね。上のcellspacing属性との違い、わかりましたか？

width属性

TABLE要素も横幅を決めるwidth属性が使えます。TABLE要素だけではなく、TDやTH要素にも width属性がありますが、スタイルシートを使いましょう。

へてむるクリエイターの場合

右クリックメニューの「タグの挿入」にある「テーブル」か、タグパレットの「カスタム」または「テーブル/箇条」から挿入することができます。 TR要素やTD要素を個別に挿入することもできますが、TABLE要素の外で使ってはいけません。