テーブルの中の文字の配置について
いつもお世話になっています。
テーブルの中の文字の配置について教えて下さい。
会社のサイトリニューアルに当たり、ネット検索して商用利用OKのテンプレートをダウンロードし、カスタマイズしています。
このテンプレートにはテーブル要素がなかったので自分でCSSに記述を付け加えたのですが、文字の配置が思うようにいきません。
2列の10行の表で左に項目(th)右に詳細(td)の表を作っています。
詳細の部分は複数行なのですが、項目の方は一行です。
これを普通にテーブルにすると項目の文字が上下左右の配置が同じ、すべて中央になってしまいます。
項目の文字も左寄り、上寄せにしたいのですが、どう記述すればいいのでしょうか?
ソースは
html部分
<div id="main">
<table>
<tr><th>名称</th><td>******株式会社</td></tr>
<tr><th>代表者</th><td>代表取締役社長 *** ***</td></tr>
<tr><th>所在地</th><td>〒101-0032</br>東京都******************</td></tr>
<tr><th>電話番号</th><td>00-0000-0000(代表)</br>FAX 00-0000-0000 IP電話 000-000-000</td></tr>
<tr><th>営業所</th><td>**営業所</br>茨城県********</br>電話0000-00-0000</td></tr>
</table>
</div>
CSS部分
div#main table {
margin: 30px 50px 30px 30px;
border: solid 1px #666;
border-collapse: collapse;
}
div#main table th {
text-align:left;
text-valign: top;
}
div#main table th,
div#main table td {
padding: 10px;
font-size:0.75em;
line-height: 1.7;
border: solid 1px #666;
}
と、なっています。
div#main table th {
text-align:left;
text-valign: top;
}
の部分は自分で付け加えました。
これでなんとか左寄せにはなりましたが、上下は相変わらず中央配置のままです。
CSSにはあまり詳しくなく、タグを見ながらだいたいの規則性を読んでいますので、根本的な勘違い等あるかもしれません。
足りない情報がありましたら補足しますので、よろしくお願いします。