テーブルを使ってみよう！

►テーブルを使ってみよう！2
ココではテーブルに関することを説明します。

-目次-

■　表にタイトルをつける
■　表の中に色をつける
■　表の枠に色をつける
■　表の背景に画像を使う
■　表の枠のスタイルを変えてみよう
■　表の内側のスタイルを変えてみよう

表にタイトルをつけたい場合に、わざわざ、センタリングしたりめんどくさいことをせずに、下のようにすると、表にタイトルをつけることが出来ます。

コレをブラウザで表示すれば、下のように題名が表示されます。

題名
1-1	1-2

見てもらえば分かるとおり、<caption>～</caption>が題名です。注意としては、題名だから、<table>の上に書いたり</table>の下に書いたりしがちですが、これは、<table>～</table>の間に入れてください。

題名の位置を変えることも可能です。

<caption align="○" valign="△">題名</caption>
○には、left（左）,center（中央）,right（右）
△には、top(上）,bottom（下）　を入力してください。

左下にしてみます。

題名
1-1	1-2

できましたね。ＩＥ以外だと上中央に表示されてるかもしれません。

◆表の中に色をつける

決まった表の色と言うのも、寂しいです。表の中に色をつけてみましょう。

<table border="1" bgcolor="○">
○の所に色を入れます。

また出てきました。bgcolor="○"の丸の部分。#なんちゃらです。分かるわけないので、フリーソフトを使って好きな色の#なんちゃらを探してください。（フリーソフトはこちら）

#ccccccでやってみましょう。

1-1

1-2

灰色になりました。好みの色の表を作ってみてくださいね。

各マスごとに色を変えることもできますよ。

<td bgcolor="○">
○の所に色を入れます。

さっきと似てますけど、<td>にbgcolor="○"を入れるのでお間違いなく。また、#ccccccでやってみましょう。

1-1

1-2

はいできました。1-2には何も色の指定が無いので、白色です。うまくつかえば、見やすい表が作れますね。

◆表の枠に色をつける

さっきは、表の中に色を付けましたが、次は枠に色を付けてみましょう。

<table border="1" bordercolor="○">
○の所に色を入れます。

また#ccccccでやってみます。

1-1

1-2

灰色の枠ができましたね。二重の線が嫌って時は、テーブルを使ってみよう！１で、出てきましたcellspacingを使います。cellspacing="0"にすれば、一本線になるというわけです。

1-1

1-2

◆表の背景に画像を使う

表の背景を色ではなく、画像にすることもできます。

<table　border="1" background="○">
○の部分に画像のＵＲＬを入れてください。

画像はなるべく、同じフォルダ（ディレクトリ）に入れるとURLを間違えないのでオススメです。
では、ちょっとやってみます。

1-1

1-2

なんか汚くなりましたが、このように画像を背景にすることもできます。これも各マスごとに、背景を画像に出来ます。

<td background="○">
○の部分に画像のＵＲＬを入れてください。

背景に色をいれた時と似ていますね。では、左側が画像、右側を色（#cccccc）でやってみます。

<table　border="1">
<td background="star.gif">1-1</td><td bgcolor="#cccccc">1-2</td></tr>
</table>

1-1

1-2

できましたね。画像を使う時は、上のように文字が見えなくなるような画像は避けましょう。（笑）

◆表の枠のスタイルを変えてみよう

さてさて、表の枠のスタイルも変えて面白い表を作ってみましょう。

<table border="1" frame="○">
○には、void（枠なし）,hsides（上下枠のみ）,above（上枠のみ）,below（下枠のみ）,vsides（左右枠のみ）,lhs（左枠のみ）,rhs（右枠のみ）を入力して下さい。

それぞれ表示するとどうなるかやってみます。

1	2
3	4

通常

1	2
3	4

void

1	2
3	4

hsides

1	2
3	4

above

1	2
3	4

below

1	2
3	4

vsides

1	2
3	4

lhs

1	2
3	4

rhs

何に使えるかは、分からないけどこう言うことも出来るので覚えておくと良いでしょう。

◆表の内側のスタイルを変えてみよう

上では、外枠のスタイルを変えました。内側も変えてみましょう。

<table rules="○">
○には、none（無し）,rows（横線）,cols（縦線）のいずれかを入力して下さい。

それぞれ表示するとどうなるかやってみます。

1	2
3	4

通常

1	2
3	4

none

1	2
3	4

rows

1	2
3	4

cols

これも何に使えるかは分からないですが、こう言うことも出来るってことを覚えて置くと良いでしょう。