【前のページ←見本→次のページ】 更新日

Ⅵ-３　セル内のテキスト行揃え

１）色名を中央に揃えて表示します

<td>～</td>に書いた文字は標準ではセルの左に揃えで表示されます。
ここでは呼び名の下に並ぶセル内の文字を中央に揃えて表示させてみます
text-alignの設定を追加し、値をcenterと指定します。
<td>に対してデザイン設定すると全ての<td>にも適用されます。
そこでデザイン設定したいセルには、クラス名を付けてデザイン設定をします。
ここでは中央揃えにしたいセルの名前を「name」として、
<style>の中にtd.name{text-align:center}を追加し、
最初の<td>にクラス名「class="name"」を付けますます。【参考】

２）全てのコンテンツを画面の中央に配置する

ページ内の全てのコンテンツを中央に配置するため、
<h1>～</h1>から<table>～</table>までを<div align="center">～</div>で囲みます。【参考】

３）テーブル内の文字を小さくします

テーブル内の文字をデザイン設定するために<style>にtable{font-size:14px}を追加します。
フォントサイズが１４ｐｘで表示されます。

<html>
<head>
<title>色の呼び名</title>
<style type="text/css"><!--
body{color:#333333;
background-color:#f0f8ff;
background-image:url(back.jpg)}
th{padding:10px}
td{padding:10px}
td.name{text-align:center}
table{font-size:14px}
--></style>
</head>
<body>
<div align="center">
<h1>色の呼び名</h1>
<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>

４）セル内のテキストの行揃え{text-align}

セル内のテキストの行揃えはtext-alignで指定することが出来ます。
text-alignの設定はセルを作る<th>または<td>に対して指定します。
！！<table>や<tr>に指定しても、行揃えは出来ません。

{text-align}で指定できる値
left左揃え
centerセンタリング（中央揃え）
Light右寄せ
justifyジャスティファイ（両端揃え）