本記事では、HTMLで表を作成する方法について説明します。また、本記事では以下のサンプルコードをもとに解説していきます。
サンプル
コード
タイトル:table.html
<table border="1"> <!--枠線あり--> <caption>タイトル</caption> <tr> <th>1行目1列目</th> <th>1行目2列目</th> <th>1行目3列目</th> </tr> <tr> <td>2行目1列目</td> <td>2行目2列目</td> <td>2行目3列目</td> </tr> <tr> <td>3行目1列目</td> <td>3行目2列目</td> <td>3行目3列目</td> </tr> </table>
WEB画面
tableタグ
表を作成するためのタグです。tableタグのborder属性は1にすると枠線が表示され、0にすると枠線が非表示になります。
captionタグ
表のタイトルを設定するタグです。
trタグ
trタグは表の1行を定義するためのタグです。
thタグ
thタグはテーブルヘッダーの略で表の見出しを作成するタグです。thタグで指定した文字列は中央に配置されます。
tdタグ
tdはテーブルデータの略で、表の中にデータを配置するためのタグです。
まとめ
今回は簡単な表の作成方法について解説しました。
- tableタグは表を作成するためのタグ
- trタグは表の1行を定義するためのタグ
- thタグは表の見出しを作成するタグ
- tdは表の中にデータを配置するためのタグ
tableタグを用いた表作成は様々なオプションを加えることでさらに拡張が可能なのでのちに解説していきます。