format_list_bulleted
【HTML】簡単な表(テーブル)を表示する方法について解説
最終更新日時:2022-09-26 13:36:43



本記事では、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タグ

表を作成するためのタグです。tableタグのborder属性は1にすると枠線が表示され、0にすると枠線が非表示になります。

captionタグ

表のタイトルを設定するタグです。

trタグ

trタグは表の1行を定義するためのタグです。

thタグ

thタグはテーブルヘッダーの略で表の見出しを作成するタグです。thタグで指定した文字列は中央に配置されます。

tdタグ

tdはテーブルデータの略で、表の中にデータを配置するためのタグです。

まとめ

今回は簡単な表の作成方法について解説しました。

  • tableタグは表を作成するためのタグ
  • trタグは表の1行を定義するためのタグ
  • thタグは表の見出しを作成するタグ
  • tdは表の中にデータを配置するためのタグ

tableタグを用いた表作成は様々なオプションを加えることでさらに拡張が可能なのでのちに解説していきます。