4-15-1a 表の作成

表を作成する方法です。<table> 要素と<tr> 要素、<td> 要素を使用致します。(<table> 要素はブロックレベル要素です)。

基本は<table><tr><td></td></tr></table>という形で使用致します。

4-15-1b テーブルの構成要素

<table> ~ </table>
このタグで囲まれた部分が一つのテーブルになります。
<caption> ~ </caption>
テーブルのタイトルを記載する項目です。一般的なブラウザでは表の幅に合わせて真ん中寄せされる形で表示されます。 <table>タグの真下に記載して下さい。(この項目は省略可能です)
<tr> ~ </tr>
テーブルの横一列(行)を設定する項目です。(Table Rowの略です)
<th> ~ </th>
テーブルの見出しを設定する項目です。(Table Headerの略です)。一般的なブラウザでは太字でセンタリングされた状態で表示されます。
<td> ~ </td>
テーブルのデータ(セル)を設定する項目です。(Table Dataの略です)。

<thead> ~ </thead>
テーブルの構造を 『ヘッダ・内容・フッタ』 の三つに分けた時に、ヘッダ部分を表す要素です。一つの表に一つだけ使用する事が出来ます。
<tbody> ~ </tbody>
テーブルの構造を 『ヘッダ・内容・フッタ』 の三つに分けた時に、内容部分を表す要素です。thead要素やtfoot要素と違い、一つの表に何度でも使用する事が出来ます
<tfoot> ~ </tfoot>
テーブルの構造を 『ヘッダ・内容・フッタ』 の三つに分けた時に、フッタ部分を表す要素です。一つの表に一つだけ使用する事が出来ます。 記載する際はヘッダとフッタを最初に読み込ませる為に、<thead> ~ </thead>の真下に記載して下さい(<tbody> ~ </tbody>の直下ではありません)。

<col>
col要素は列全てに同じ属性を指定致しますが、構造的にグループ化は致しません。
<colgroup>
colgroup要素は列全てに同じ属性を指定し構造的にグループ化致します。

4-15-1c テーブルの属性

