1. マージンと枠の幅
というテーブルを書くには・・・
<table border=8 cellpadding=5 cellspacing=3>
<tr>
<th>見出し 1</th>
<th>見出し 2</th>
</tr>
<tr>
<td>
内容,内容・・・
</td>
<td>とほほ</td>
</tr>
</table>
th : * 見出し用セル,デフォルトでは中央寄せ・太字
td : データ用セル,デフォルトでは左寄せ
border : * 影の太さ,省略したとき影は普通表示されない.
cellpadding : * セル内のマージン,指定しないときはマージンが0
cellspacing : * 枠(セル間)の太さ
※ * 印のものは省略可.
|
2. 幅と高さも指定するとよい.省略可
<table border=1 width=200 height=80>
<tr>
<td>中身・なかみ・・・</td>
</tr>
</table>
width : 幅.table , th , td に指定可.
ピクセル,パーセント(tableのみ) で指定.
height : 高さ.table , th , td に指定可.
ピクセル,パーセント(tableのみ) で指定.
正確な width , height の計算法
- cellspacing (枠の隙間)を記述した場合 -
『セルの幅 + 枠の隙間(両端とセル間)』
|
3. セルの連結
秋のくだもの |
おいしさ |
ぶどう | くり |
とってもおいし |
かき | もも |
なし | りんご |
<table border=1 cellspacing=0>
<tr> <th colspan=2>秋のくだもの
</th> <th>おいしさ
</th> </tr>
<tr> <td>ぶどう
</td> <td>くり
</td> <td rowspan=3>とってもおいし
</td> </tr>
<tr> <td>かき
</td> <td>もも
</td> </tr>
<tr> <td>なし
</td> <td>りんご
</td> </tr>
</table>
colspan : 横方向セルの連結.セルの数を指定.
rowspan : 縦方向セルの連結.セルの数を指定.
連結した場合,不要になる <td> </td> は
消しておかないと泣きそうになる.
セルの連結をするとき,作成中は border 属性を 1 以上にして枠を表示しておくと
どこを直せばいいかが見つけやすくなる.
|
4. データの配置
align -> |
left |
center |
right |
valign (下) |
top |
align=left(Default) valign=top |
align=center valign=top |
align=right valign=top |
middle |
align=left(Default) valign=middle(Default) |
align=center valign=middle(Default) |
align=right valign=middle(Default) |
bottom |
align=left(Default) valign=bottom |
align=center valign=bottom |
align=right valign=bottom |
※ Default は,td のとき.
th のデフォルトは,align=center , valign=middle.
<table border=1 cellspacing=0 width=400 height=300>
<th>align -></th>
<th rowspan=2>left</th>
<th rowspan=2>center</th>
<th rowspan=2>right</th>
</tr>
<tr>
<th>valign (下)</th>
</tr>
<tr>
<th>top</th>
<td align=left valign=top>align=left(Default)<br>valign=top
</td>
<td align=center valign=top>align=center<br>valign=top
</td>
<td align=right valign=top>align=right<br>valign=top
</td>
</tr>
<tr>
<th>middle</th>
<td align=left valign=middle>align=left(Default)<br>valign=middle(Default)
</td>
<td align=center valign=middle>align=center<br>valign=middle(Default)
</td>
<td align=right valign=middle>align=right<br>valign=middle(Default)
</td>
</tr>
<tr>
<th>bottom</th>
<td align=left valign=bottom>align=left(Default)<br>valign=bottom
</td>
<td align=center valign=bottom>align=center<br>valign=bottom
</td>
<td align=right valign=bottom>align=right<br>valign=bottom
</td>
</tr><br>
</table>
※ 省略可
align : 横方向の位置.left(td でのデフォルト) , center(th でのデフォルト) , rightで指定.
valign : 縦方向の位置.top , middle(td , th でのデフォルト) , bottomで指定.
|
5. 背景色
<table border=1 cellspacing=1>
<tr>
<td bgcolor="#66FF66">緑の背景</td>
<td bgcolor="#FF99FF">桃色の背景</td>
</tr>
<tr>
<td>背景指定なし</td>
<td bgcolor="#FFFF00">黄色の背景</td>
</tr>
</table>
bgcolor : table , tr , td , th に指定可.省略可
tale に背景色を指定した場合,IE では cellspacing (枠の隙間)と
border (外枠)の部分にも色がつく.
NS は tr , td , th と同じようにセルの部分のみ.
色については [Web-color Sample] を参照.
|
6. 表題
天気予報は?
日 |
予報 |
ある日 |
晴れのち曇り |
次の日 |
雨 |
という風にテーブルに題をつけたいときは,
table タグの中(すぐ下)で,tr の前(外)に記述する.
<table border=1>
<caption>天気予報は?</caption>
<tr>
<th>日</th>
<th>予報</th>
</tr>
<tr>
<td>ある日</td>
<td>晴れのち曇り</td>
</tr>
<tr>
<td>次の日</td>
<td>雨</td>
</tr>
</table>
|