HTMLにテーブルを作成してデザインする方法

2014/04/20

ページのレイアウトにはCSSを使うのが一般的ですので、昔のようにテーブルタグを使ってページのレイアウトをする事はありません。
しかし、会社概要など「表」をページに設置したい時は、CSSを使うよりもテーブルタグを使ったほうが楽です。
テーブル作成のサンプルページを用意しましたので、記事の内容と一緒にご覧ください。

テーブルタグの構成

テーブルタグは以下の4つのタグで構成されます。それぞれのタグの役割を覚えてください。

<table>

テーブルそのものを表すタグです。<table>〜</table>までが表の中身になります。

<tr>

テーブルの行を表すタグです。<tr>〜</tr>までが表の1行です。

<th>

テーブル見出しセルを表すタグです。<th>〜</th>までがひとつの見出しセルになります。セルは表のマス目にあたります。見出しセル内の文字は、標準で太字になります。

<td>

テーブルセルを表すタグです。<td>〜</td>までがひとつのセルになります。セルは<th>と<td>の2種類があります。

テーブルタグの役割や全体をイメージする時には、エクセルなどの表計算ソフトをイメージしてもらうと分かりやすいと思います。

テーブルを設置してみましょう

それでは見出しセルと通常のセルの2行を持つ、簡単なテーブルを設置してCSSで見た目を整えてみましょう。

テーブルを表示したい場所に、以下のソースコードを追加してください。

<table class="sample-table">
	<tr>
		<th>見出しセル1</th>
		<th>見出しセル2</th>
		<th>見出しセル3</th>
		<th>見出しセル4</th>
		<th>見出しセル5</th>
	</tr>
	<tr>
		<td>項目セル1</td>
		<td>項目セル2</td>
		<td>項目セル3</td>
		<td>項目セル4</td>
		<td>項目セル5</td>
	</tr>
</table>

スタイルシートに以下のコードを追加してください。

#main .sample-table{
	border-collapse:collapse;
	border:1px solid #D6D6D6;
	margin:20px 0 0 0;
}
#main .sample-table th{
	border:1px solid #D6D6D6;
	padding:5px;
	background:#036caf;
	color:#FFFFFF;
}
#main .sample-table td{
	border:1px solid #D6D6D6;
	padding:5px;
}

テーブルのセルを結合してみよう

テーブルのセルは、縦方向横方向のどちらのセルとも結合させる事ができます。
横方向にセルを結合する時には「colspan」というオプションを使い、縦方向にセルを結合する時には「rowspan」というオプションを使います。

<!--横方向に2つのセルを結合する場合-->
<td colspan="2">セル</td>

<!--横方向に3つのセルを結合する場合-->
<td colspan="3">セル</td>

<!--縦方向に2つのセルを結合する場合-->
<td rowspan="2">セル</td>

<!--縦方向に3つのセルを結合する場合-->
<td rowspan="3">セル</td>

それでは実際にセルを結合してみましょう。
以下のソースコードをHTMLファイルに追加してください。CSSを修正する必要はありません。

<table class="sample-table">
	<tr>
		<td colspan="3">横結合セル1</td>
		<td>項目セル4</td>
		<td>項目セル5</td>
	</tr>
	<tr>
		<td rowspan="2">縦結合セル1</td>
		<td>項目セル2</td>
		<td>項目セル3</td>
		<td>項目セル4</td>
		<td>項目セル5</td>
	</tr>
	<tr>
		<td>項目セル2</td>
		<td>項目セル3</td>
		<td>項目セル4</td>
		<td>項目セル5</td>
	</tr>
</table>

テーブルのセルを結合する時にひとつだけ注意点があり、結合先のセルのタグを記述する必要はありません。
横方向に2つのセルを結合する場合、colspanオプションを書く最初のセルのタグは必要ですが、二つ目のセルのタグを書く必要はありません。

サンプルページのソースコードを確認してみてください。