Javaマスターへの道 HTML編 Part9
今回やるのは、HTMLでの表である<table>要素です。
以下今回やるプログラムです。
<!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の中でもよく使うものなので覚えていて損はないですよ。