Ｙｕｍｉ’ｓ　ＲＯＯＭ

<table bgcolor="# 背景色の色数値 " border=" 外枠の太さ " bordercolor="# 線の色数値 " cellspacing=" 間隔 "><tr><th colspan="くっつけるセルの数" > タイトル </th></tr><tr><td> コンテンツ(内容)１ </td><td> コンテンツ２ </td></tr></table>

この中の文字を、コピー＆
ペーストして使ってね♪

4：タイトルのマスだけ色を変えたい！

簡単！特定のセルだけに背景色を設定するの。
bgcolor="#色数値" を付け加えるだけ。
thとtdの後に付けるとそのマスだけ。
trの後に付けるとその行全部に色が付けられるよ。
右のタグを使って･･･

タイトル

セル

どうかしら？

<table bgcolor="# 背景色の色数値 " border=" 外枠の太さ " bordercolor="# 線の色数値 " cellspacing=" 間隔 "><tr><th colspan=" くっつけるセルの数 " bgcolor="#セルの背景の色数値" > タイトル </th></tr><tr><td> コンテンツ(内容)１ </td><td> コンテンツ２ </td></tr></table>

この中の文字を、コピー＆
ペーストして使ってね♪

5：テーブルやセルの大きさをそろえる。

実は今まで(上の1～4)はサイズを設定してあるの。
セルの中身に合わせてサイズが変わってくれるから、設定しなくても大丈夫なんだけど、見栄えを良くするには、セルのサイズが揃ってた方がいいよね。試しに4で作ったテーブルの、サイズを決める部分を外すと･･･

タイトル

あ

あらあら大変！
文字の大きさに合わせてセルの大きさも変わっちゃった。
こんな事にならないように、 width="横幅" でサイズを決めてしまいましょう。
見出しやテーブル自体の横幅を決めるのにも、同じく
<th width="横幅">
<table width="横幅">
･･･でＯＫ。
高さを決めたい時には height="高さ" を加えてね。

<table bgcolor="# 背景色の色数値 " border=" 外枠の太さ " bordercolor="# 線の色数値 " cellspacing=" 間隔 "><tr><th colspan=" くっつけるセルの数 " bgcolor="# セルの背景の色数値 "> タイトル </th></tr><tr><td width="横幅" height="高さ" > コンテンツ(内容)１ </td><td width="横幅" height="高さ" > コンテンツ２ </td></tr></table>

この中の文字を、コピー＆
ペーストして使ってね♪

6：セル内のコンテンツの位置を決める。

これも、実は今までのはこっそりいじってたの。
上下左右、好きな位置に設定できます。
何も設定しないと、左側のセルの様にコンテンツ(内容)が左側に行ってしまいます。
試しに右側のセルだけ、わざと変えてみました。

タイトル

セル

横位置は･･･左： left 中： center 右： right
縦位置は･･･上： top 中： middle 下： bottom
です。好きなものを当てはめて下さいね。

<table bgcolor="# 背景色の色数値 " border=" 外枠の太さ " bordercolor="# 線の色数値 " cellspacing=" 間隔 "><tr><th colspan=" くっつけるセルの数 " bgcolor="# 色数値 "> タイトル </th></tr><tr><td width=" 横幅 " height=" 高さ " align="横位置" valign="縦位置" > コンテンツ(内容)１ </td><td width=" 横幅 " height=" 高さ " align="横位置" valign="縦位置" > コンテンツ２ </td></tr></table>

この中の文字を、コピー＆
ペーストして使ってね♪

7：テーブルの位置を決める

何もしないと左側の一番上に貼り付いてしまいます。
テーブル自体の位置も、上と同じalignを使います。
ただし、縦位置は設定出来ません。
縦位置を調節する方法は、後でね。
横位置･･･左： left 中： center 右： right

<table bgcolor="# 背景色の色数値 " border=" 外枠の太さ " bordercolor="# 線の色数値 " cellspacing=" 間隔 " align="テーブルの横位置" ><tr><th colspan=" くっつけるセルの数 " bgcolor="# 色数値 "> タイトル </th></tr><tr><td width=" 横幅 " height=" 高さ " align=" 横位置 " valign=" 縦位置 "> コンテンツ(内容)１ </td><td width=" 横幅 " height=" 高さ " align=" 横位置 " valign=" 縦位置 "> コンテンツ２ </td></tr></table>

この中の文字を、コピー＆
ペーストして使ってね♪

8：セル内の余白を作る。

この「余白」を作っておけば、中のコンテンツが枠の所ギリギリになる様な事が無く、見栄えがいいと思いますよ。
また、応用編としてテーブルの中に小さいテーブルをはめ込む際などに使えるので、憶えておくといいですよ！

タイトル

セル

セルの内側の白い部分を余白と思って下さい。
あ、実際にはもちろん白くはなりませんよ。
目には見えないけど、この絵で言えば緑色の部分のみに納まるわけです。

<table bgcolor="# 背景色の色数値 " border=" 外枠の太さ " bordercolor="# 線の色数値 " cellspacing=" 間隔 " align=" テーブルの横位置 " cellpadding="5" ><tr><th colspan=" くっつけるセルの数 " bgcolor="# 色数値 "> タイトル </th></tr><tr><td width=" 横幅 " height=" 高さ " align=" 横位置 " valign=" 縦位置 "> コンテンツ(内容)１ </td><td width=" 横幅 " height=" 高さ " align=" 横位置 " valign=" 縦位置 "> コンテンツ２ </td></tr></table>