テーブルの余白などのスタイルシート（CSS）を指定する

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

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

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

番号会社名備考
1 テスト1株式会社 売り上げ順調　
2 テスト2株式会社 安定した経営方針で、2008年飛び出す可能性大
3 テスト3株式会社 社長が9月に辞任。会社に救世主が現れるかが課題

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

番号名称備考
1 テスト1株式会社 売り上げ順調　
2 テスト2株式会社 安定した経営方針で、2008年飛び出す可能性大
3 テスト3株式会社 社長が9月に辞任。会社に救世主が現れるかが課題
Code:
<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>テスト1株式会社</td><td>売り上げ順調</td></tr>
<tr><th>2</th><td>テスト2株式会社</td><td>安定した経営方針で、2008年飛び出す可能性大</td></tr>
<tr><th>3</th><td>テスト3株式会社</td><td>社長が9月に辞任。会社に救世主が現れるかが課題</td></tr>
</table>
</div>