ＣＳＳについて 初心者です。

質問

勉強中の身なんですが・・
このように設定した場合文章１と文章２が大きく開く状態になるんですが、なぜでしょうか？
また文章１セルの真ん中に表示され文章２が左にひょうじされるのも分りません・・・・
いろいろ調べてみたんですが中々納得ができなくて・・・
特にこうういう風にやりたいとかは特になくて、なんでこうなるのかが知りたいのです。
詳しい方説明して頂けるとありがたいです。すみませんがよろしくお願い致しますｍ（。。）ｍ
「ＨＴＭＬ」
<table>
<tr>
<th>見出し</th>
<th></th>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
<tr>
<td>内容</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td></td>
</tr>
</table>

「ＣＳＳ］
table{
width:250px;
border-collapse:collapse;
border-width:1px;
border-style:solid;
border-color:#000000;
border-spacing:0;
}

th{
border-width:1px;
border-style:solid;
border-color:#000000;
}

td{
border-width:1px;
border-style:solid;
}

回答No.1

ORUKA1951 · ベストアンサー

分からないときは、仕様書をチェックすることが必要です。
　昔のニュースグループの時代でしたら、ひとこと「man!」でお仕舞いです。(Manualを読めということ)。この基本は今でも変わりません。

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLの表モデルは、著者の助けを借りることで、ユーザエージェントが、表のデータ全体が到着するのを待つのではなく、行単位でデータが届く毎に、表を逐次的にレンダリングできるように設計されている。
ユーザエージェントが1工程で表を整形できるようにするため、著者はユーザエージェントに次の内容を知らせねばならない。
* 表に含まれる列の個数。 この情報を提供する具体的な方法は、表中の列数計算の項を参照されたい。
* 各列の幅。 この情報を提供する具体的な方法は、列幅の計算の項を参照されたい。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Tables in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.2 )］より

　で列幅の計算をみると
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
著者が列幅情報を指定していない場合、ユーザエージェントは適切な幅を割り当てるために列のデータ全体が届くのを待たねばならないため、逐次的整形をすることはできない。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Tables in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#column-width )］より

　HTMLは、可能な限り逐次表示が出来るようにすることが推奨されています。それはデータがすべて届く前にレンダリングできるようにするためです。
　ところが、お示しのHTMLには、列幅の指定がありませんから、データーが届く都度、上記に書かれている順序で枠幅を決めていきます。
　結果的に、内容がある列は広くなり、ない列は狭くなります。

　また、<th>と<td>の表示の違いは、ブラウザのもつスタイルシートによって変化しますが、
<!ELEMENT (TH|TD) - O (%flow;)* -- table header cell, table data cell-->
ですから、THは見出しとして、TDは内容として分かるようにレンダリングされるのです。すなわち見出しセル(TH)は太字でセンターに、TDは左寄せに・・
　もちろん、スタイルシートで自由に変更は出来ます。

お礼

基本的なことだったんですね。丁寧にありがとうございました。

回答No.2

noname#83877

文章１と文章２が大きく開くというのはよくわかりませんが、tdの中の文章が左揃えになるのはブラウザのデフォルトの指定でtdにtext-align:left;が指定されているためです。

お礼

ありがとうございました。勉強になります。