初版公開日 2002年8月6日 最新更新日 2004年3月7日
Copyright(C) 2002〜2008 banban
HTMLを学ぶ上で欠かせないのがテーブルと呼ばれる要素です。テーブルは表組を作成するツールですが、その他にレイアウトを構築する際にも多々使われています。
ここでは、テーブルの基本と応用について解説します。サンプルを取り揃えていますので、参考までに見ておいてください。
|
左のテーブルは、まさに基本です。セルが縦と横に集まって１つの表を形成しています。セルの中にコンテンツが入ります。テーブルにおけるセルはある意味で偉大で、ブロックレベル要素でもオブジェクトでもスクリプトでも入れられてしまうのです。
まず最初に、テーブルはセルの集合体であるということを理解してください。 |
HTML文を見てください。このテーブルでは枠線を表示するために、border属性を使っています。テーブルの初期値では枠線が表示されないために、この属性で設定する必要があります。
<table border="1"> <tr><th>科目</th><th>得点</th><th>平均点</th></tr> <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> <tr><td>合計</td><td>78点</td><td>81点</td></tr> </table>
| 科目 | 得点 | 平均点 |
|---|---|---|
| 国語 | 85点 | 88点 |
| 算数 | 62点 | 73点 |
| 理科 | 70点 | 75点 |
| 英語 | 95点 | 86点 |
| 合計 | 78点 | 81点 |
<table border="1" cellpadding="5" cellspacing="0">
| 科目 | 得点 | 平均点 |
|---|---|---|
| 国語 | 85点 | 88点 |
| 算数 | 62点 | 73点 |
| 理科 | 70点 | 75点 |
| 英語 | 95点 | 86点 |
| 合計 | 78点 | 81点 |
colgroup要素、あるいは col要素 を使います。table 要素直後に下記のように記述します。<table border="1" cellpadding="5" cellspacing="0"> <colgroup> <col width="50" align="center"> <col span="2" width="70" align="center"> </colgroup>
| 科目 | 得点 | 平均点 |
|---|---|---|
| 国語 | 85点 | 88点 |
| 算数 | 62点 | 73点 |
| 理科 | 70点 | 75点 |
| 英語 | 95点 | 86点 |
| 合計 | 78点 | 81点 |
align属性で、セル内での文字のセンタリングを施しました。グループ化することにより全体が表らしくなり、非常に見やすい表が作成できます。colgroup要素は、縦方向の列を「構造的」にグループ化するために利用しますが、col要素だけでも利用することは可能です。その場合、構造化はされず単に列をグループ化するだけです。| 要素名 | 属性 | 値と機能 |
|---|---|---|
| table | border | 枠線表示：ピクセル単位 |
| width | テーブルの横幅：ピクセル、％単位 | |
| frame | セルの上下左右の枠線表示の指示
| |
| rules | セルを区切る境界の枠線表示の指示
| |
| cellspacing | セル間の余白：ピクセル単位 | |
| cellpadding | セル内の余白：ピクセル単位 | |
| summary | テーブルの補助的説明を加える | |
| caption | なし | 表のキャプション (表題)を定義する |
| tr | align | セル内の行揃えの指定
|
| valign | データの垂直方向の位置の指定
| |
| char | 位置を揃える文字を指定する
| |
| th td |
align | tr要素の align属性と同様、セル内の位置揃えを指定する属性 |
| valign | tr要素の valign属性と同様、セルの垂直方向の位置揃えを指定する属性 | |
| abbr | セルの内容を簡略に説明を加える
アクセシビリティに配慮する属性 | |
| axis | セルに分類名を付与する
アクセシビリティに配慮する属性 | |
| headers | 関連するヘッダセルの識別子を付与する
アクセシビリティに配慮する属性 | |
| scope | ヘッダセルの対象となるデータセルの範囲を関連付けて指定する
アクセシビリティに配慮する属性 | |
| colspan | セルを横方向に結合させる：数値で指定する | |
| rowspan | セルを縦方向に結合させる：数値で指定する | |
| char | 位置を揃える文字を指定する
| |
| colgroup col |
span | グループ化する列数を指定する |
| width | グループ化したセルの幅を指定する | |
| align | グループ化したセルのデータの位置揃え | |
| valign | グループ化したセルの垂直方向の位置揃え | |
| char | 位置を揃える文字を指定する
| |
| thead tbody tfoot |
align | グループ化したセルのデータの位置揃え |
| valign | グループ化したセルの垂直の位置揃え | |
| char | 位置を揃える文字を指定する
|
DTD文書型宣言が、HTML 4.01 Strict (厳格仕様) で使用可能なものだけを選びました。これ以外にも存在しますが、それらは非推奨扱いとなっており、廃止方向に向かうものです。
初版公開日 2002年8月6日 最新更新日 2004年3月7日
Copyright(C) 2002〜2008 banban