Ⅵ-６　複数行にまたがるセルを作る

１）テーブルを使った新しいページを作ります

これまで作っていた「色の呼び名」のページをベースに、
デザイン設定や見出しの部分、トップページへのリンクなどはそのまま使用します。
「マイドキュメント」の「webpage」から「iromei.htm」を開き、表示からソースを開きます。
「link.htm」と言うファイル名を付けて保存します。そのとき<title>～</title>の中を「日本の伝統色」と書き換えます。
見出しのテーブルと、トップページへのリンクを残して、<table border>～</table>を削除します。
削除した中に設定していたクラス名に関連したstyleも削除します。
（td.name1{text-align:center;background-color:#A1D5E5}これを削除）【参考】

２）見出し部分のテキストを書き換えます

<h1>に「日本の伝統色」と書きます。
隣のセルの説明文も書き換えますが、ここでは別のページへのリンクを予定した文章にしました。【参考】

３）コンテンツを表示させるテーブルを作ります

まずは１行目ですが、横に３セル並べる事にします。
<table border><tr><td>～</td><td>～</td><td>～</td></tr></table>
～にテキスト等を入れていけば１行完成します。
２個目のセルには、背景色を指定して、色を表示させます。
<td>にクラス名を付け「iro1」とし、class="iro1"を追加し、
<style>の中にもtd.iro1{background-color:#FDE6E1}を追加します。
２行目は</table>の上に<tr><td>～</td><td>～</td><td>～</td></tr>を挿入します。
<td>にクラス名を付け「iro2」とし、class="iro2"を追加し、
<style>の中にもtd.iro2{background-color:#E88183}を追加します。
３行目以下同じです。【参考】

４）見出しセルを作ります

今作った３列のセルの頭に、見出しを作ります。「赤系統」とします。
そのためテーブルの最初にもう１行「<tr><th>赤系統</th></tr>」を追加します。【参考】

５）見出しセルが複数のセルにまたがるように設定します。

４）では見出しが始めのセルの上にしか表示されていません。
これを３列のセルにまたがって表示させるように、<th>に「colspan="3"」と設定します。【参考】

６）見出しのテーブルにリンク用の場所を作ります

説明文を書いたセルを分けて、文章の下をリンク用の場所にします。
そのため、<td class="head2">のセルの下に１行増やします。<tr><td>リンク</td></tr>とします。【参考】
説明を分かりやすくするためボーダーを付けましたが、見出しテーブルの下にリンクのセルが出来ています。
そこで<td class="head1">のセルを２行分に設定するため、<td class="head1">に「rowspan="2"」を追加します【参考】

７）リンクのためのコンテンツを作ります

リンクと書いた場所に、赤系統・橙系統・～灰系統までの文字に書き換えます。【参考】
分かりやすくするため、色画像を入れます。【参考】
文字と画像が横に並び、レイアウトが乱れますので、一つずつのセルに入れ文字と画像が縦に並ぶようにします。
「赤系統<imgsrc="red.gif">」を<td>と</td>で挟みます。<td>赤系統<imgsrc="red.gif"></td>となります
以下同様にして全て<td>と</td>で挟みます。
上の説明文が８列分になりますから、<td class="head2">の中に「colspan="8"」を追加します。【参考】

８）下のテーブルの「赤系統のセル」の中にテキストと画像を入れます

画像は<imgsrc="red.gif">とします。説明文を書き込みます。
テキストを画像に回り込ませる設定と、画像とテキスト間隔を空けるため設定を<style>の中に追加します
img{float:left;margin-right:10px}と書きます。画像が左、画像の右に１０ピクセルの間隔が空きます。【参考】

９）レイアウトを整えます

文字の大きさや、セルの幅を決めます。
見出しのテーブルの幅と下のラインの幅を100%にし、<h1>のセルの幅を160pxに変更します。
下のテーブルの見出しの文字が太いので、見出しで無くするためthをtdに変更します。
下のテーブルの色名のセルを<th>にして、文字を太くします。
<th>の幅を固定するために、<style>のthに「;width:130px」を追加します。
色を表示しているセルの幅も固定するため、td.iro1{～}に「;width:20px」を追加します。
テーブルの文字の大きさを12pxにします。table{font-size:14px}のところを12に書き換えます
尚上のテーブル文字の大きさはは個別に指定している（<h1>・td.head2）ので影響はされません。
上のテーブルに背景色を指定します。table.head{～}に「;background-color:#ffffff」を追加します。
ここでもtd.head1とtd.head2のクラス設定があるため、ここは背景色が変わりません。

<html>
<head>
<title>日本の伝統色</title>
<style type="text/css"></style>
</head>
<body>
<div align="center">
<table class="head" cellspacing="0"><tr>
<td class="head1" rowspan="2"><h1>日本の伝統色</h1></td>
<td class="head2">幸いにも日本には、ずっと昔から大切にされてきた色の世界があります。忘れかけている昔からの日本の色、もう一度見直してみませんか？それぞれの色系統別にまとめています。クリックすればそのページが開きます。</td></tr>
<tr>
<td>赤系統<imgsrc="red.gif"></td><td>橙系統<imgsrc="orange.gif"></td>・・・・</tr>
</table>
<table border>
<tr><td colspan="3"><imgsrc="red.gif">赤系統についての説明文</td></tr>
<tr><th>～</th><td class="iro1">～</td><td >～</td></tr>
<tr><th>～</th><td class="iro2">～</td><td >～</td></tr>
</table>
<hr>
<div><a href="index.htm">Sky&Water by sora</a></div>
</div>
</body>
</html>

１０）複数行にまたがるセルの設定

セルの表示オプション

rowspan 縦方向にまたがるセルの数を指定します【参考】

colspan 横方向にまたがるセルの数を指定します【参考】

rowspan	縦方向にまたがるセルの数を指定します	【参考】
colspan	横方向にまたがるセルの数を指定します	【参考】

Ⅵ-６ 複数行にまたがるセルを作る