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 (全て表示)
- rules
- 表の内側の罫線をどう表示するか設定する項目です。
- none (表示しない : 規定値)
- groups (行グループ、列グループの間のみ)
- rows (行間のみ)
- cols (列間のみ)
- all (全ての行間・列間)
- abbr
- セルの省略形(概要)を設定致します。音声ブラウザでは毎回読み上げて下さるそうなので、読み上げた際に理解出来る略語を設定する必要があります。
- scope
- 指定したセルがどの方向の見出しなのかを設定致します。
- row (行)
- col (列)
- rowgroup (行グループ)
- colgroup (列グループ)
- headers
- 表の構造が複雑になり、scope属性では対応し切れない場合に設定致します。 見出しとなるセルにid属性を指定し、対応するセルにidの値をheaders属性で指定致します。 (headers属性の値はスペースで区切ると複数の指定出来ます。)
- axis
- セルの分類名を設定致します。コンマ ( , ) で区切って複数指定が可能です。
4-15-1d 具体例
一番簡単な表を作成してみました。
HTML
<body> ~ </body> 内に記述して下さい。<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> 内に記述して下さい。<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> 内に記述して下さい。<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 |
各ブラウザで表示してみましたが、余り差が無かったので画像は省かせて頂きます。