HTML制作には欠かすことのできない要素が、テーブルです。単なる表組だけでなく、レイアウトに用いたり、その応用は大変奥深いものがあります。この節では、テーブルに関する様々な設定を取り上げています。

• テーブルの幅の設定
• テーブルの枠線の設定
• データセルの余白の設定
• データセルの幅の設定
• データセルの高さの設定
• データセル（列）のグループ化
• データセル（行）のグループ化
• データセルの連結
• テーブルのアクセシビリティ

■ テーブルの幅の設定

テーブルの横幅を設定する単位には、ピクセル単位とパーセント単位があります。ピクセル単位は、ブラウザ画面のピクセル数で、パーセントはブラウザ画面の相対的な比率を設定します。テーブルにおける横幅設定は、ユーザ環境に依存するため、制作側とまったく同じ表示になるとは限りません。

<table width="500">   ピクセル設定
<table width="70%">   パーセント設定

width属性は、その値が数字のみ、あるいはアルファベットのみの場合には、引用符を省略することが可能ですが、％の場合には、必ず引用符で囲まなければなりません。

■ テーブルの枠線の設定

テーブルに枠線を設定する方法は実に様々な手法があります。HTMLでは、border属性、frame属性、rules属性などがあり、それぞれ独自に枠線を表示します。

属性	値	機能
border	ピクセル	表全体、データセルを含めて枠線を表示。デフォルト値は 0
frame	void	枠の表示をしない（デフォルト値）
	above	データセルの上側の枠線のみ表示
	below	データセルの下側の枠線のみ表示
	hside	データセルの上下の枠線のみ表示
	lhs	データセルの左の枠線のみ表示
	rhs	データセルの右の枠線のみ表示
	vside	データセルの左右の枠線のみ表示
	box	データセルの上下左右の枠線を表示
	border	データセルの上下左右の枠線を表示
rules	none	枠の表示をしない（デフォルト値）
	groups	横方向のグループ化した枠線を表示
	rows	横の列の境界の枠線のみ表示
	cols	縦の列の境界の枠線のみ表示
	all	すべての境界の枠線を表示

■ データセルの余白の設定

テーブルのデータセルに余白を設ける属性に、cellpadding属性、cellspacing属性の２つがあります。

cellpadding ---  セル内の余白の設定
cellspacing ---  セル間の余白の設定

両者ともピクセル単位で設定します。なお、スタイルシートで、セル内の余白を設定する方法は、下記の通りです。

td,th { padding: 5px }  （セル内の余白）

■ データセルの幅の設定

データセルの幅を指定する方法は、以下の通りです。

<td width="100">     （非推奨）
td { width: 100px }  （CSS設定：推奨）

１行目で設定したデータセルの幅は、下段のデータセルすべてに適用されます。HTMLでの指定する単位は、ピクセル単位となりますが、CSSの場合は、フォントの大きさを指定する単位と同じです。

■ データセルの高さの設定

データセルの高さを指定する方法は、以下の通りです。

<td height="50">     （非推奨）
td { height: 50px }  （CSS設定：推奨）

最初データセルの高さを指定した場合、その行のデータセルの高さに適用されます。HTMLでの指定する単位は、ピクセル単位となりますが、CSSの場合は、フォントの大きさを指定する単位と同じです。

■ データセル（列）のグループ化

グループ化とは、複数のセルの設定をまとめる場合に便利な要素です。ここでは、データセルの列（縦の列）をまとめて設定する方法を述べます。

要素	属性	機能
colgroup		データセルの縦列に構造的なグループ化を行う
	span	グループ化する縦列の列数を指定
	width	グループ化する縦列の幅を指定する
	align	セル内のデータの位置の指定（left、center、right）
	valign	セル内のデータの垂直位置の指定（top、middle、bottom、baseline）
col		複数の縦列を、colgroup要素内で設定する
	span	グループ化する縦列の列数を指定
	width	グループ化する縦列の幅を指定する
	align	セル内のデータの位置の指定（left、center、right）
	valign	セル内のデータの垂直位置の指定（top、middle、bottom、baseline）

colgroup要素や、col要素の使い方に関しては、基礎講座のテーブルに関するグループ化を参照してください。

■ データセル（行）のグループ化

テーブル内のデータセルの横方向の並び（行）をヘッダ、フッタ、本体という３つの論理的な構造に分け、それぞれをまとめてグループ化します。

• thead要素 --- テーブルのヘッダ
• tfoot要素 --- テーブルのフッタ
• tbody要素 --- テーブルの本体

下記の実際の行のグループ化を設定する HTML文を参照してください。

<table cellpadding="3" cellspacing="0" border="1">
<colgroup span="3" width="100"></colgroup>
<thead>
<tr><th abbr="教科の科目を表わします">科目</th>
    <th abbr="テストの得点を表わします">得点</th>
    <th abbr="テストの平均点を表わします">平均点</th></tr>
</thead>

<tfoot>
<tr><td>合計</td><td>78点</td><td>81点</td></tr>
</tfoot>

<tbody>
<tr><td>国語</td><td>85点</td><td>88点</td></tr>
<tr><td>算数</td><td>62点</td><td>73点</td></tr>
<tr><td>理科</td><td>70点</td><td>75点</td></tr>
<tr><td>英語</td><td>95点</td><td>86点</td></tr>
</tbody>
</table>

それぞれの要素をスタイル化することで、さらに見栄えのよいテーブルが作成できます。

■ データセルの連結

データセルを横方向、あるいは縦方向に複数連結することができます。連結に用いる td要素の属性は以下の２つがあります。

• colspan --- 横方向のデータセルの連結
• rowspan --- 縦方向のデータセルの連結

データセル連結のサンプル

colspan		セル	rowspan
セル	セル	セル
rowspan	セル	セル
	セル	colspan

それぞれの属性の値は、連結するデータセルの数を当てはめます。

■ テーブルのアクセシビリティ

非視覚系ブラウザでは、テーブルの構造を表現するのは難しいと言われております。特に音声ブラウザでは、データセルを左から右へと順に発音します。

どのような環境でも、テーブルの表組全体が正しく伝えるための属性が、HTML4.01で用意されていますので、アクセシビリティを実現するためにも必須の項目となっています。

• table要素の属性 --- summary テーブルに関する説明
• th要素の属性 ---  　  abbr ヘッダセルの短い説明文

なお、これらの属性は、視覚系ブラウザではサポートされていないので無視されます。