HTML入門⑧表を作る

2017年7月21日HTMLHTML入門

表はよく使う

表はこのようなものです。

 

あなたの使っているブラウザは?

GoogleChrome InternetExplorer Firefox
男性 35人 28人 19人
女性 26人 43人 21人

アンケート結果は捏造しましたすみません…

表はさまざまな場面で使いますよね。データの表示や旅行プランの値段表、料理のレシピを表示させることもできますね。

HTMLの世界では表のことを「テーブル」と呼びます。テーブルの表示には<table>タグを使います。

このコードをブラウザで確認すると、以下のような表になっているかと思います。

各部の説明

<table></table>で囲んだ部分が表になります。この中に縦列や横列の内容を記述していきます。
<tr></tr>は行を意味します。この中に横一列のデータを記述します。
<td></td>で囲まれたデータが横に並ぶ個々のデータになります。データが含まれる1マス1マスを「セル」と呼びます。

例の場合、

一行目に「(空白)」と「GoogleChrome」と「InternetExplorer」と「Firefox」というデータを並べ、

二行目に「男性」と「35人」と「28人」と「19人」を並べ、

三行目に「女性」と「26人」と「43人」と「21人」を並べています。

セルの結合

セルを結合することも可能です。

縦のセルを結合するにはrowspan=””
横のセルを結合するにはcolspan=””という属性を追加します。

 

””の中に結合したい数を記述します。そうすると縦と横それぞれの方向に指定した数だけ結合され、ひとつのセルとして表示されます。