表をつくるぞ

ＳＴＥＰ　１

項目ごとに列をそろえて表形式でならべる。見た目にもきれいですよね。表をつくるタグの基本は、わりと理解しやすいと思うのですが、このタグ、応用が、かなりあるためにちょっと混乱してしまうかもしれません。そうならないためにも、ひとつひとつ消化しながら、ゆっくりすすんでください。あせらずに。

では、いきます。最低必要なタグはこれです。


<table border>

　　　　<tr><td>ここに文字を書く</td></tr>

</table>

実際はこう表示されます。

ここに文字を書く

ひとつひとつ説明しますと

これから表組します。という意味の基本となるタグで、このなかに入ったものが、表組されます。

これが「行」（よこのライン）を示します。

これが「列」（たてのライン）を示します。

ここに文字を書く
上の例も、実は、厳密にいえば、すでに表なのです。 <tr></tr> は、ひとつ。 <td></td> も、ひとつしかありませんので、「１行１列」の表ということで、左図のように表示されるのです。

ここまでは、ＯＫですか。今度は、ちょっとだけ応用いきます。

行を増やそう

行（よこのライン）を増やすには、<tr></tr>で、はさまれた部分を増やせばよいのです。ここでは、３行にしてみます。こんな感じに。

<table border>

　　　　<tr><td>１行目だよ</td></tr>

　　　　<tr><td>２行目だよ</td></tr>

　　　　<tr><td>３行目だよ</td></tr>

</table>

実際はこう表示されます。

１行目だよ

２行目だよ

３行目だよ

列を増やそう

列（たてのライン）を増やすには、<td></td>で、はさまれた部分を増やせばよいのです。ここでは、３列にしてみます。こんな感じに。

<table border>

　　　　<tr><td>１列目だよ</td><td>２列目だよ</td><td>３列目だよ</td></tr>

</table>

実際はこう表示されます。

１列目だよ２列目だよ３列目だよ

ここまでＯＫですね。

行と列、両方ふやすぞ

行と列を組み合わせれば、ますます表らしくなります。

<table border>

　　　　<tr><td>１行目１列</td><td>１行目２列</td><td>１行目３列</td></tr>

　　　　<tr><td>２行目１列</td><td>２行目２列</td><td>２行目３列</td></tr>

　　　　<tr><td>３行目１列</td><td>３行目２列</td><td>３行目３列</td></tr>

</table>

実際は、こう表示されます。

１行目１列１行目２列１行目３列

２行目１列２行目２列２行目３列

３行目１列３行目２列３行目３列

このあとの、レベルアップの項目での説明が、分かりやすいように、文字をここで変えておきます。

システムナインシステムナインシステムナイン

システムナインシステムナインシステムナイン

システムナインシステムナインシステムナイン

もちろん、タグはこうなっています。

<table border>

　　　　<tr><td>システムナイン</td><td>システムナイン</td><td>システムナイン</td></tr>

　　　　<tr><td>システムナイン</td><td>システムナイン</td><td>システムナイン</td></tr>

　　　　<tr><td>システムナイン</td><td>システムナイン</td><td>システムナイン</td></tr>

</table>

だんだん、わけが分からなくなって、きてるかもしれませんが、がんばって、ついてきてください。

　レベルアップだ　

ＳＴＥＰ　２

ちょっと複雑になってきましたね。でも、ゆっくり、あせらずにやれば、大丈夫です。ここでは行や列を２つ以上またぐ指定をプラスします。まずは見てください。赤い文字の部分が、行や列をまたいだところです。

＜　行（よこのライン）をまたいだ表　＞

３つの行を、またいでいますシステムナインシステムナインシステムナイン

システムナインシステムナインシステムナイン

システムナインシステムナインシステムナイン

＜　列（たてのライン）をまたいだ表　＞

３つの列を、またいでいます

システムナインシステムナインシステムナイン

システムナインシステムナインシステムナイン

