Yumi’s ROOM

Yumi’s ROOM

見ちゃダメ!(P3)




Page3  テーブル


<table bgcolor="# 背景色の色数値 " border=" 外枠の太さ " bordercolor="# 線の色数値 "><tr><td> コンテンツ(内容) </td></tr></table>

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

2: 枠を1本線にする。

さて、キレイに色も枠も付きました。
でも・・・
なんで、2重線なの?
それは、セルとセルの間隔があいてるからです。
「セル」って、つまり「マス」ね。
こういう事。
セル
セル
セル
セル
cellspacing="0" と付け加えるとセルとセルの間隔がなくなって右の様になるよ☆

※もちろん逆もOK。
0の所に大きい数字入れればそれだけセル同士の間隔が開くから、工夫して使ってみてね。

<table bgcolor="# 背景色の色数値 " border=" 外枠の太さ " bordercolor="# 線の色数値 " cellspacing="間隔" ><tr><td> コンテンツ(内容)1 </td><td> コンテンツ2 </td></tr></table>

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

3: タイトル付けたい!

上にもう1段作ってとなり同士のセルを1つにするの。 thの代わりにtdでも大丈夫。
thの方は「見出し」用だから、自然と文字がタイトルらしく太くなるよ。
右のタグを使って・・・
タイトル
セル
セル
はい、出来ました。


上下のセルを1つにしたい時は、
colspan の代わりに rowspan を使ってね。

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

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

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

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

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

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

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

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

タイトル

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

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

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

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

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

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

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

タイトル
セル
セル

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

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

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

9: 見えないテーブルを使って・・・裏ワザその1
 《テーブルを横に並べる》


実は
2 のテーブルが2つ横に並んでるのは、こんな裏ワザを使ってます。
普通は続けてテーブル作ったら縦に並んじゃうの!

セル
セル
セル
セル

この赤い線をborder="0"で見えない線にしちゃえばOK。

<table border="0"><tr><td> テーブル1 </td><td> テーブル2 </td></tr></table>

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

10: 見えないテーブルを使って・・・裏ワザその2
 《スペースを作る》


7 で決めたかったテーブルの縦位置。
スペースを空けたかったら<br>タグをいっぱい並べても出来るけど、高さによっては、それは気が遠くなるよね。
この方法なら数字を変えればいいだけだから、簡単よ!

タイトル
セル
セル

<table border="0" height=" スペースの高さ "><tr><td></td></tr>
</table> テーブルなど

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

11: おまけ
 《長さの単位のお話》

これまで説明した長さ(横幅/高さ)は数字だけ入れていましたが、それは"ピクセル"という単位なんです。
場合によっては%であらわす事も出来ますよ。

例えばこのページ。
赤い枠の一番外のテーブルはwidthを使って横幅720(ピクセル)に決めてあるの。
で、セルの余白をcellpaddingを使って20(ピクセル)、そして中のピンクの色付きテーブルの横幅を100%にしています。
セルの余白があるから100%にしても赤い枠のギリギリまで、こないという訳。
で、しかも大きさが揃う。

色々試してみてね♪

12: おまけ
 《参考までに》

ピクセルで言われても・・・
そうですよね。
私も正直、頭に描いたサイズが果たして何ピクセル位なのか、いつも悩んじゃいます。
なので、ここにいくつか線を載せておきますので参考にして下さい♪
1
10
50
100
200
300
400
500
600



前へ このページの一番上へ もくじへ トップへ





© Rakuten Group, Inc.
X
Mobilize your Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: