Ⅵ-８ セル内のテキストの縦方向の表示位置
１）テキストをセルの上に揃えて表示します
色名の付いたテーブルの見出し部分のテキストは、セルの中央に配置されています。
これをセルの上に表示させるため、th{～}にvertical-alignの設定を追加し、値を「top」と指定します。
更に文字を左に揃えて表示させます。th{～}にtext-alignの設定を追加し、値を「left」と指定します。
２）見出しテーブルのリンクを設定します
リンクを付けるために赤系統<img src="red.gif">を<a href="aka.htm">と</a>で囲みます
リンク後の文字を見やすくするために色を変えます。
リンク文字の下線表示を消しすため<style>にa{text-decoration:none}を追加します。
リンクに依って出来る画像がまわりの枠を消すため<style>の中のimg{～}「;border-width:0px」を追加します。
Yこれで伝統色を集めた【おまけ付き】テーブルの完成です。
（資料は＠yuzen友禅ネット様からお借りしました）
<html>
<head>
<title>日本の伝統色</title>
<style type="text/css"><!--
body{color:#333333;
background-color:#f0f8ff;
background-image:url(back.jpg)}
th{padding:10px;width:130px;
border-style:dashed;border-width:2px;border-color:#c8dad8;
vertical-align:top;text-align:left}
td{padding:10px}
table{font-size:12px}
td.head1{width:160px;background-color:2f2f63}
h1{font-size:24px;color:#ffffff}
td.head2{font-size:14px;background-color:c8dad8}
table.head{width:100%;height:80px;margin-bottom:30px;background-color:#ffffff}
td.iro1{background-color:#FDE6E1;width:20px}
td.iro2{background-color:#E88183}
td.iro{background-color:#ffffff}
table.iro td{border-style:dashed;border-width:2px;border-color:#c8dad8}
table.iro{border-style:solid;border-width:2px;border-color:#32006a}
img{float:left;margin-right:10px;border-width:0px}
hr{width:100%;height:10px;
border-style:dotted;border-color:#32006a
border-width:2px;margin-top:20px}
a:link{color:#287c72}
a:visited{color:#3a0878}
a:hover{color:#d6d620}
a:active{color:#d6202e}
{text-decoration:none}
--></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><a href="aka.htm">赤系統<imgsrc="red.gif"></a></td>
<td>橙系統<imgsrc="orange.gif"></td>・・・・</tr>
</table>
<table border class="iro" cellspacing="0">
<tr><td class="iro"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>
|
セル内の縦方向の表示位置を指定するには、vertical-alignを使います。【参照】
vertical-alignで設定出来る値
| top | 上に表示します |
| middle | 中央に表示します |
| bottom | 下に表示します |