ywork2020.com

Title

HTMLで表を作成する

目次 (INDEX)

table要素の概要

table要素はWebページに表を作成するための要素です。

HTMLやデータベースなどでは表のことをテーブルといいます。
そして、表の列のことをカラムといい、発音ではカラムン、もしくはコルムンと聞こえます。
また、行のことをロゥといいます。

目次に戻る

シンプルな表の実機サンプルとサンプルコード

table要素内にtbody要素を記述し、tbody要素内にtr要素を記述し、更にtr要素内にtd要素を配置してtd要素内に任意のデータを記述する ものが、一番シンプルな表の構成になります。
一見ややこしく感じられますが要素の意味さえ理解してしまえば、そう難しくはありません。
それでは各要素の意味を簡単なリストとして紹介しておきますので、サンプルコードと見比べてみて下さい。

  • table要素 = 表の土台となる要素です。
  • tbody要素 = 表の内容を表しています。
  • tr要素 = 表の行を表します。(テーブルロゥ)
  • td要素 = 表のデータ部分を表します。(テーブルデータ)
チーム名得点
チーム名得点
チーム名得点
 
<body>
	<table>
		<tbody>
			<tr><td>チーム名</td><td>得点</td></tr>
			<tr><td>チーム名</td><td>得点</td></tr>
			<tr><td>チーム名</td><td>得点</td></tr>
		</tbody>
	</table>
</body>

目次に戻る

キャプションを付けた表の実機サンプルとサンプルコード

caption要素は表の題名を表示するための要素です。

table要素の中で任意のテキストを記述できる場所は限られており、caption要素内とth要素内とtd要素内と決められています。 実際には少々の記述ミスはブラウザの調整処理によって回避されて表示はされるものの、マークアップとしては上記のことが基本になります。

尚、caption要素内にh要素などを用いることは可能です。

チーム対抗戦
チーム名得点
チーム名得点
チーム名得点
 
<body>
	<table>
		<caption style="font-size: 200%;">チーム対抗戦</caption>
		<tbody>
			<tr><td>チーム名</td><td>得点</td></tr>
			<tr><td>チーム名</td><td>得点</td></tr>
			<tr><td>チーム名</td><td>得点</td></tr>
		</tbody>
	</table>
</body>

目次に戻る

表に見出しを付けた実機サンプルとサンプルコード

表の列のことをカラムといいます。(コルムの方が発音としては近いかもしれません。)
表の先頭行には見出しを表示することは容易に想像できると思います。
つまり、その列のデータが何のデータなのかを明確にする為に列の題名を表示するということです。

ここでは前項までで、紹介していない要素が2つ登場します。
それはthead要素とth要素です。

  • thead要素=表のヘッドを定義する要素です。(テーブルヘッド)
  • th要素=表のヘッダーを表します。これが見出しの部分です。(テーブルヘッダー)

尚、このサンプルにはtfoot要素も入れて記載しておきますが、この記事を書いている時点では、それほど重要なマークアップではないと感じます。

見出し1(カラム名1)見出し2(カラム名2)見出し3(カラム名3)
データ1データ2データ3
データ4データ5データ6
データ7データ8データ9
データ参照元:YWORK
 
<body>              
	<table>
		<thead>
			<tr>
				<th>見出し1</th><th>見出し2</th><th>見出し3</th>
			</tr>
		</thead>
		<tbody>
			<tr><td>データ1</td><td>データ2</td><td>データ3</td></tr>
			<tr><td>データ4</td><td>データ5</td><td>データ6</td></tr>
			<tr><td>データ7</td><td>データ8</td><td>データ9</td></tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3">参照元:<cite><a href="URLアドレス">YWORK</a></cite></td>
			</tr>
		</tfoot>
	</table>
</body>

目次に戻る

表の行や列をグループにした実機サンプルとサンプルコード

前項でも利用していますが、th要素とtd要素の属性を使って、表の行、又は列をグループ化して利用できます。
実際の表示は実機サンプルで確認してみて下さい。
使用する属性は以下の2つです。

  • rowspan="指定した数字で行をグループ化します。"(ロゥスパン)
  • colspan="指定した数字で列をグループ化します。"(コルスパン)
見出し1見出し2見出し3
データ1データ2データ3
データ4データ6
データ7データ8データ9
2020年1月1日現在 
<body>
	<table>
		<tbody>
			<tr><th>見出し1</th><th>見出し2</th><th>見出し3</th></tr>
			<tr><td>データ1</td><td rowspan="2">データ2<td>データ3</td></tr>
			<tr><td>データ4</td><td>データ6</td></tr>
			<tr><td>データ7</td><td>データ8</td><td>データ9</td></tr>
			<tr><td colspan="3">2020年1月1日現在</td></tr>
		</tbody>
	</table>
</body>

目次に戻る

使用できる属性

目次に戻る

備考: ボーダーラインを表示する

<table>を使用する時に初期設定では線が表示されません。
これを解決するCSSとstyle属性の設定をサンプルコードで紹介します。

サンプルテーブルA
(スタイル未設定)
サンプルサンプル
サンプルサンプル
サンプルサンプル

サンプルテーブルB
(CSSファイルで設定)
サンプルサンプル
サンプルサンプル
サンプルサンプル

サンプルテーブルC
(style属性で設定)
サンプルサンプル
サンプルサンプル
サンプルサンプル
<style>
	#idTableA,#idTableA th,#idTableA td{
		table-layout: fixed;	/*表見出しの幅に合わせて表全体の幅が調整される(推奨)*/
		border:1px;
		border-color: ##blue;
		border-style: solid;
		border-collapse: collapse;
	}
</style>
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<title>タイトル</title>
		<style>
			...
		</style>
	</head>
	<body>
		サンプルテーブルA<br>(スタイル未設定)
		<table>
			<tr><th>サンプル</th><th>サンプル</th></tr>
			<tr><td>サンプル</td><td>サンプル</td></tr>
			<tr><td>サンプル</td><td>サンプル</td></tr>
		</table>
	
		サンプルテーブルB<br>(CSS設定)
		<table id="idTableA">
			<tr><th>サンプル</th><th>サンプル</th></tr>
			<tr><td>サンプル</td><td>サンプル</td></tr>
			<tr><td>サンプル</td><td>サンプル</td></tr>
		</table>
	
		サンプルテーブルC<br>(style属性設定)
		<table style="table-layout: fixed;border-collapse: collapse;">
			<tr><th style="border:1px; border-color: ##red; border-style: solid; border-collapse: collapse;">サンプル</th><th style="border:1px; border-color: ##red; border-style: solid; border-collapse: collapse;">サンプル</th></tr>
			<tr><td style="border:1px; border-color: ##red; border-style: solid; border-collapse: collapse;">サンプル</td><td style="border:1px; border-color: ##red; border-style: solid; border-collapse: collapse;">サンプル</td></tr>
			<tr><td style="border:1px; border-color: ##red; border-style: solid; border-collapse: collapse;">サンプル</td><td style="border:1px; border-color: ##red; border-style: solid; border-collapse: collapse;">サンプル</td></tr>
		</table>
	</body>
</html>

サンプルコードを見るとテーブルCのスタイル設定が相当な混雑ぶりです。 このことから言えるのは基本的なスタイルはCSSで設定して、個々の要素の細かな部分 をstyle属性で補正するのが効率が良いのではないかと感じます。 プログラミングにおいて、どれが正解とか不正解とかはありません。

CSSとstyleの設定はページの読込みが後になる方が優先されます。 つまり、同じプロパティの設定は後に書いたコードで上書きされるということです。

目次に戻る