HTMLで表を作成

HTMLの中に表を挿入するスキルは、MySQLとPHPを組み合わせてWebページを構成するときに必要となります。

代表的なタグ

#~の部分が表であることを示す
<table> ~ </table>

#見出し用のセルを指定する
<th> ~ </th>

#表の中の一つの行を指定する
<tr> ~ </tr>

#行の中の一つのセルを指定する
<td>~</tr>



$ vim table.html

#########ここから########


<html>

</head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Table Test</title>

<body>

<!-- 線の幅を1としたtableを作成-->
<table border=1>

<!-- 見出しの行のセルを指定する-->
<tr>
<th>名前</th>
<th>年齢</th>
</tr>

<!-- データを入力-->
<!-- 1行目 -->
<tr>
<td>Tom</td>
<td>24</td>
</tr>

<!-- データを入力-->
<!-- 2行目 -->
<tr>
<td>Jhon</td>
<td>29</td>
</tr>

<!-- データを入力-->
<!-- 3行目 -->
<tr>
<td>Anna</td>
<td>25</td>
</tr>

</table>


</body>
</html>



#########ここまで########


$ open table.html



【参考文献】
佐藤和人&できるシリーズ編集部 2011 『できるホームページ HTML&CSS入門』 インプレスジャパン 166 -181pp