6.テーブル
テーブル(表)の作り方はコツをつかめば簡単です。
枠線を表示しないでレイアウトに使うことも多いです。
下の作成例を見てください。
※分かりやすいように色をつけてます。
|
Aさん |
Bさん |
年齢 |
20歳 |
30歳 |
血液型 |
A型 |
B型 |
誕生日 |
4/23 |
2/9 |
<table border=1 width=250>
<tr><td></td><td>Aさん</td><td>Bさん</td></tr>
<tr><td>年齢</td><td>20歳</td><td>30歳</td></tr>
<tr><td>血液型</td><td>A型</td><td>B型</td></tr>
<tr><td>誕生日</td><td>4/23</td><td>2/9</td></tr>
</table> |
まず<table>と</table>で囲んだところがテーブルになります。
基本は<tr>と</tr>で囲んだところが横一行になり、
<td>と</td>で囲んだところが1マス(セル)になります。
・テーブルの枠線、大きさ、色、画像
実際使う時は必要なものだけ書いてください。
<table border=?
bordercolor=*** width=??? height=??? bgcolor=***
background="*****.jpg"> |
border=?は枠線の太さです。これを「0」にすれば枠線なしになります。
bordercolor=***は枠線の色です。***は色名を書きます。
width=???はテーブルの横幅、height=???は高さです。
bgcolor=***はテーブルの背景の色です。
background=*****.jpgを書けば背景に画像を貼り付けることができます。
・横一列に色をつける。
下のように<tr>の中にbgcolor=***を書くと横一列に色をつけることができます。
***は色名を書きます。
・1マスに色をつける。
下のように<td>の中にbgcolor=***を書くと1マスに色をつけることができます。
|
Aさん |
Bさん |
年齢 |
20歳 |
30歳 |
血液型 |
A型 |
B型 |
誕生日 |
4/23 |
2/9 |
・マスとマスの間隔を変える。
下のように<table>の中に書きます。?は間隔の大きさです。
一番上にあるテーブルと比較してみてください。→
|
Aさん |
Bさん |
年齢 |
20歳 |
30歳 |
血液型 |
A型 |
B型 |
誕生日 |
4/23 |
2/9 |
・1マス内に余白をつくる。
下のように<table>の中に書きます。?は余白の大きさです。
これも一番上にあるテーブルと比較してみてください。→
・マスの大きさを変える。
下のように<td>の中に書きます。widthは幅、heightは高さです。
・複数行にまたがるマスをつくる。
<table
border=1 width=180>
<tr><td></td><td></td><td>Aさん</td><td>Bさん</td></tr>
<tr><td rowspan=2>視力</td><td>右</td><td>1.5</td><td>0.3</td></tr>
<tr><td>左</td><td>1.0</td><td>0.1</td></tr>
<tr><td colspan=2>体重</td><td>60kg</td><td>63kg</td></tr>
</table> |
|
|
Aさん |
Bさん |
視力 |
右 |
1.5 |
0.3 |
左 |
1.0 |
0.1 |
体重 |
60kg |
63kg |
rowspan=?は縦方向にまたがるマスで、colspan=?は横方向にまたがるマスです。
?は何マスにまたがるかを書きます。
|