システムナインシステムナインシステムナイン

行をまたぐには

行をまたぐのに必要なタグは、<td rowspan=数字></td>です。上の＜　行をまたいだ表　＞のタグは、このようになっています。

<tr>
<td rowspan=3>３つの行を、またいでいます</td>
<td>システムナイン</td><td>システムナイン</td><td>システムナイン</td>
</tr>

<tr><td>システムナイン</td><td>システムナイン</td><td>システムナイン</td></tr>

</table>

ようく見れば、変わったところは、一点だけです。「　<td rowspan=3>３つの行を、またいでいます</td>　」という１行がプラスされただけです。あとは、同じです。

ポイント

＜１＞　「　td rowspan=3・・・　」の１行は、必ず最初の<tr></tr>のタグの間の、先頭に書いてください。

＜２＞　rowspanのあとの数字は、またぐ行の数を指定しています。２であれば、２行。３であれば、３行またぎます。ちなみに「　rowspan=2　」にすれば、こうなります。

２つの行を、またいでいますシステムナインシステムナインシステムナイン

システムナインシステムナインシステムナイン

システムナインシステムナインシステムナイン

なんだか、ひとつスペースが開いていて、変ですね。でもこれは、次に説明する、「列をまたぐには」のところで解決されます。ご心配なく。

列をまたぐには

まずは、列をまたいだ表をもう一度

＜　列をまたいだ表　＞

列をまたぐのに必要なタグは、<td colspan=数字></td>です。上の＜　列をまたいだ表　＞のタグは、このようになっています。

<tr><td colspan=3>３つの列を、またいでいます</td></tr>

<tr><td>システムナイン</td><td>システムナイン</td><td>システムナイン</td></tr>

</table>

これもまた、変わったのは、一点だけ。「　<tr><td colspan=3・・・・</tr>　」の１行がプラスされただけです。

ポイント

＜１＞上の表を見てください。「３つの列を・・・」の部分をふくめると、全部で４行になっています。ですから、行を示すタグ<tr></tr>を増やし、「　<td colspan=3・・・・</td>　」を、はさむのです。先ほど、行をまたぐタグ「rowspan」のときに<tr></tr>のタグを増やさなかったのは、行の数が増えていないからです。

＜２＞　colspanのあとの数字は、またぐ列の数を指定しています。２であれば、２列。３であれば、３列またぎます。

問題を解決しよう

ここで先ほど、なんだか、すっきりしなかったこの表の問題を解決させましょう。

この表の、ひとつ開いているスペースを埋めるには、３行目のシステムナインの文字を、「　colspan　」を使って、２列分またがせればよいのです。このように。

また、「　td　」タグを使って、最後の１行を４列にするという、こんな方法もあります。

２つの行を、またいでいますシステムナインシステムナインシステムナイン

システムナインシステムナインシステムナイン

システムナインシステムナインシステムナインシステムナイン

あとは、アレンジしながら研究してください。お願いします。

で、最終的にはこんな表が作れればＯＫです。

’９８　じゃいあんつ　主軸成績

高橋打率　　　３８７

打点　　　１０３

ホームラン　　　　３５

松井打率　　　４５９

打点　　　１６２

ホームラン　　　　６５

コメントうそだろっ！

ちなみに、タグは、こうなっています。

<table border>
<tr><td colspan=3>’９８　じゃいあんつ　主軸成績</td></tr>
<tr><td rowspan=3>高橋</td><td>打率</td>　　　<td>　　　３８７</td></tr>
　　　　　　　　　　　　<tr><td>打点</td>　　　<td>　　　１０３</td></tr>
　　　　　　　　　　　　<tr><td>ホームラン</td><td>　　　　３５</td></tr>
<tr><td rowspan=3>松井</td><td>打率</td>　　　<td>　　　４５９</td></tr>
　　　　　　　　　　　　<tr><td>打点</td>　　　<td>　　　１６２</td></tr>
　　　　　　　　　　　　<tr><td>ホームラン</td><td>　　　　６５</td></tr>
<tr><td colspan=2>コメント</td><td>うそだろっ！</td></tr>
</table>

