ブログでもだいたい使えるHTMLタグリファレンス

ホームページやブログなどで表を表示させるには、TABLEタグやTR、 TDタグなどを使用しますが、そのままでは見づらいのでALIGN属性やPADDINGを指定して見映えを良くする必要があることもしばしばです。

しかし、セルの一つ一つにこれらの属性やスタイルを記述するのには手間がかかりますし、変更したいときも大変です。

そんなときは、スタイルシート（CSS）でまとめて設定するのがおすすめです。
例えば、こんなテーブルは文字と枠がくっついてしまって少し見づらく感じます。

番号	名称	主な働き
1	フェニルアラニン	精神を安定させてストレスを緩和
2	スレオニン	成長の促進、組織の修復など
3	ヒスチジン	食欲を抑制し、エネルギーの代謝を活発に

そこで、スタイルシートを使用して少し体裁を整えてみます。

番号	名称	主な働き
1	フェニルアラニン	精神を安定させてストレスを緩和
2	スレオニン	成長の促進、組織の修復など
3	ヒスチジン	食欲を抑制し、エネルギーの代謝を活発に

このサンプルのソースは、次のようになっています。

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"> でページに記述してもいいですし、外部スタイルシートに組み込んでも構いません。

いろいろなスタイルのテーブルを使用したい方は、クラス名を変えていくつか外部スタイルシートに指定しておくと便利かもしれません。

外部スタイルシートについて詳しくは、こちらをご覧ください。→外部からスタイルシートを読み込む

ランキングに参加中です! お役に立てたらクリックをお願いします→

ブログでもだいたい使えるHTMLタグ リファレンス

テーブルの余白などのスタイルを指定する