html講座

(1) 表を作りたい

全章までで、文章はある程度書けるようになりました。
この章では表の書き方を勉強してましょう！

表を使えば、いろんなことに応用できます。
例えば、野球の結果をＨＰに載せたいといった場合
↓こう書くと

SRC=2-1.html

こうなってしまいます。
これでは格好悪いですし、書くのも面倒です。
本当は↓こうやりたいんですよね？

	１	２	３	４	５	６	７	８	９	計
松阪牛ライオンズ	０	０	１	０	１	０	０	０	０	２
米沢牛マイナーズ	０	０	０	３	０	０	０	０	×	３

それではどうすれば、こういった表が書けるのでしょうか？
それには<table>～</table>タグを使います。

<table>～</table>：表を作る
border=(size):枠の太さを指定する。

これだけでは表は作れません。
表には「行」と「列」という要素があるので
それを指定してやる必要があります。
それには次のタグを使用します。

<tr>～</tr>：行を作る
<td>～</td>：列を作る

例えば、
１行×１列の表を作るには

となります。

２行×２列の表を作るには

となります。

まず<tr>～</tr>で行を作り、
<td>～</td>で列に区切って行く
と考えると簡単かもしれません。
では、試しに３行×３列の表を作ってみてください。
↓こんな感じの表です。

1行1列	1行2列	1行3列
2行1列	2行2列	2行3列
3行1列	3行2列	3行3列

出来たでしょうか？
ソースは↓こんな感じになったと思います。

SRC=2-2.html

こう出来たでしょうか？
<table>～</table>タグの基本はこんな感じです。

ポイント

タグは外から中へ

これは前にも出てきたと思うのですが
<table>タグの場合は特にそうしましょう！
→ → →
→ → → →・・・
の様に外側から書く癖を付けましょう！
<table>～</table>を書いて
<tr>～</tr>で行を書いて
<td>～</td>で列を書いて行きましょう！
その方が頭の中で表をイメージして書いて行けますし
閉じタグ</XXX>を忘れることもありません。

それでは先ほどの野球の結果を
<table>～</table>タグを用いて作ってみましょう！
３行×１１列の表です。

SRC=2-3.html

こんな感じで出来たでしょうか？

(2) 表のタイトルや見出しを入れたい。

表が作れる様になったら、今度はタイトルや見出しを作りましょう！

まず表にタイトルを入れるには

<caption>～</caption>：表のタイトルを付ける

を使います。

次に見出しを作るには

<th>～</th>：見出しの列を作る

を使います。

タイトルとは文字どおり表のタイトルです。
見出しとは
行や列の説明の部分です。
例えば

	１	２	３	４	５	６	７	８	９	計
松阪牛ライオンズ	０	０	１	０	１	０	０	０	０	２
米沢牛マイナーズ	０	０	０	３	０	０	０	０	×	３

では、「松阪牛ライオンズ」とか「１」「２」・・・とかの部分です。
見出しにしたい部分の<td>～</td>タグを
<th>～</th>タグに入れ替えればＯＫです。

それではタイトルと見出しを入れてみましょう！
↓こんな感じに出来たでしょうか？

SRC=2-4.html

表示イメージ
<caption>～</caption>タグでタイトルを
<th>～</th>タグで見出しを
指定しています。

これでタイトルと見出しの作り方がわかって頂けたでしょうか？

ポイント

見出しは<td>の代わりに<th>

見出しをうまく使ってメリハリのある表を作りましょう！

(3) 列を跨いだセルが作りたい。

つまり↓こんな感じのですよね？

１	２
３	４	５

この「２」みたいに列を跨いだセルはどうやってやるのでしょう？
それには<td>～</td>または<th>～</th>タグの
次のオプションで指定します。

<td>～</td>
<th>～</th>
colspan=(num)：列を跨ぐ

(num)は跨ぐ列の数を指定します。

では、順をおって覚えていきましょう。

イメージ

ソース

１	２	３
４	５	６
７	８	９

上記の「１」と「２」のセルをくっつけてみましょう。

「１」のセルが２つのセル（列）を跨ぐので
<td colspan=2>１</td>
となり、「２」のセルがいらなくなるので消します。

イメージ

ソース

１		３
４	５	６
７	８	９

では次に「４」「５」「６」のセルをくっつけてみてください。

「４」のセルが３つのセル（列）を跨ぐので
<td colspan=3>４</td>
となり、「５」「６」のセルがいらなくなるので消します。

イメージ

ソース

１		３
４
７	８	９

「列」の跨ぎ方はわかって頂けたでしょうか？

ポイント

各行のセルの数は同じにしましょう！

いまさらこんなこと書いても遅いかもしれませんが
各行の<tr>～</tr>タグ内の
<td>～</td>タグ or <th>～</th>タグで区切る
セルの数は同じにしましょう！
当然、colspan=(num) とした場合、(num)個分のセルと数えましょう！

(4) 行を跨いだセルが作りたい。

つまり↓こんな感じのですよね？

１	２	３
１	４	５

この「１」みたいに行を跨いだセルはどうやってやるのでしょう？
それには<td>～</td>または<th>～</th>タグの
次のオプションで指定します。

<td>～</td>
<th>～</th>
rowspan=(num)：行を跨ぐ

(num)は跨ぐ行の数を指定します。

では、順をおって覚えていきましょう。

イメージ

ソース

１	２	３
４	５	６
７	８	９

では、「１」と「４」のセルをくっつけてみましょう。

「１」のセルが２つのセル（行）を跨ぐので
<td rowspan=2>１</td>
となり、「４」のセルがいらなくなるので消します。

イメージ

ソース

１	２	３
１	５	６
７	８	９

つまりソース上は、２行目のセル（列）の数が
他より一つ少なくなります。

では次に「２」「５」「８」のセルをくっつけてみてください。

「２」のセルが３つのセル（行）を跨ぐので
<td rowspan=3>２</td>
となり、「５」「８」のセルがいらなくなるので消します。

イメージ

ソース

１	２	３
		６
７		９

ソース的にはセルの数が２行目が２つ少なくなり、
３行目が１つ少なくなります。

「行」の跨ぎ方はわかって頂けたでしょうか？

ポイント

行を跨ぐ場合は、まず普通に行×列を書いてから
つなげて行きましょう！

慣れるとそんな必要はなくなりますが、
慣れるまでは、上記説明の手順のように
つなげていく方法でやると間違いが少ないです。
そのうち、頭の中で表をイメージしながら書けるようになれると思います。

(3) 各セルに色を付けたい。

↓こんなことが出来ます。

red

blue

orange

black

もう色を付けるのは慣れてますよね？
オプションは次の物を使います。

<tr>：行毎
<td>：セル毎
<th>：見出しセル毎
bgcolor=(color)：色を指定する。

(color)はもうお分かりように
カラーネームまたはRGB値を指定します。
ちなみに僕が使うのはこんな感じ。
<tr>タグで指定すると、行すべてが同色となります。
<td>タグ、<th>タグではセル毎に色を指定されます。
それでは次のセルの色を変えてみてください。

イメージ

ソース

１		２
１		３
４	５	６

「１」→赤(red)
「２」→青(blue)
「３」→黄(yellow)
「４」「５」「６」→緑(green)
にしてみましょう！

SRC=2-5.html

こんな感じに出来たでしょうか？
「４」「５」「６」は各セル毎指定してもいいのですが、
面倒なので行で指定してしまいましょう！

これで色を付けることが出来るようになりました。

<table>タグの基本はこれですべてです。
応用した使い方は後の章で出てくるので
楽しみにしていてください。