少し高度な表作成
少し高度な表作成
「表を作ってみよう」では、簡単な表を構成する諸要素について説明しました。
実際には、もっと複雑な表作成を知っておく必要があります。
【注意】
「HTML」の規格を策定している World Wide Web Consortium（W3C）によると、「HTML5」では、HTML4.01にあった次の属性が廃止されました。
| 要素 | HTML5で廃止された属性 |
|---|---|
| table | align/bgcolor/border/cellpadding/cellspacing/frame/rules/summary/width |
| tr | align/bgcolor/char/charoff/valign |
| td | abbr/align/axis/bgcolor/char/charoff/headers/height/nowrap/valign/width |
複数のセルを結合する
セルを均等に分割するのではなく「セルが縦・横にまたぐ表」が作りたいことも、しばしば生じます。
例えば次の例を見てみましょう。
上記の例では、「中央」のセルが「縦に2 行分またいでいる」形になっています。
これをHTMLで記述するには、「rowspan」という属性を、「中央」のセルを構成している td 要素内に記述します。
ファイル名：table1.html
<html><head><title>少し高度な表作成</title></head><body><table border="1"width="90%"><tr><td align="left">左上 1</td><tdrowspan="2"bgcolor="yellow"align="center">中央 2</td><td align="right">右上 3</td></tr><tr><td align="left">左下 4</td><td align="right">右下 5</td></tr></table></body></html>
縦にセルがまたぐのを定義するのが「rowspan」属性です。また、横にセルをまたぐのを定義する属性として「colspan」があります。
| 属性 | 説明 |
|---|---|
| rowspan | 縦（行）方向の複数個のセルを結合する。デフォルト値は"1" |
| colspan | 横（列）方向の複数個のセルを結合する。デフォルト値は"1" |
rowspan 属性、colspan 属性ともに「属性名="属性値"」という書き方になります。
ここで「属性値」がセルをまたぐ個数をあらわし、属性値が"0"の場合は、そのセルの位置から表の最後のセルまでが結合されます。
rowspan 属性とcolspan 属性を使うにあたって
rowspan 属性とcolspan 属性を利用することで、複雑な表構造を実現することが可能です。
ただし、セルをまたぐ数が多い表の場合には、どの順番で定義したら良いのか分からなくなることがあります。
基本的に、上記のようにセルを分割した状態を常に頭に入れておき、1行ずつ記述していきます。
このとき、またぐセルが出てきた場合は、出てきた最初にrowspan 属性とcolspan 属性で定義をしておき、以降は除外して表を構成していきます。
例えば、次のHTML文書から表の構成を頭に想像してみましょう。
ファイル名：table2.html
<html><head><title>少し高度な表作成</title></head><body><table border="1"width="90%"><tr bgcolor="Orange"><tdcolspan="3">中央 1</td></tr><tr bgcolor="Yellow"><tdrowspan="2">左下 2</td><tdcolspan="2">右上 3</td></tr><tr bgcolor="Lime"><td >中央下 4</td><td >右下 5</td></tr></table></body></html>
上記のHTML文書を、ブラウザで確認してみると次のように表示されます。
慣れないうちは、上の例のように「数字」や「色」を各セルごとに加えることで、どのように表示されるか確認する方がよいでしょう。
オススメ書籍
HTML5、CSS3、JavaScript等の学習に役立つ書籍を紹介します。
