HTMLを使ってみよう2(tableで表を作る)
HTMLを受かってみようシリーズ第2弾は表を作ってみようとなります。以下のようにHPやブログ上でも書くことができます。
番号 | 名前 | 性別 |
---|---|---|
1 | 青木 | 男 |
2 | 赤井 | 男 |
3 | 飯田 | 女 |
4 | 上田 | 女 |
5 | 岡崎 | 男 |
これは実際にどうかいているのかというと
とかきました。
それぞれの意味について解説していきます。
<table border="1">...これは表の形やグラフィックを決めるものです。<table>だけでもできます。1は枠の大きさになり、大きいほど太くなります。その終わりを</table>で括ります。
<tr>...これは行を表します。その行の終わりを</tr>で括ります。
<th>...これは見出しマスになります。そのマスの終わりを</th>で括ります。
<td>...これは<th>に似ていますが、データマスになります。そのマスの終わりを</td>で括ります。
具体的にほかのものも作っていきましょう
まず、<table border="1">の部分を<table>に変えてみました
番号 | 名前 | 性別 |
---|---|---|
1 | 青木 | 男 |
2 | 赤井 | 男 |
3 | 飯田 | 女 |
4 | 上田 | 女 |
5 | 岡崎 | 男 |
枠がなくなりますね
次に<table border="1">の部分を<table border="10">に変えてみました
番号 | 名前 | 性別 |
---|---|---|
1 | 青木 | 男 |
2 | 赤井 | 男 |
3 | 飯田 | 女 |
4 | 上田 | 女 |
5 | 岡崎 | 男 |
先述した通りですが太くなります。
このようにいろいろ工夫して作れるのでぜひ皆さんも試してみましょう(^^)