岡山市立福浜公民館・クラブ活動/岡山WEB研究会


表の意味

WEBで表を作成する場合は、<table>要素を使用します。
この<table>要素は、あくまで表を製作するものであり、レイアウトに使用するものではありません。

<table>要素には、表がどのようなものであるかを表す、summary属性、項目を表す、th属性とその説明、 abbr、各セルを表す、<tr>要素、<td>要素などで構成されます。

tableの表し方

<table border="枠線の太さ" summary="表がどのようなものであるかを表す">

<tr abbr="横項目">

<th abbr="横項目1">横項目1</th>

<th abbr="横項目2">横項目2 </th>

<th abbr="横項目3">横項目3 </th>

</tr>

<tr abbr="横項目内容">

<td>横項目内容1</td><横項目内容2</td><td>横項目内容3</td>

</tr abbr="横項目内容終了">

</table>

実際に書いた表は下記のように表示されます。

実際の例

横項目1横項目2横項目3
横項目内容1横項目内容2内容横項目3

例をごらんになって、解るように、各項目の幅、高さ、表示位置、色などは、一切記述しません。
これらの項目は、すべてCSSに記述します。(文章構造とデザインの分離)

また、内容を2段3段に表示したい場合は、<br>要素を使用します。
横項目が2行にまたがる場合は、<colspan="2">を適用します。

横の項目が2行にまたがる場合の例

横項目A横項目3
横項目内容1横項目内容2内容横項目3

表の使い方

上記の例を参考にしていただければ、表は簡単に製作できると思います。
ここで注意しなければならない事は、表はあくまで表であり、レイアウトのために使うものではない事を、 覚えておいてください。

過去の技術しか知らない方は、いや表をしようして、レイアウトした方が簡単だ!、等といわれますが、 これは、CSSが普及していない時期の、1ハックでしかありません。 HTMLは文章構造を正しく表現することにより、すべてのユーザー環境に対応するための技術です。 正しいマークアップを心掛けましょう。