検索

キーワード


【HTML】table要素について

  • 公開日:2020-09-24 20:35:46
  • 最終更新日:2020-11-17 17:22:36
【HTML】table要素について

こんにちは。駆け出しエンジニアの竹前です。

ここでは、HTMLのtable要素を使った表作成について説明します。

HTMLについて勉強している方の参考になれば幸いです。


tableとは

table要素は、テーブルを作成する際に使用します。

テーブルとは、行(横方向)と列(縦方向)からできる表のことです。


テーブルの構造

テーブルは、以下の要素で構成されます。

  • table要素:テーブルを作成するための要素です。
  • caption要素:表にタイトルを付けるための要素です。
  • tr要素:行を定義するための要素です。
  • th要素:テーブルの見出しを定義するための要素です。
  • td要素:テーブルのセルを定義するための要素です。

これらの要素で表を作成すると、以下のようになります。

<table>
	<caption>サンプル</caption>
	<tr>
		<th>見出し1</th>
		<th>見出し2</th>
		<th>見出し3</th>
	</tr>
	<tr>
		<td>データ1</td>
		<td>データ2</td>
		<td>データ3</td>
	</tr>
	<tr>
		<td>データ4</td>
		<td>データ5</td>
		<td>データ6</td>
	</tr>
</table>


テーブルの作成例


テーブル作成に使われる属性

テーブルに外枠を入れる

table要素は、デフォルトの状態ではテーブルに外枠が入りません。

HTMLだけでテーブルに外枠を入れるには、table要素にborder属性を指定します。

border属性の値は、0と1のみであり、0だと外枠なし、1だと外枠が入ります。

<table border="0">
	<caption>サンプル</caption>
	<tr>
		<th>見出し1</th>
		<th>見出し2</th>
		<th>見出し3</th>
	</tr>
	<tr>
		<td>データ1</td>
		<td>データ2</td>
		<td>データ3</td>
	</tr>
	<tr>
		<td>データ4</td>
		<td>データ5</td>
		<td>データ6</td>
	</tr>
</table>
<br>
<table border="1">
	<caption>サンプル</caption>
	<tr>
		<th>見出し1</th>
		<th>見出し2</th>
		<th>見出し3</th>
	</tr>
	<tr>
		<td>データ1</td>
		<td>データ2</td>
		<td>データ3</td>
	</tr>
	<tr>
		<td>データ4</td>
		<td>データ5</td>
		<td>データ6</td>
	</tr>
</table>


外枠を入れたテーブルの作成例


テーブルのセルを結合する

テーブルのセルを横方向に結合するには、td要素にcolspan属性を指定します。

colspan属性の値に、結合したいセルの数を設定します。

セルの結合は、colspan属性を指定したセルと、行の右方向のセルで行われます。

<table border="1">
	<caption>サンプル</caption>
	<tr>
		<th>見出し1</th>
		<th>見出し2</th>
		<th>見出し3</th>
	</tr>
	<tr>
		<td>データ1</td>
		<td colspan="2">データ2</td>
	</tr>
	<tr>
		<td>データ3</td>
		<td>データ4</td>
		<td>データ5</td>
	</tr>
</table>


横方向にセルを結合したテーブルの作成例


また、セルを縦方向に結合するには、td要素にrowspan属性を指定します。

セルの結合は、rowspan属性を指定したセルと、列の下方向のセルで行われます。

<table border="1">
	<caption>サンプル</caption>
	<tr>
		<th>見出し1</th>
		<th>見出し2</th>
	</tr>
	<tr>
		<td>データ1</td>
		<td rowspan="2">データ2</td>
	</tr>
	<tr>
		<td>データ3</td>
	</tr>
	<tr>
		<td>データ4</td>
		<td>データ5</td>
	</tr>
</table>


縦方向にセルを結合したテーブルの作成例


colspan属性とrowspan属性は同時に指定することも可能です。

<table border="1">
	<caption>サンプル</caption>
	<tr>
		<th>見出し1</th>
		<th>見出し2</th>
		<th>見出し3</th>
	</tr>
	<tr>
		<td>データ1</td>
		<td colspan="2" rowspan="2">データ2</td>
	</tr>
	<tr>
		<td>データ3</td>
	</tr>
	<tr>
		<td>データ4</td>
		<td>データ5</td>
		<td>データ6</td>
	</tr>
</table>


colspan属性とrowspan属性を同時に指定したリストの作成例


【著者】

たけまえ

駆け出しエンジニアの竹前です。 私自身が勉強したことをもとに、難しい内容はできるだけ簡単になるように読みやすく、分かりやすい記事を心がけています。

よく読まれている記事
【HTML/CSS】divタグの使い方

【HTML/CSS】divタグの使い方

こんにちは。駆け出しプログラマーの松下です!HTMLで頻繁に見かけるdivタグとはどんなものかを紹介します。HTMLを学び始めたばかりという方の参考になれば幸いです!divとはdivタグはそれ自身は特に意味を持っていませんが、構造上必要なひとかたまりを示します。例えば、下記のように文字の色を赤にしたいときに、CSSでとを別々に赤色と指定するのは面倒です。HTMLファイル赤い果物 りんご CSS

【HTML】リンクタグについて

【HTML】リンクタグについて

こんにちは。駆け出しエンジニアの竹前です。ここでは、HTMLのリンクタグについて説明します。HTMLについて勉強している方の参考になれば幸いです。リンクタグとはリンクタグとは、HTMLの閲覧中のページから、別のページに遷移させるときに使うタグ(~タグ)のことをいいます。このタグを使うことによって、文字列や画像にリンクを設定することができます。タグとタグの違いHTMLにはタグというものがあります。タ

【HTML/CSS】リストについて

【HTML/CSS】リストについて

こんにちは。駆け出しプログラマーの松下です!リストを作成するol、ulタグを紹介します。HTMLを学び始めたばかりという方の参考になれば幸いです!リストをつくるHTMLで箇条書きを行うには ol、ul、liタグを使用します。このタグによりただの言葉のあつまりでなく、ひとつのまとまりをもったリストであるということをコンピューターに伝えることができます。ol、ulタグでリストを作成し、その項目にliタ