テーブル
下は、テーブル（table）をつくる構文
<html> <head> <title>マイ・ホームページ</title> </head> <body> <table border="1"> <tr> <td>晴れ</td><td>雨</td> </tr> <tr> <td>雪</td><td>くもり</td> </tr> </table> </body> </html> |
<tr> は 「行」 のことで、 <td> は 「列」 を意味している
これを Internet Explorer で見ると、下のように見える
| 晴れ | 雨 |
| 雪 | くもり |
よく使う tableタグ をいくつか掲載
●<table border="0"> テーブルの外枠の線をなくす
●<table bordercolor="red"> テーブルの外枠の線の色を赤にする
●<table width="200"> テーブル全体の横幅を200pxにする
●<td width="200"> 列の横幅を200pxにする
●<tr height="40"> 行の高さを40pxにする
●<table bgcolor="red"> テーブル全体の背景を赤にする
●<tr bgcolor="red"> 列の背景を赤にする
●<td align="left" valign="middle"> 文字の位置で、横方向を左、縦方向を中央にする
※中央→center 左→left 右→right 上部→top 中央→middle 下部→bottom
下のような書き方もある
立体的なテーブルにする
| みなさま ご機嫌いかがですか |
<table border=5 bordercolorlight="lightgreen" bordercolordark="darkgreen"> <tr height="100" valign="middle"> <td width="500" bgcolor="green" align="center"> <font color="white">みなさま ご機嫌いかがですか</font> </td></tr></table>bgcolor="green" を background=" ファイル名 " とするとバックを画像にすることもできる
薄い色の細い枠線を引く
|
<table border=0 bgcolor=#c3c3c3 cellspacing=0 cellpadding=0><tr><td> <table border=0 cellspacing=1 cellpadding=3> <tr bgcolor="#ffffff" height="30" valign="bottom"><td width="100" align="center">商品A</td><td width="100" align="center">\2,000</td></tr> <tr bgcolor="#ffffff" height="30" valign="bottom"><td width="100" align="center">商品B</td><td width="100" align="center">\3,000</td></tr> </table> </td></tr></table>
細い縦線だけを引く方法
まず、1px × 1px の画像を作る
ここでは色を灰色、ファイル名を ten.jpg としている
|
ああああああああああああああああああ
いいいいいいいいいい ううううううううううううううううう |
|
えええ
おおお |
<table border=0> <tr height="200"><td width="400" valign="top"> ああああああああああああああああああ <br><br> いいいいいいいいいい <br><br> ううううううううううううううううう </td> <td> <table height="200"><tr><td background="ten.jpg" width="1"></td></tr></table> </td> <td width="60" valign="top"> えええ <br><br> おおお </td></tr></table>これを使えば色んな場所に線が引けると思う
CSS（スタイルシート）を使えば、もっといろんなテーブルを作ることができる
---- End ----
↑PageTop その他にもどる