<th rowspan="縦方向のセルの統合数">〜</th>
<th colspan="横方向のセルの統合数">〜</th>
<td rowspan="縦方向のセルの統合数">〜</td>
<td colspan="横方向のセルの統合数">〜</td>
縦方向のセルの統合数‥‥‥そのセルから下方向へ統合するセルの数
横方向のセルの統合数‥‥‥そのセルから右方向へ統合するセルの数
| 要素名 | 属性名 | 説明 | 非推奨 | 必須属性 |
|---|---|---|---|---|
| th、td | 見出しセル、データセル | |||
| rowspan | 下方向に統合するセルの数 | |||
| colspan | 左右方向に統合するセルの数 | |||
| align | 行揃え | |||
| valign | 縦方向の位置揃え | |||
| char | 位置を揃える文字 | |||
| charoff | 位置を揃える文字までの距離 | |||
| abbr | 見出しセルの省略形 | |||
| axis | 見出しセルの分類名 | |||
| headers | 関連する見出しセルのID名 | |||
| scope | 見出しセルの対象となる範囲 | |||
| nowrap | 改行の禁止 | 非推奨 | ||
| bgcolor | 背景色 | 非推奨 | ||
| width | 幅 | 非推奨 | ||
| height | 高さ | 非推奨 | ||
| class | クラス名 | |||
| id | ＩＤ名 | |||
| title | 補足情報 | |||
| style | スタイルシート | |||
| lang | 言語コード | |||
| dir | 文字表記の方向 |
rowspan属性やcolspan属性を利用すると、指定したセルから指定した個数分のセルを1つのセルとしてまとめる事が出来ます。
この時、この属性が指定されたセル(th要素又はtd要素)は、1つのセルで指定された個数分のセルの領域を取ることになります。
したがって、本来その領域内にあるはずの統合された側のセルは、ソースから取り去る必要が有ります。
Sample
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<base href="http://www.abcd.com/efg/index.html">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="author" content="制作者名">
<meta name="description" content="内容の紹介">
<meta name="keywords" content="キーワード1,キーワード2,キーワード3,・・・">
<link rel="start" href="start.html">
<link rel="index" href="index.html">
<title>セルを統合する。</title>
</head>
<body>
<table border="2">
<caption>普通の表</caption>
<tr><th>見出し1</th><th>見出し2</th><th>見出し3</th></tr>
<tr><td>データ1</td><td>データ2</td><td>データ3</td></tr>
<tr><td>データ4</td><td>データ5</td><td>データ6</td></tr>
<tr><td>データ7</td><td>データ8</td><td>データ9</td></tr>
</table>
<caption>セルを統合した表</caption>
<tr><th colspan="2">見出し1</th><th>見出し2</th></tr>
<tr><td>データ1</td><td>データ2</td><td rowspan="3">データ3</td></tr>
<tr><td>データ4</td><td>データ5</td></tr>
<tr><td>データ7</td><td>データ8</td></tr>
</table>
</body>
</html>
<html lang="ja">
<head>
<base href="http://www.abcd.com/efg/index.html">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="author" content="制作者名">
<meta name="description" content="内容の紹介">
<meta name="keywords" content="キーワード1,キーワード2,キーワード3,・・・">
<link rel="start" href="start.html">
<link rel="index" href="index.html">
<title>セルを統合する。</title>
</head>
<body>
<table border="2">
<caption>普通の表</caption>
<tr><th>見出し1</th><th>見出し2</th><th>見出し3</th></tr>
<tr><td>データ1</td><td>データ2</td><td>データ3</td></tr>
<tr><td>データ4</td><td>データ5</td><td>データ6</td></tr>
<tr><td>データ7</td><td>データ8</td><td>データ9</td></tr>
</table>
<caption>セルを統合した表</caption>
<tr><th colspan="2">見出し1</th><th>見出し2</th></tr>
<tr><td>データ1</td><td>データ2</td><td rowspan="3">データ3</td></tr>
<tr><td>データ4</td><td>データ5</td></tr>
<tr><td>データ7</td><td>データ8</td></tr>
</table>
</body>
</html>
Internet Explorer8での表示例
