●<td>と<th>の違い●
まず最初に、前の表を見て分かるように1列増えていますが、
1列目で太文字の指定はしていません。
そうです<th>〜</th>を使っています。1行目の曜日も<th>にします。
又、ここでは、前の表を使いますが、<tr>の align=centerを外します。
<table border=2 align=center width=300 height=220>
<tr bgcolor="#7777ff"> ←１行目
<th>
★
</th>
<th>
月
</th>
<th>
火
</th>
<th>
水
</th>
<th>
木
</th>
<th>
金
</th>
</tr>
<tr bgcolor="#ffffaa"> ←2行目
<th>
１<br>時<br>限<br>目
</th>
<td>
現<br>国
</td>
・・・
(中省略)
・・・
</td>
</tr>
<tr bgcolor="#cfefb7"> ←3行目
<th>
2<br>時<br>限<br>目
</th>
<td>
数<br>学
</td>
・・・
(中省略)
・・・
</tr>
</table>
|
|
表示結果
| ★ |
月 |
火 |
水 |
木 |
金 |
１
時
限
目 |
現
国 |
数
学 |
化
学 |
英
語 |
経
済 |
２
時
限
目 |
数
学 |
生
物 |
美
術 |
現
国 |
技
術 |
このように<td>の変わりに<th>を使う事によって
文字列が強調(太文字)され、更に中央に揃えてくれます。
|
●「align=**」●
<td>,<th>で出来たセルの文字列位置(左右)を決めます。
又、<tr>の align=centerは、元に戻します。
<table border=2 align=center width=300 height=220>
<tr bgcolor="#7777ff"> ←１行目
<th>
★
</th>
<th>
月
</th>
・・・
(中省略)
・・・
</td>
</tr>
<tr align=center bgcolor="#ffffaa"> ←2行目
<th>
１<br>時<br>限<br>目
</th>
<td align=left>
現<br>国
</td>
・・・
(中省略)
・・・
</td>
</tr>
<tr align=center bgcolor="#cfefb7"> ←3行目
<th>
2<br>時<br>限<br>目
</th>
<td align=right>
数<br>学
</td>
・・・
(中省略)
・・・
</tr>
</table>
|
|
表示結果
| ★ |
月 |
火 |
水 |
木 |
金 |
１
時
限
目 |
現
国 |
数
学 |
化
学 |
英
語 |
経
済 |
２
時
限
目 |
数
学 |
生
物 |
美
術 |
現
国 |
技
術 |
<tr>で align=centerを指定しているので、
<td>での align=centerの指定は、省略します。
|
●「valign=**」●
<td>,<th>で出来たセルの文字列位置(上下)を決めます。
又、前の表をそのまま使います。
<table border=2 align=center width=300 height=220>
<tr bgcolor="#7777ff"> ←１行目
<th>
★
</th>
<th>
月
</th>
・・・
(中省略)
・・・
</td>
</tr>
<tr align=center bgcolor="#ffffaa"> ←2行目
<th>
１<br>時<br>限<br>目
</th>
<td align=left>
現<br>国
</td>
<td valign=top>
数<br>学
</td>
・・・
(中省略)
・・・
</td>
</tr>
<tr align=center bgcolor="#cfefb7"> ←3行目
<th>
2<br>時<br>限<br>目
</th>
<td align=right>
数<br>学
</td>
<td valign=bottom>
生<br>物
</td>
・・・
(中省略)
・・・
</tr>
</table>
|
|
表示結果
| ★ |
月 |
火 |
水 |
木 |
金 |
１
時
限
目 |
現
国 |
数
学 |
化
学 |
英
語 |
経
済 |
２
時
限
目 |
数
学 |
生
物 |
美
術 |
現
国 |
技
術 |
例題では、<th>での指定はしていませんが、
結果は同じなので省略します。
たまたま、作った表が時間割りでしたが、画像などを取り入れて<table>
での border=**を外すか、0(ゼロ)にし、
align=** valign=**を使いセル一つ一つ位置を変えると、
面白い物が出来ると思います。
私の Pageで言うと 以前のメインページですが、テーブルのボーダーを表した
物があります。 見る
|
●「width=** height=**」●
<td>,<th>で出来たセルの幅、高さを決めます。ここでは、表の幅で300を取っているので
その 300を 6列に分配します。例では、均等に取ります。
ここでは、 height=**の指定は、省略します。
<table border=2 align=center width=300 height=220>
<tr bgcolor="#7777ff"> ←１行目
<th width=50>
★
</th>
<td width=50>
月
</td>
<td width=50>
火
</td>
<td width=50>
水
</td>
<td width=50>
木
</td>
<td width=50>
金
</td>
</tr>
・・・
(中省略)
・・・
</table>
|
|
表示結果
| ★ |
月 |
火 |
水 |
木 |
金 |
１
時
限
目 |
現
国 |
数
学 |
化
学 |
英
語 |
経
済 |
２
時
限
目 |
数
学 |
生
物 |
美
術 |
現
国 |
技
術 |
この指定は、1行目だけの指定でも大丈夫だと思います。が、ちなみに私は、
Explorer，Netscapee以外のブラウザでは、どうか分からないので
なるべくすべての行に指定しています。
又、例えば 2列の表があるとします。1列目だけ
width=100を指定するとします。
するとInternet Explorerではその分だけのサイズを取ってくれますが、
Netscapeでは、無効となり指定していないのと同じになりますから
サイズを指定する際は、両方に指定した方が良いです。
|
●「bgcolor=#"******"」●
セル一つ一つにの背景色を付けます。
●「background="画像 File"」●
Internet Explorer3.0以上対応
セル一つ一つにの背景画を付けます。
|
「bgcolor=#"******"」
<table border=2 align=center width=300 height=220>
<tr bgcolor="#7777ff"> ←１行目
<th width=bgcolor="50">
★
</th>
<th width=50 bgcolor="#99ee22">
月
</th>
<th width=50 bgcolor="#66ff66">
火
</th>
<th width=50 bgcolor="#aaffff">
水
</th>
<th width=50 bgcolor="#cc66aa">
木
</th>
<th width=50 bgcolor="#ffd700">
金
</th>
</tr>
<tr align=center bgcolor="#ffffaa"> ←2行目
<td width=50 bgcolor="#ffff66">
１<br>時<br>限<br>目
</td>
・・・
(中省略)
・・・
</tr>
<tr align=center bgcolor="#cfefb7"> ←3行目
<td width=50 bgcolor="#9cbc84">
１<br>時<br>限<br>目
</td>
・・・
(中省略)
・・・
</tr>
</table>
|
|
表示結果
| ★ |
月 |
火 |
水 |
木 |
金 |
１
時
限
目 |
現
国 |
数
学 |
化
学 |
英
語 |
経
済 |
２
時
限
目 |
数
学 |
生
物 |
美
術 |
現
国 |
技
術 |
あまりセンスは良くありませんが我慢して見て下さい。(＾＾；
|
|
「backgound="画像 File"」
<table border=2 align=center width=300 height=220>
<tr bgcolor="#7777ff"> ←１行目
<th width=bgcolor="50">
★
</th>
<th width=50 bgcolor="#9922ee" background="images/b2.gif">
月
</th>
<th width=50 bgcolor="#ff66ff" background="images/b2.gif">
火
</th>
<th width=50 bgcolor="#aaffff" background="images/b2.gif">
水
</th>
<th width=50 bgcolor="#ccaa66" background="images/b2.gif">
木
</th>
<th width=50 bgcolor="#ffd700" background="images/b2.gif">
金
</th>
</tr>
<tr align=center bgcolor="#ffffaa"> ←2行目
<th width=50 bgcolor="#ffff66">
１<br>時<br>限<br>目
</th>
・・・
(中省略)
・・・
</tr>
<tr align=center bgcolor="#cfefb7"> ←3行目
<th width=50 bgcolor="#9cbc84">
２<br>時<br>限<br>目
</th>
・・・
(中省略)
・・・
</tr>
</table>
|
|
表示結果
| ★ |
月 |
火 |
水 |
木 |
金 |
１
時
限
目 |
現
国 |
数
学 |
化
学 |
英
語 |
経
済 |
２
時
限
目 |
数
学 |
生
物 |
美
術 |
現
国 |
技
術 |
Internet Explorer3.0以上、及びNetscape4.0で見ている方は、分かると思います。
言うまでもありませんがそれ以外で見ている人もいますから、色の指定はしておいた方が良いと思います。
このメニューの、TopPageの「Tomey の Study Room」もこれを使っています。
|
| 
