テーブルの中の文字の配置について

質問

いつもお世話になっています。
テーブルの中の文字の配置について教えて下さい。
会社のサイトリニューアルに当たり、ネット検索して商用利用OKのテンプレートをダウンロードし、カスタマイズしています。
このテンプレートにはテーブル要素がなかったので自分でCSSに記述を付け加えたのですが、文字の配置が思うようにいきません。

２列の１０行の表で左に項目(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にはあまり詳しくなく、タグを見ながらだいたいの規則性を読んでいますので、根本的な勘違い等あるかもしれません。
足りない情報がありましたら補足しますので、よろしくお願いします。

回答No.3

ORUKA1951 · ベストアンサー

THはtableの見出しですから、THでなければなりません。デザインのために要素を変えるのは間違い。
div#main table {
　　margin: 30px 50px 30px 30px;
　　border: solid 1px #666;
　　border-collapse: collapse;
}
div#main table th,div#main table td {
　　padding: 10px;
　　font-size:0.75em;
　　line-height: 1.7;
　　border: solid 1px #666;
　　text-align: left;
　　vertical-align: top;
/* THの、font-weightを変えたくなければ以下は消す */
　　font-weight: normal;
}
でよい。

お礼

cssの記述までして頂いてありがとうございます。
おかげでやっと左寄せ、上寄せになりました。
これでやっと先に進めます。
助かりました。ありがとうございました。

回答No.2

noname#106515

text-valignじゃなくてvertical-align

お礼

vertical-alignだったんですね。
回答ありがとうございました。

回答No.1

akimikayu

<TH>タグは、TableHeaderの略で、セルの中央に太字で表示されます。
<TH>で記述しているところをすべて<TD>に変更してみてください。

お礼

回答ありがとうございます。

実は

div#main table th {
text-align:left;
text-valign: top;
}

の記述を追加する前に、<th>を全部<td>に変えてみたのです。
確かにこれで左寄せにはなったのですが、上下の位置は変わらず中央配置のままでした。

なので<th>に戻して記述を追加したわけなのですが。
う～ん、何がまずいのか分からないです。