テーブルの細かい枠組



0   名前: らうる : 2006/09/07(木) 09:10  ID:lUvln6xL
初心者です。
作りたい表があるのですが、上手なコーディングが解りません。
一番上の行は2列をcolspan="2"でマージさせ、表題です。
それぞれの項目はインデントが設定されているので"padding: 8px 0 6px 11px;"としています。
幅がそれぞれ(1列目)120px、(2列目)152pxと決まっているのでどうして良いか解らず、
#name{ width: 120px; }
#rubi{ width: 152px; }
として、<td id="name">とやってみました。

もっと綺麗な書き方がありましたら教えてください。
どうぞ宜しくお願いします。



今作っているもの
table, td{
width: 272px;
height: auto;
border: 1px #38528C solid;
border-collapse: collapse;
padding: 8px 0 6px 11px;
vertical-align: top;
}

th{
height: 20px;
border-collapse: collapse;
background-color: #DCE6F1;
}
#name{ width: 120px; }
#rubi{ width: 152px; }




<table>
<tr>
<th colspan="2">表題</th>
</tr>
<tr>
<td id="name">1</td>
<td id="rubi">11</td>
</tr>
<tr>
<td id="name">2</td>
<td id="rubi">22</td>
</tr>
</table>



1   名前: sevi- : 2006/09/07(木) 09:10  ID:9J5RKOHs
取りあえず,各行の最初のtd要素という指定なら以下の記法が考えられる.

td:first-child
{
width:108px;
}

あと表のセルへのwidth指定はpaddingやborder値を含まない内容までを指すと思ったので,
その分値を引かないと求める幅にならないと思ったぞ
(注:互換モードのIE除く)

2   名前: K+S : 2006/09/07(木) 09:10  ID:nROqylMa
col要素(あるいはcolgroup要素)で対応できるものではないのでしょうか…?

3   名前: らうる : 2006/09/07(木) 09:10  ID:lUvln6xL
>sevi-さん
width指定の求める幅、ご指摘の通りでした。
どうもありがとうございます。

>K+Sさん
colgroup要素を使ってすっきりした文になりました。
どうもありがとうございました。


一覧へ戻る