###その五・・・・バーガーもいろいろ工夫###

用意する物
・道具・・・・・・ PC
PC内メモ帳(windows)
Symple Text(マック)
適当な画像
今まで作ったhtmlファイル
ブラウザ(オフラインモードで使用)
※ブラウザは、インターネットエクスプローラー(IE)か
 ネットスケープ(ネスケ)がいいです。
 私が他のものをもってないので、確認できない為です。
 決して回し者ではありません。/^-^;

 

●今回は容器(tableタグ)をカラフルにしたりいろいろ変えていきます。
いきなりソースでいきます。
ソース(1) 画面表示(1)
<html>
<head>
<title>
練習のページ
</title>
</head>
<body bgcolor="white">
<center>
<br><br>
<table border="5" bgcolor="blue" bordercolorlight="lime" bordercolordark="green">
<tr>
<td>
<font color="white">いろいろ試そう♪</font></td>
</tr>
<tr>
<td bgcolor="white">
セルの中の色も変わるよ></td>
</tr>
</table>
</center>
</body>
</html>

いろいろ試そう♪
セルの中の色も変わるよ
bgcolor="blue"→表の背景色を指定
border="5"→枠線の太さを指定
bordercolorlight="lime"
→表枠の左と上の色を指定(明るい色)※但しネスケでは指定色にはならない
bordercolordark="green"
→表枠の下と右の色を指定(暗い色)※但しネスケでは指定色にはならない
<td bgcolor="white">→セルの背景色を指定
※表の背景もセルの背景も、もちろん画像表示もできます。
そのときは、bodyタグの中に打ったbackground="画像ファイル名"で指定します。
※ネスケ=ネットスケープ(ブラウザ)
セルの中が窮屈そうだ、と感じた人いませんか?
そんなときは、こうしましょう。
(表のみのソースにします。)
ソース(2) 画面表示(2)
<table border="5" bgcolor="blue" bordercolorlight="lime" bordercolordark="green" sellpadding="5" cellspacing="10">
<tr>
<td>
<font color="white">いろいろ試そう♪</font></td>
</tr>
<tr>
<td bgcolor="white">
セルの中の色も変わるよ></td>
</tr>
</table>

いろいろ試そう♪
セルの中の色も変わるよ
sellpadding="5"→セル内のスペースを5ピクセルに指定。(文字や画像と枠との距離)
cellspacing="10"→セルとセルの間のスペースを10ピクセルに指定。
では、一気に複雑化してしまおう・・・f^-^;
ソース(3) 画面表示(3)
<table border="1" bordercolorlight="lime" bordercolordark="green" sellpadding="10" cellspacing="0">
<tr>
<th colspan="2" bgcolor="blue">
<font color="white">いろいろ試そう♪(横2つ分)</font></th>
</tr>
<tr>
<td rowspan="3">
(下3つ分)</td> 
<td>
いろいろ</td>
</tr>
<tr>
<td>
変えて</td>
</tr>
<tr>
<td>
確かめてみよう</td>
</tr>
</table>

いろいろ試そう♪(横2つ分)
(下3つ分) いろいろ
変えて
確かめてみよう
<th></th>→中央表示、太字にしてくれる
                   <td>でやりたい場合は、<td align="center"><b>いろいろ試そう♪</b></td>
         としないと上のように表示されない。
colspan="○"→○の部分には数値を入れる。
          上の場合は2なので、同じ行の2つのセルを合わせた幅のものになる。
rowspan="○"→○の部分には数値を入れる。
          上の場合は3なので、下方向に3つのセルを合わせた幅のものになる。
※rowspanは、指定ナシの場合、縦方向の真ん中表示になります。
         セルの上部に表示させる場合は、"align="top""
         セルの下の方に表示させる場合は、"align="bottom"と指定します。、
※colspanは、指定ナシの場合、標準の左寄せになります。
         真ん中に表示させる場合は、align="center"
         右寄せがいい場合は、align="right"で指定します。
表の中に表をいれることもできます。
 色をつけて重ねたりすると額縁みたいにみえます。
 (ただし、ネットスケープでは色がきちんと表示されません。)
 このページの画面表示の表も表の中に表が入っていることになります。

※<td>*</td>あるいは<th>*</th>の*の部分に表のタグを入れればOKです。
 きちんと挟んであれば、OKです。


例)
<table border="2" bgcolor="teal">
<tr><td>

<table border="2" bgcolor="white">
<tr><td>

ここには、文章でも画像でも、またもう一つ表でもOK。
</td></tr></table>
</td></tr>
</table>
1つ目(外側)の表 2つ目(内側)の表
<table border="2" bgcolor="teal">
<tr><td>
</td></tr>
</table>
<table border="2" bgcolor="white">
<tr><td>

ここには、文章でも画像でも、またもう一つ表でもOK。
</td></tr></table>
ソース(4) 画面表示(4)
<table border="2" bgcolor="green">
<tr><td>

<table border="2" bgcolor="yellow" cellpadding="5">
<tr><td>

<img src="guruguru-s.jpg">
</td></tr></table>
</td></tr>
</table>
 
ネスケの場合、上のソースは、
※1つ目の表の枠の色は、ページ背景色の色、白色。
※2つ目の表の枠が、1つ目の表の指定色、緑色。
  勿論、両方とも、中のセル内はそれぞれに指定された色になります。
  ブラウザを複数持っている方は、試してみてください。
※私はIE(インターネットエクスプローラー)とネスケしか持っていませんので、他のブラウザの場合はわかりません。


ページができたら、今回のものも見やすいように、
他のページとリンクさせておきましょう。
あと、注意点としては、インターネットエクスプローラーと
ネットスケープとは、かなり表示が違う場合があります。
例えば枠の色とか背景色とかなんですが、そこは・・試してみて下さい。

というわけで、『HTML入門編』も『表』まで済みました。
ここまで見てくださりありがとうございました。m(__)m

個人的に、HTMLソースは、ホワイトソースより簡単かも?と思ってみたり・・(笑)
どっちも注意深くやればいいんですけどね。

ここまで慣れてくれば、もうタグ辞典を買ってきても大丈夫。
自分のホームページをどんどんいいものに育てていきましょう。
(・・・・といいつつ、私ってやってない?!(汗))

解説希望などございましたら、お気軽にどうぞ〜♪


<<Back   3分間クッキング・Index  一番最初にHPを作りながらまとめたhtml基礎講座はこちらから>>