ホームページやブログなどで表を表示させるには、TABLEタグやTR、
TDタグなどを使用しますが、そのままでは見づらいのでALIGN属性やPADDINGを
指定して見映えを良くする必要があることもしばしばです。
しかし、セルの一つ一つにこれらの属性やスタイルを記述するのには
手間がかかりますし、変更したいときも大変です。
そんなときは、スタイルシート（CSS）でまとめて設定するのがおすすめです。
例えば、こんなテーブルは文字と枠がくっついてしまって少し見づらく感じます。
| 番号 | 名称 | 主な働き |
|---|
| 1 | フェニルアラニン | 精神を安定させてストレスを緩和 |
|---|
| 2 | スレオニン | 成長の促進、組織の修復など |
|---|
| 3 | ヒスチジン | 食欲を抑制し、エネルギーの代謝を活発に |
|---|
そこで、スタイルシートを使用して少し体裁を整えてみます。
| 番号 | 名称 | 主な働き |
|---|
| 1 | フェニルアラニン | 精神を安定させてストレスを緩和 |
|---|
| 2 | スレオニン | 成長の促進、組織の修復など |
|---|
| 3 | ヒスチジン | 食欲を抑制し、エネルギーの代謝を活発に |
|---|
このサンプルのソースは、次のようになっています。
]]>
<style type="text/css">
<!--
.mytable table {
font-size:12px;
line-height:1.5em;
}
.mytable th {
font-weight: normal ;
text-align:center;
background-color: red ;
color: white ;
padding: 0 5px;
}
.mytable td {
background-color: white;
padding: 0 5px;
}
-->
</style>
<div class="mytable">
<table border="1" cellpadding="0"
cellspacing="0">
<tr><th>番号</th><th>名称</th><th>主な働き
</th></tr>
<tr><th>1</th><td>フェニルアラニン</td><td>精神を安定させてストレ
スを緩和</td></tr>
<tr><th>2</th><td>スレオニン</td><td>成長の促進、組織の修復など
</td></tr>
<tr><th>3</th><td>ヒスチジン</td><td>食欲を抑制し、エネルギーの代
謝を活発に</td></tr>
</table>
</div>
このサンプルでは、
- mytableというクラスを指定したタグ内のテーブルの
文字の大きさを 12ピクセルに、また行の高さを1.5emに指定
- mytableというクラスを指定したタグ内のTHタグの
スタイルを、文字の太さ：普通、文字の位置：中揃え、背景色：赤、文字の色：白、左右の余白：5ピクセル
に指定
- mytableというクラスを指定したタグ内のTDタグの
背景色を白、左右の余白を 5ピクセルに指定
というふうになっており、THやTDタグの一つ一つにスタイルを指定する
必要がありません。
この指定は、mytableというクラスを指定したタグ内で
のみ有効なので、その他（このスタイルを適用したくない既存のテーブル）は
そのままになります。
もちろんこのサンプルのように<style type="text/css">
でページに記述してもいいですし、外部スタイルシートに組み込んでも構いません。
いろいろなスタイルのテーブルを使用したい方は、クラス名を変えていくつか
外部スタイルシートに指定しておくと便利かもしれません。
外部スタイルシートについて詳しくは、こちらをご覧ください。→外部からスタイルシートを読み込む
]]>
