タイトル画像
サイトタイトル画像

少し高度な表作成

少し高度な表作成

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

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

【注意】
「HTML」の規格を策定している World Wide Web Consortium(W3C)によると、「HTML5」では、HTML4.01にあった次の属性が廃止されました。

要素HTML5で廃止された属性
tablealign/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文書を、ブラウザで確認してみると次のように表示されます。表2

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

スポンサードリンク

オススメ書籍

HTML5、CSS3、JavaScript等の学習に役立つ書籍を紹介します。

人気コンテンツ

    Copyright ©2015 .(since 2000/08/10)