HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

応用45. table要素-表を作成する

      2017/12/19   hatano

HTMLで表を作成する

table要素、tr要素(table row)、td要素(table data cell)の組み合わせでExcelの表のようなものを作成できます。
tableタグ内にtrタグで「行」を構成し、td要素で「セル」を構成します。
table関連の要素のdisplayプロパティの初期値は特殊なので次の章でまとめて解説します。


<table>
	<tr>
		<td>セル</td>
		<td>セル</td>
		<td>セル</td>
	</tr>
	<tr>
		<td>セル</td>
		<td>セル</td>
		<td>セル</td>
	</tr>
	<tr>
		<td>セル</td>
		<td>セル</td>
		<td>セル</td>
	</tr>
</table>


table, td{
	border: 1px solid #333;
}

tableの基本構造

tableの注意点

各行のセル数は、同じ数で構成する必要があります。
1行目は2つのtd、2行目は3つのtdという組み合わせはできません。セル数が合わないと、表示が崩れます。
ただし後述する「セルの結合」を使うことで数を合わせることはできます。


<!-- 1行目は2つのtd、2行目は3つのtd -->
<!-- セルの数が違うのでtableの表示がくずれます -->
<table>
	<tr>
		<td>セル</td>
		<td>セル</td>
	</tr>
	<tr>
		<td>セル</td>
		<td>セル</td>
		<td>セル</td>
	</tr>
</table>


table, td{
	border: 1px solid #333;
}

tableの崩れ

セルの結合

colspan属性を使うとセルの結合ができます。
colspan属性の値は、結合するセルの数を記述します。
先程の表示の崩れたtableを正しく表示させた場合は下記の通りです。
行内のtdの数が合えば、どの場所のtdでも結合することができます。


<!-- 1つ目のtdと2つ目のtdを結合 -->
<table>
	<tr>
		<td colspan="2">セル</td>
		<td>セル</td>
	</tr>
	<tr>
		<td>セル</td>
		<td>セル</td>
		<td>セル</td>
	</tr>
</table>


table, td{
	border: 1px solid #333;
}

セルの結合


<!-- 2つ目のtdと3つ目のtdを結合 -->
<table>
  <tr>
    <td>セル</td>
    <td colspan="2">セル</td>
  </tr>
  <tr>
    <td>セル</td>
    <td>セル</td>
    <td>セル</td>
  </tr>
</table>


table, td{
  border: 1px solid #333;
}

セルの結合

行の結合

rowspan属性を使うと行の結合ができます。
注意点として、rowspan属性使った行より後の行から結合した数のtdを減らすことです。
セルの結合に比べて構造が複雑になり、分かりづらいので手書きで表を書いてイメージすると良いでしょう。


<!-- 1行目と2行目の1つ目のtdを結合 -->
<table>
	<tr>
		<td rowspan="2">セル</td>
		<td>セル</td>
		<td>セル</td>
	</tr>
	<tr>
		<td>セル</td>
		<td>セル</td>
	</tr>
</table>


table, td{
	border: 1px solid #333;
}

行の結合


<!-- 1行目と2行目と3行目の3つ目のtdを結合 -->
<table>
	<tr>
		<td>セル</td>
		<td>セル</td>
		<td rowspan="3">セル</td>
	</tr>
	<tr>
		<td>セル</td>
		<td>セル</td>
	</tr>
	<tr>
		<td>セル</td>
		<td>セル</td>
	</tr>
</table>


table, td{
	border: 1px solid #333;
}

行の結合

th要素-見出しセル

td要素をth要素(table header cell)に変えると「見出しセル」に変更できます。CSSで調整しない場合、テキストが太字、中央ぞろえになります。


<table>
	<tr>
		<th>見出しセル</th>
		<td>セル</td>
		<td>セル</td>
	</tr>
	<tr>
		<th>見出しセル</th>
		<td>セル</td>
		<td>セル</td>
	</tr>
</table>


table, td, th{
	border: 1px solid #333;
}

見出しセル

tableの入れ子

tableタグの第1子要素はtrタグです。
trタグの第1子要素は、tdタグまたはthタグになります。

ただし、tdタグまたはthタグ内に他のタグを含めることはできます。
下記のような入れ子は、構文的に誤りです。


<!-- trタグの第一子要素がdivタグ -->
<table>
	<div>
		<tr>
			<td>セル</td>
			<td>セル</td>
		</tr>
	</div>
</table>

SEOでみたtableの注意点

tableは、簡単にレイアウト構造が作れるため、HTML4.01の時代では、レイアウトをtableで作っていた時代がありました。
現在では、tableでレイアウトを作ることは推奨されていません。
googleなどの検索サイトも、tableは「表」として定義するものであって「レイアウト」を作ることを推奨していません。
tableは年表、スペック表など「表」となるものだけを定義するようにしましょう。

まとめ

  • tabel要素、tr要素、td要素で表を作成できる。
  • table → tr → td(th)という入れ子構造にする。
  • tr要素は「行」。td要素は「セル」。
  • 各行のセルは、同じ数で構成する必要がある。
  • 行とセルは、結合できる。
  • th要素を使うと「見出しセル」になる。
  • tableは「レイアウト」に使用せず、「表」を定義するもの。