ＳＴＥＰ　３

　文字を強調させるには　

文字を強調させるには、強調したい部分の「　td　」を「　th　」に変えるだけです。先ほどの表で、やってみます。

<table border>
<tr><th colspan=3>’９８　じゃいあんつ　主軸成績</th></tr>
<tr><th rowspan=3>高橋</th><td>打率</td>　　　<td>　　　３８７</td></tr>
　　　　　　　　　　　　<tr><td>打点</td>　　　<td>　　　１０３</td></tr>
　　　　　　　　　　　　<tr><td>ホームラン</td><td>　　　　３５</td></tr>
<tr><th rowspan=3>松井</th><td>打率</td>　　　<td>　　　４５９</td></tr>
　　　　　　　　　　　　<tr><td>打点</td>　　　<td>　　　１６２</td></tr>
　　　　　　　　　　　　<tr><td>ホームラン</td><td>　　　　６５</td></tr>
<tr><td colspan=2>コメント</td><td>うそだろっ！</td></tr>
</table>

そうすると、こうなります。

’９８　じゃいあんつ　主軸成績
高橋	打率	３８７
打点	１０３
ホームラン	３５
松井	打率	４５９
打点	１６２
ホームラン	６５
コメント	うそだろっ！

さっきのは、こうでした。

ちゃんと強調されてますね。違いがよーく分かったでしょう？

　さらに高度な使い方　

<td></td>の間に、さまざまなタグを入れれば、文字の色を変えたり、大きくしたり、絵を入れたり、リンクをはることさえできます。タグは、それぞれのページでちゃんと説明してます。ぞちらを見てください。

　枠で遊ぼう　

まずは、ようやくここに、たどり着いた、あなた。本当におつかれさまです。ここでは、ちょっと楽な気持ちで遊んでください。

枠を太く　１

表を作るとき、一番最初に書いた、タグ<table border>。これに数字を加えると枠が、額縁のようになります。

枠の中の数字はタグに書き込む数字です。

　1　

　5　

　10　

　20　

　30　

　50　

枠を太く　２

ただ単に、枠を太くしたいときのタグはこうです。

枠の中の数字はタグに書き込む数字です。

　1　

　5　

　10　

　20　

　30　

　50　

枠と文字の間隔

枠と文字の間隔を大きくするタグは、こうです。

枠の中の数字はタグに書き込む数字です。

　1　

　5　

　10　

　20　

　30　

　50　

もちろん「　cellspacing　」と「　cellpadding　」を組合わせると、枠を太く、しかも文字の間隔を開けられます。ためしてみてください。

１行目１列	１行目２列	１行目３列
２行目１列	２行目２列	２行目３列
３行目１列	３行目２列	３行目３列

システムナイン	システムナイン	システムナイン
システムナイン	システムナイン	システムナイン
システムナイン	システムナイン	システムナイン

３つの行を、またいでいます	システムナイン	システムナイン	システムナイン
	システムナイン	システムナイン	システムナイン
	システムナイン	システムナイン	システムナイン

３つの列を、またいでいます
システムナイン	システムナイン	システムナイン
システムナイン	システムナイン	システムナイン
システムナイン	システムナイン	システムナイン

２つの行を、またいでいます	システムナイン	システムナイン	システムナイン
２つの行を、またいでいます	システムナイン	システムナイン	システムナイン
システムナイン	システムナイン	システムナイン

’９８　じゃいあんつ　主軸成績
高橋	打率	３８７
	打点	１０３
	ホームラン	３５
松井	打率	４５９
	打点	１６２
	ホームラン	６５
コメント		うそだろっ！

ふーっ。 これにて「 表 」は、お・し・ま・い 。

ふーっ。　これにて「　表　」は、お・し・ま・い　。