表を作る
属性:ブロックレベル要素
書式:
<table summary="表についての説明">
<caption><em>表のタイトル</em></caption>
<tr>
<th rowspan="2"></th><th colspan="2">値</th>
<th rowspan="2">値<br>3</th>
</tr>
<tr><th>値1</th><th>値2</th></tr>
<tr><th>項目1</th><td>値1-1</td><td>値1-2</td><td>値1-3</td></tr>
<tr><th>項目2</th><td>値2-1</td><td>値2-2</td><td>値2-3</td></tr>
</table>
表を作成します。各要素や属性は以下になります。
- summary
- 表の概要を書きます。どういう表なのかを短い文章で表してください。
- caption
- 表のタイトルを規定します。通常、表の上側中央に表示されます。
- rowspan
- 指定した数字の数だけ縦のセルを結合して表示します。
- colspan
- 指定した数字の数だけ横のセルを結合して表示します。
- tr
- 表の行を指定します。
- th
- 見出し用のセルを指定します。ブラウザによって違いはあるようですが、通常太文字でセルの中央に文字が表示されます。
- td
- 通常のセルを指定します。 こちらもブラウザによる差異があるようですが、通常の文字で文字位置は左寄せになっていることが多いようです。
注意:borderの太さを指定しないと枠線が表示されません。通常はcssで指定します。
書式に書いてあるソースは、テキストのみを表示するような場合は次のように表示されると思われます。
表のタイトル /-----------------------------------------\ | | 平 均 | 値 | | |-------------------| 3 | | | 値1 | 値2 | | |-----------------------------------------| | 項目1 | 値1-1 | 値1-2 | 値1-3 | |-----------------------------------------| | 項目2 | 値2-1 | 値2-2 | 値2-3 | \-----------------------------------------/
画像にも対応しているようなブラウザだと下の赤い枠内のように表示されると思われます。
古い(html3.2あたり)の文書ではスタイルシートの変わりにページの配置を規定するために用いたりもしましたが、
本来の使い方から外れてしまいますし、
ブラウザによって(音声ブラウザなど視覚に頼らないブラウザやテキストブラウザ)は
何が書いてあるかがわからない状態になってしまいます。