表をつくる
表をつくって綺麗にしたいなあって思った。
table
下は、４列３行の表ができる。
<table border="1">
<tr><td>1行目の1列目</td><td>1行目の2列目</td><td>1行目の3列目</td><td>1行目の4列目</td></tr>
<tr><td>2行目の1列目</td><td>2行目の2列目</td><td>2行目の3列目</td><td>2行目の4列目</td></tr>
<tr><td>3行目の1列目</td><td>3行目の2列目</td><td>3行目の3列目</td><td>3行目の4列目</td></tr></table>
| 1行目の1列目 | 1行目の2列目 | 1行目の3列目 | 1行目の4列目 |
|---|---|---|---|
|
2行目の1列目
|
2行目の2列目 | 2行目の3列目 | 2行目の4列目 |
|
3行目の1列目
|
3行目の2列目 | 3行目の3列目 | 3行目の4列 |
<table border="1">は、表の書き始め。
<tr><td>は、列の始まり。
</td><td>は、枠の終わり。
</td></tr>は、行のおわり。
</table>で、表の完成だ。
作りたいだけの列と行をつなげていけばいいだけだよ。
border="0"だと、枠線が消えるよ。
もう少し、かっこよくしたいなあ。
色をつけてみる。
色をつけたりするのは、文字の背景に色をつけるのと同じことだよ。
<table border="1" bgcolor="#ffcc99">
<tr><td>1行目の1列目</td><td>1行目の2列目</td><td>1行目の3列目</td><td>1行目の4列目</td></tr>
<tr><td>2行目の1列目</td><td>2行目の2列目</td><td>2行目の3列目</td><td>2行目の4列目</td></tr>
<tr><td>3行目の1列目</td><td>3行目の2列目</td><td>3行目の3列目</td><td>3行目の4列目</td></tr></table>
| 1行目の1列目 | 1行目の2列目 | 1行目の3列目 | 1行目の4列目 |
|---|---|---|---|
|
2行目の1列目
|
2行目の2列目 | 2行目の3列目 | 2行目の4列目 |
|
3行目の1列目
|
3行目の2列目 | 3行目の3列目 | 3行目の4列目 |
列を結合させて見る。
<table border="1">
<tr><td>1行目の1列目</td><td>1行目の2列目</td><td>1行目の3列目</td><td>1行目の4列目</td></tr>
<tr><td rowspan="2" >2行目の1列目</td><td>2行目の2列目</td><td>2行目の3列目</td><td>2行目の4列目</td></tr>
<tr><td>3行目の2列目</td><td>3行目の3列目</td><td>3行目の4列目</td></tr></table>
1行目の1列目
1行目の2列目
1行目の3列目
1行目の4列目
2行目の1列目
2行目の2列目
2行目の3列目
2行目の4列目
3行目の2列目
3行目の3列目
3行目の4列目
結合させたい列のtdの後ろに rowspan="2" を入れるんだ。2は、二枠結合させるということ。3にすると、3枠結合する。
行を結合させて見る。
<table border="1" bgcolor="#ffcc99">
<tr><td colspan="3" >1行目の1列目</td><td>1行目の2列目</td></tr>
<tr><td>2行目の1列目</td><td>2行目の2列目</td><td>2行目の3列目</td><td>2行目の4列目</td></tr>
<tr><td>3行目の1列目</td><td>3行目の2列目</td><td>3行目の3列目</td><td>3行目の4列目</td></tr></table>
1行目の1列目
1行目の2列目
2行目の1列目
2行目の2列目
2行目の3列目
2行目の4列目
3行目の1列目
3行目の2列目
3行目の3列目
3行目の4列目
結合させたい行の部分のtdの後ろに colspan="3" を入れるんだ。3にしたので、3枠結合する。
その枠だけ色を変えたい
<table border="1" bgcolor="#ffcc99">
<tr><td colspan="3" bgcolor="#ff0000">1行目の1列目</td><td>1行目の2列目</td></tr>
<tr><td>2行目の1列目</td><td>2行目の2列目</td><td>2行目の3列目</td><td>2行目の4列目</td></tr>
<tr><td>3行目の1列目</td><td>3行目の2列目</td><td>3行目の3列目</td><td>3行目の4列目</td></tr></table>
1行目の1列目
1行目の2列目
2行目の1列目
2行目の2列目
2行目の3列目
2行目の4列目
3行目の1列目
3行目の2列目
3行目の3列目
3行目の4列目
td の後ろに bgcolor="#ff0000" と入れてあげれば、その枠だけ色を変えれるよ。
あとは、応用だね。
他にも、
<table border="3">
<tr>
<th>おやつ</th><th>好きなもの</th><th>嫌いな物</th>
</tr>
<tr>
<td rowspan="2">肉類</td><td>豚肉</td><td>骨</td>
</tr>
<tr>
<td>マトン</td><td>魚</td>
</tr>
</table>
<tr><th>おやつ</th><th>好きなもの</th><th>嫌いな物</th>で太字にできるようだ。
おやつ
好きなもの
嫌いな物
肉類
豚肉
骨
マトン
魚
お次は、リンクね。 画像を使ってリンクするのだ
© Rakuten Group, Inc.
