■ テーブル

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

テーブルの幅の設定

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

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

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

テーブルの枠線の設定

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

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

データセルの余白の設定

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

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

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

td,th { padding: 5px }  (セル内の余白)

データセルの幅の設定

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

<td width="100">     (非推奨)
td { width: 100px }  (CSS設定:推奨)

1行目で設定したデータセルの幅は、下段のデータセルすべてに適用されます。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要素の使い方に関しては、基礎講座のテーブルに関するグループ化を参照してください。

データセル(行)のグループ化

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

下記の実際の行のグループ化を設定する 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要素の属性は以下の2つがあります。

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

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

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

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

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

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

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



This Page is HTML4.01 Valid! 初版更新日 2003/1/4
Copyright(C) 2002-2003 banban@scollabo.com