テーブル
テーブルとは簡単に言うと表のことです。
コツをつかめば簡単なのでぜひ実際に作ってみてください。
枠線を表示しないでレイアウトに使うことも多いです。(参照:[レイアウト>>テーブルを使ったレイアウト])
下の作成例を見てください。
<table>と</table>で囲んだところがテーブルになります。
<tr>と</tr>で囲んだところが横一行になり、
<td>と</td>で囲んだところが1マスになります。
この1マスをセルといいます。
※下の例では分かりやすいように色をつけてます。
テーブルの作り方
<table><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>
| Aさん | Bさん | |
| 年齢 | 20歳 | 30歳 |
| 血液型 | A型 | B型 |
| 誕生日 | 4/23 | 2/9 |
これからはテーブルに関する設定についてです。
テーブルの枠線・大きさ・背景色・画像
<table border="2px" bordercolor="blue" width="100px" height="200px" bgcolor="red" background="abc.jpg">※実際作る時は必要なものだけ書いてください。
border:枠線の太さ。これを「0」にすれば枠線なしになります。
bordercolor:枠線の色
width:テーブルの横幅
height:テーブルの高さ
bgcolor:背景色
background:背景画像
横一行の背景を指定
<tr bgcolor="blue">(色)<tr background="abc.jpg">(画像)
セルの背景を指定
<td bgcolor="blue">(色)<td background="abc.jpg">(画像)
セルを結合する
<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>
rowspan:縦方向に結合するセルの数
colspan:横方向に結合するセルの数
| Aさん | Bさん | ||
| 視力 | 右 | 1.5 | 0.3 |
| 左 | 1.0 | 0.1 | |
| 体重 | 60kg | 63kg | |

