Javaマスターへの道 HTML編 Part9
今回やるのは、HTMLでの表である<table>要素です。
以下今回やるプログラムです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>hello world</title> </head> <body> <table> <thead> <tr> <th>No.</th> <th>名前</th> <th>職業</th> <th>得意言語</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>山田 花子さん</td> <td>ITエンジニア</td> <td>Ruby</td> </tr> <tr> <td>2</td> <td>滝川 雄平さん</td> <td>システムエンジニア</td> <td>Python</td> </tr> <tr> <td>3</td> <td>大空 つばめさん</td> <td>高校生</td> <td>BASIC</td> </tr> </tbody> </table> </body> </html> |
このプログラムを実行すると簡単な表ができると思います。
ではそれぞれの要素を解説していこうと思います。
<table>タグは表形式のデータ出力が出来るタグで、この中に様々なタグを書いていきます。
<table>タグは<thead>タグと<tbody>タグの２つからできていて、
<thead>はテーブルのIDや名前など見出しを指定する欄です。
<tbody>はテーブルの中身を指定する欄です。
<tr>は一行を表しているので、Noから得意言語までを一行で表示します。
<th>はtableHeaderの略で見出しを表しています。
つまり<thead>は見出しで<tbody>は格納するデータを表しています。
<tbody>内の<td>はtableDataの略で中身ですね。
上のプログラムでは４つのデータを一行で表示するようにしていますが
もし５つのデータを一行に書くと表の中からはみだして表示されるので
<thead>で指定した数と<tbody>で指定する数は必ず一致させるようにしましょう。
今日はここまでですが、HTMLの中でもよく使うものなので覚えていて損はないですよ。