テーブルの作成 セルのグループ化

テーブルを表示させるツールは他にもいろいろあります。ここでは、テーブルの横列のグループ化、セルの結合などについて説明します。グループ化することで、より直感的に読みやすい表組の表現を提供します。

横列のグループ化
横列のセルを一括してグループ化させる要素は以下の通りです。
横方向のセルをグループ化する要素
thead 横列をヘッダとして定義し、グループ化するための要素

表の一番上に表示する

tfoot 横列をフッタとして定義し、グループ化する要素

表の一番下に表示する

tbody テーブルの本文として定義し、グループ化する要素

複数の行をグループ化できる

この要素を利用することで、スタイル付けの簡便、読みやすさが向上します。なお、それぞれのグループ化は複数行にまたがって設定することが可能です。
グループ化したテーブル
科目 得点 平均点
合計78点81点
国語85点88点
算数62点73点
理科70点75点
英語95点86点
残念ながら、横方向の行をグループ化する要素でスタイルシートの背景色などを指定した場合、Macintosh版 MSIE では再現するのが難しいようです。ブラウザ固有のバグではないかと推測します。
セルの結合
セルを縦、横と結合させることが可能です。td要素に結合させる属性と結合させる数を値として記述します。

横方向への結合 <ts colspan="n"> n=結合数

縦方向への結合 <ts rowspan="n">

セルを結合して表現したテーブル
colspan="3"セルセル
rowspan="2"セルセルセルセル
セルセルcolspan="2"
セルcolspan="3" rowspan="3"セル
セルセル
セルセル
色の付いたセルが結合されたものを表示しています。このように自由なセルの結合が行えます。


This Page is HTML4.01 Valid! 初版公開日 2002年8月16日   最新更新日 2004年2月26日
Copyright(C) 2002〜2008 banban