summary
音声ブラウザにどのような表であるか教える為の項目です。必ず記載するようにして下さい。
width
表の横幅を設定する項目です。pxや%で設定 致します。
cellpadding
セルの余白(外枠と内容の間)を設定する項目です。
cellspacing
セル同士の余白を設定する項目です。
background-color
背景色を設定する項目です。
colspan
テーブルの横セルを結合致します。td要素、th要素に使用出来ます。 具体的な見本はこちら(4-15-1e) をご覧下さいませ。
rowspan
テーブルの縦セルを結合致します。td要素、th要素に使用出来ます。 具体的な見本はこちら(4-15-1f) をご覧下さいませ。
border
表の外側の罫線を設定する項目です。
frame
表の外側の罫線をどう表示するか設定する項目です。
  • void (表示しない : 規定値
  • above (上端のみ)
  • below (下端のみ)
  • hsides (上端と下端のみ)
  • vsides (左右の両端のみ)
  • lhs (左端のみ)
  • rhs (右端のみ)
  • box (全て表示)
  • border (全て表示)
ただし「border」属性が指定されている場合は、規定値は border になります。
rules
表の内側の罫線をどう表示するか設定する項目です。
  • none (表示しない : 規定値
  • groups (行グループ、列グループの間のみ)
  • rows (行間のみ)
  • cols (列間のみ)
  • all (全ての行間・列間)
ただし「border」属性が指定されている場合は、規定値は all になります。
abbr
セルの省略形(概要)を設定致します。音声ブラウザでは毎回読み上げて下さるそうなので、読み上げた際に理解出来る略語を設定する必要があります。
scope
指定したセルがどの方向の見出しなのかを設定致します。
  • row  (行)
  • col (列)
  • rowgroup (行グループ)
  • colgroup (列グループ)
headers
表の構造が複雑になり、scope属性では対応し切れない場合に設定致します。 見出しとなるセルにid属性を指定し、対応するセルにidの値をheaders属性で指定致します。 (headers属性の値はスペースで区切ると複数の指定出来ます。)
axis
セルの分類名を設定致します。コンマ ( , ) で区切って複数指定が可能です。

4-15-1d 具体例

一番簡単な表を作成してみました。

HTML

<body> ~ </body> 内に記述して下さい。
<table cellspacing="5" cellpadding="10" border="1" summary="大阪支店と東京本社の4~6月までの売上表を作成してみました。一行目は月名、二行目は大阪支店、三行目は東京本社、四行目は総合計です。">
<caption>各支部の売り上げ実績表</caption>
<tr>
<th abbr="支店名">支部名</th>
<th abbr="月名">4月</th>
<th abbr="月名">5月</th>
<th abbr="月名">6月</th>
<th abbr="総合計">合 計</th>
</tr>
<tr>
<td>大阪支店</td>
<td>200</td>
<td>300</td>
<td>400</td>
<td>900</td>
</tr>
<tr>
<td>東京本社</td>
<td>500</td>
<td>600</td>
<td>700</td>
<td>1,800</td>
</tr>
<tr>
<td>総合計</td>
<td>700</td>
<td>900</td>
<td>1,100</td>
<td>2,700</td>
</tr>
</table>

表示結果

各支部の売り上げ実績表
支部名 4月 5月 6月 合 計
大阪支店 200 300 400 900
東京本社 500 600 700 1,800
総合計 700 900 1,100 2,700


上記のリストをIEとNN、OPERA、Firefoxで表示し、その見た目の違いを画像にしてみました(詳細はこちらから どうぞ[約10.5KBあります])。 各ブラウザに余り目立った違いはありません。

4-15-1e 具体例2 (横セルの結合)

colspan(横セルの結合)の見本です。

HTML

<body> ~ </body> 内に記述して下さい。
<table cellspacing="5" cellpadding="10" border="1" summary="上記と同じテーブルを利用して大阪支店の項目で横セルの結合を方法を記載致しました。">
<caption>各支部の売り上げ実績表</caption>
<tr>
<th abbr="支店名">支部名</th>
<th abbr="月名">4月</th>
<th abbr="月名">5月</th>
<th abbr="月名">6月</th>
<th abbr="合計">合 計</th>
</tr>
<tr>
<td>大阪支店</td>
<td>200</td>
<td colspan="2">300</td>
<td>900</td>
</tr>
</table>

表示結果

各支部の売り上げ実績表
支部名 4月 5月 6月 合 計
大阪支店 200 300 900


4-15-1e 具体例3 (縦セルの結合)

rowspan(縦セルの結合)の見本です。

HTML

<body> ~ </body> 内に記述して下さい。
<table cellspacing="5" cellpadding="10" border="1" summary="上記と同じテーブルを利用して大阪支店と東京本社の項目で縦セルの結合を方法を記載致しました。">
<caption>各支部の売り上げ実績表</caption>
<tr>
<th abbr="支店名">支部名</th>
<th abbr="月名">4月</th>
<th abbr="月名">5月</th>
<th abbr="月名">6月</th>
<th abbr="合計">合 計</th>
</tr>
<tr>
<td>大阪支店</td>
<td rowspan="2">200</td>
<td>300</td>
<td>400</td>
<td>900</td>
</tr>
<tr>
<td>東京本社</td>
<td>600</td>
<td>700</td>
<td>1,800</td>
</tr>
</table>

表示結果

各支部の売り上げ実績表
支部名 4月 5月 6月 合 計
大阪支店 200 300 400 900
東京本社 600 700 1,800


4-15-1e 具体例4

theadやscope属性等を利用して表を作成してみました。

CSS

<head> ~ </head> 内に記述して下さい。

<style type="text/css">
<!--
th {
background-color: #3366ff; /* 濃いブルー */
}
tfoot td {
background-color: #99ccff; /* 薄いブルー */
}
td {
text-align: right;
background-color: #ffff99; /* 薄い黄色 */
}
--> </style>

[ 関連事項 : HP-TIPS > CSS > 外部スタイルシートの記述方法 ]


HTML

<body> ~ </body> 内に記述して下さい。

<table width="400" cellspacing="5" cellpadding="10" border="0" summary="大阪支店と東京本社の4~6月までの売上表を作成してみました。一行目は月名、二行目は大阪支店、三行目は東京本社、四行目は総合計です。">
<caption>各支部の売り上げ実績表</caption>
<thead>
<tr>
<th scope="col" abbr="支店名">支 部 名</th>
<th scope="col" abbr="月名">4月</th>
<th scope="col" abbr="月名">5月</th>
<th scope="col" abbr="月名">6月</th>
<th scope="col" abbr="合計">合計</th>
</tr>
</thead>

<tfoot>
<tr>
<th scope="row" abbr="総合計">総 合 計</th>
<td>700</td>
<td>900</td>
<td>1,100</td>
<td>2,700</td>
</tr>
</tfoot>

<tbody>
<tr>
<th scope="row" abbr="支店名">大阪支店</th>
<td>200</td>
<td>300</td>
<td>400</td>
<td>900</td>
</tr>
<tr>
<th scope="row" abbr="支店名">東京本社</th>
<td>500</td>
<td>600</td>
<td>700</td>
<td>1,800</td>
</tr>
</tbody>
</table>

表示結果

各支部の売り上げ実績表
支 部 名 4月 5月 6月 合計
総 合 計 700 900 1,100 2,700
大阪支店 200 300 400 900
東京本社 500 600 700 1,800

各ブラウザで表示してみましたが、余り差が無かったので画像は省かせて頂きます。