Ⅵ-４　テーブルの大きさを指定する

１）ページの見出し部分をテーブルの中に表示する

ページの見出し部分を、テーブルを使ってアレンジします。
そこで見出し部分の「<h1>色の呼び名</h1>」を<table><tr><td>～</td></tr></table>で囲みます。
これで見出しがテーブルの中のコンテンツとして表示されます。
罫線を表示させるため「border」の設定を書いておきます。【参考】

２）見出の横に文章を表示します。

見出しの横に文章を書くためのセルを作成します。
そこで見出しを表示しているセルの後に「<td></td>」を追加し、その中に文章を書きます。
しかしこれでは文章のセルが横長く表示され、レイアウトが崩れてしまいます。【参考】

３）セルの横幅を指定します

レイアウトを整えるために、<td>に対してデザイン設定をします。
見出しのセルだけ横幅を設定するためにはクラス名を付けてデザイン設定します。
クラス名を「head1」として<style>の中に「td.head1{～}」を追加します。
ここではセルの横幅を１２５ピクセルで表示させるため「width:125px」と指定します。【参考】

４）見出しの文字を小さくします

見出しの文字は<h1>～</h1>の中に書いているため、
<style>の中に「h1{～}」を追加し、font-sizeを設定します。値は「24px」を指定します。【参考】

５）見出しの隣の文章の文字を小さくします

デザインのバランスをとるため文字を小さくします。
この文章は<td>～</td>の中に書いているため、<td>に対してデザイン設定するします。
他の<td>と区別するため、クラス名を「head2」とします。
<style>の中に「td.head2{～}」を追加し、font-sizeを設定し、値を「14px」に指定します。【参考】

６）テーブルの横幅を指定します

見出し部分のテーブルは、画面の横幅いっぱい表示されています。
そこでテーブル全体の横幅を小さくします。
下のテーブルと区別するため、<table>のクラス名を「head」とします。
<style>の中に「table.head{～}」を追加し、widthで横幅を設定します。
ここではブラウザ画面の横幅に対して90%の長さで表示させることにします。【参考】

７）テーブルの高さ指定します

テーブルの高さはheightで設定することが出来ます。
table.head{～}にheightの設定を追加し、値を80pxと指定します。【参考】

８）テーブルの下に余白を入れます

見出しを表示したテーブルとその下のテーブルがくっついているため、間に余白を入れます。
table.head{～}に、margin-bottomを追加し、値を「30px」と指定します。
これで見出しを表示したテーブルの下に３０ピクセルの余白が入ります。
margin-bottomは、コンテンツの下側の余白の大きさを設定するためのものです。

<html>
<head>
<title>色の呼び名</title>
<style type="text/css"></style>
</head>
<body>
<div align="center">
<table border class="head"><tr>
<td class="head1"><h1>色の呼び名</h1></td>
<td class="head2">「水と空」の風景から、さまざまな色を抽出して、色名と呼び名についてまとめてみます。<br>
四季の水、四季の空にふさわしいと思われる色名を配しました。</td>
</tr></table>
<table border>
<tr><th>呼び名</th><th>イメージ</th></tr>


<tr><td class="name">水色<br>みずいろ</td>
<td>海や川の水の緑がかった青から名付けられた。<br>
英名を「アクア」と言うが、アクアとはラテン語で「水」を意味する<br>
万葉集では「水縹（みななだ）」詠んだ歌があり、<br>
それが「水色」と言う名に変化したと言う説がある。<br>
「水縹」とは水で薄めたような薄色の青を言う。
</td></tr>


</table>
</div>
</body>
</html>

９）テーブルの横幅と高さ

テーブルの横幅と高さは、widthとheightで指定します。
これらは、<table>または<th>、<td>に対して設定することが出来ます。
例題では全体の横幅を90%、左のセルを125pxと指定しています。
そのため右のセルの横幅は、全体から125pxを引いたものになります。
全体の横幅は、ブラウザの画面の大きさで決まりますので、画面を小さくすると、右のセルが小さく表示されます。

１０）テーブルのまわりの余白

テーブルのまわりの余白はmarginで設定することが出来ます。
一方向の余白だけを指定する場合は、margin-leftやmargin-right、margin-top、margin-bottomを使います。
！！テーブルの場合paddingではまわりの余白を調節出来ません。
なおテーブルには、画像と同じようにfloatでテキストのまわり込みを設定することが出来ます。
この場合もmarginを使ってテーブルのまわりに余白を入れることが出来ます。【参考】

Ⅵ-４ テーブルの大きさを指定する