少し高度な表作成

「表を作ってみよう」では、簡単な表を構成する諸要素について説明しました。

実際には、もっと複雑な表作成を知っておく必要があります。

【注意】
「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 


テーブルの枠線や背景色の指定などの装飾はすべてスタイルシートで行ってください。

要素	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>
  <td rowspan="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">
  <td colspan="3">中央 1</td>
 </tr>
 <tr bgcolor="Yellow">
  <td rowspan="2">左下 2</td>
  <td colspan="2">右上 3</td>
 </tr>
 <tr bgcolor="Lime">
  <td >中央下 4</td>
  <td >右下 5</td>
 </tr>
</table>

</body>
</html>

上記のHTML文書を、ブラウザで確認してみると次のように表示されます。

慣れないうちは、上の例のように「数字」や「色」を各セルごとに加えることで、どのように表示されるか確認する方がよいでしょう。

少し高度な表作成