HTML入門⑧表を作る
表はよく使う
表はこのようなものです。
あなたの使っているブラウザは？
| GoogleChrome | InternetExplorer | Firefox | |
| 男性 | 35人 | 28人 | 19人 |
| 女性 | 26人 | 43人 | 21人 |
アンケート結果は捏造しましたすみません…
表はさまざまな場面で使いますよね。データの表示や旅行プランの値段表、料理のレシピを表示させることもできますね。
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 |
<body> <table border="1"> <tr> <td></td> <td>GoogleChrome</td> <td>InternetExplorer</td> <td>Firefox</td> </tr> <tr> <td>男性</td> <td>35人</td> <td>28人</td> <td>19人</td> </tr> <tr> <td>女性</td> <td>26人</td> <td>43人</td> <td>21人</td> </tr> </table> </body> |
このコードをブラウザで確認すると、以下のような表になっているかと思います。
各部の説明
<table></table>で囲んだ部分が表になります。この中に縦列や横列の内容を記述していきます。
<tr></tr>は行を意味します。この中に横一列のデータを記述します。
<td></td>で囲まれたデータが横に並ぶ個々のデータになります。データが含まれる１マス１マスを「セル」と呼びます。
例の場合、
一行目に「（空白）」と「GoogleChrome」と「InternetExplorer」と「Firefox」というデータを並べ、
二行目に「男性」と「35人」と「28人」と「19人」を並べ、
三行目に「女性」と「26人」と「43人」と「21人」を並べています。
セルの結合
セルを結合することも可能です。
縦のセルを結合するにはrowspan=””
横のセルを結合するにはcolspan=””という属性を追加します。
|
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 |
<body> <table border="1"> <tr> <td>コース</td> <td>料金</td> <td>実習場所</td> </tr> <tr> <td>初心者コース</td> <td>3000円</td> <td rowspan="2">北グラウンド</td> </tr> <tr> <td>中級者コース</td> <td>5000円</td> </tr> <tr> <td>上級者コース</td> <td colspan="2">近日発表</td> </tr> </table> </body> |
””の中に結合したい数を記述します。そうすると縦と横それぞれの方向に指定した数だけ結合され、ひとつのセルとして表示されます。
