勉強中の身なんですが・・
このように設定した場合文章1と文章2が大きく開く状態になるんですが、なぜでしょうか?
また文章1セルの真ん中に表示され文章2が左にひょうじされるのも分りません・・・・
いろいろ調べてみたんですが中々納得ができなくて・・・
特にこうういう風にやりたいとかは特になくて、なんでこうなるのかが知りたいのです。
詳しい方説明して頂けるとありがたいです。すみませんがよろしくお願い致しますm(。。)m
「HTML」
<table>
<tr>
<th>見出し</th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td>内容</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
「CSS]
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ベストアンサー
- 回答日時:
分からないときは、仕様書をチェックすることが必要です。
昔のニュースグループの時代でしたら、ひとこと「man!」でお仕舞いです。(Manualを読めということ)。この基本は今でも変わりません。
【引用】____________ここから
HTMLの表モデルは、著者の助けを借りることで、ユーザエージェントが、表のデータ全体が到着するのを待つのではなく、行単位でデータが届く毎に、表を逐次的にレンダリングできるように設計されている。
ユーザエージェントが1工程で表を整形できるようにするため、著者はユーザエージェントに次の内容を知らせねばならない。
* 表に含まれる列の個数。 この情報を提供する具体的な方法は、表中の列数計算の項を参照されたい。
* 各列の幅。 この情報を提供する具体的な方法は、列幅の計算の項を参照されたい。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Tables in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
で列幅の計算をみると
【引用】____________ここから
著者が列幅情報を指定していない場合、ユーザエージェントは適切な幅を割り当てるために列のデータ全体が届くのを待たねばならないため、逐次的整形をすることはできない。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Tables in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
HTMLは、可能な限り逐次表示が出来るようにすることが推奨されています。それはデータがすべて届く前にレンダリングできるようにするためです。
ところが、お示しのHTMLには、列幅の指定がありませんから、データーが届く都度、上記に書かれている順序で枠幅を決めていきます。
結果的に、内容がある列は広くなり、ない列は狭くなります。
また、<th>と<td>の表示の違いは、ブラウザのもつスタイルシートによって変化しますが、
<!ELEMENT (TH|TD) - O (%flow;)* -- table header cell, table data cell-->
ですから、THは見出しとして、TDは内容として分かるようにレンダリングされるのです。すなわち見出しセル(TH)は太字でセンターに、TDは左寄せに・・
もちろん、スタイルシートで自由に変更は出来ます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- JavaScript 画面に表示したらアニメーションを開始したい 3 2023/01/13 15:38
- JavaScript htmlとcssで分数を表示後、分数の右側に文書を書きたい 1 2022/04/28 10:09
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
html でのテキスト結合について
-
tableタグとformタグの組み合わせ
-
商品詳細を横並びに表示する方法
-
セルの高さを固定するには?
-
テーブルの一部分のセルだけに...
-
TDタグ内での均等割付の仕方
-
テーブルの枠線に色が付かない
-
Tableタグで作成した表の縮小
-
table内の画像を中央寄せ、のせ...
-
td width="180" と固定してるの...
-
divで囲んだ文字が消える
-
テーブルのセル内の隙間を取れ...
-
td要素内のdiv要素をセンタリン...
-
入れ子にしたテーブルをheight1...
-
cssで、テーブルのtdの中の文字...
-
ブラウザによってテーブルのセ...
-
Firefoxを使ってるのですがズー...
-
TABLEで表示する時に、一定の個...
-
商品一覧をtableタグで表示する
-
太字にするやり方
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
html でのテキスト結合について
-
tableタグとformタグの組み合わせ
-
テーブルの一部分のセルだけに...
-
同じクラス名はつけないほうが...
-
テーブル内のテーブルの高さを...
-
XHTMLに関する質問 順序が逆に...
-
Tableタグ内のspan styleが適応...
-
Tableタグで作成した表の縮小
-
ブラウザによってテーブルのセ...
-
cssで、テーブルのtdの中の文字...
-
td要素内のdiv要素をセンタリン...
-
vbscriptで時計を作りたい
-
formのinputなどの幅100%指定
-
Firefoxを使ってるのですがズー...
-
テーブルの枠線に色が付かない
-
divで囲んだ文字が消える
-
TDタグ内での均等割付の仕方
-
表とリスト(ulとtable)の違い...
-
firefoxで「height: 100%;」と...
-
<img>タグにCSSのclass設定可能?
おすすめ情報