- ベストアンサー
table、tr、tdタグの描画について
table、tr、tdタグがどのような解釈を経てブラウザ（ユーザエージェント？）によって描画されているのか？ をご教授いただきたく質問します。 （table、tr、tdタグの使用方法に関する質問ではありません） 例として、添付画像にサンプルを用意しました。 1セルの幅を決定出来るのは3セルの要素を解釈した後となると思うのですが、 そうなると、1セル→2セル→3セル→4セル という順番で要素と枠線が描画されるのではなく、 全ての要素を一度チェックした後に、各セルの座標を決定し、 要素と枠線を描画しているのではないか？と考えました。 しかし、同じものを2回チェックするのってスマートでないなあ・・・ 実際にはどのように解釈されているのだろう・・・ という思いで質問した次第です。 よろしくお願いします。
- PearlJam69
- お礼率58% (260/441)
- HTML
- 回答数6
- ありがとう数6
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (5)
- rukuku
- ベストアンサー率42% (401/933)
はじめまして ユーザーによる幅の指定のない場合には、 １．１行目を読み込んだ時点で各列の幅を決定する ２．表全体を読み込んだ後に各列の幅を決定する の２通りがあります。 これは table-layoutというプロパティで選択できます。（ブラウザによっては効かないものもあります） http://www.htmq.com/style/table-layout.shtml http://w3g.jp/css/table/table-layout http://www.tagindex.com/stylesheet/table/table_layout.html http://www.marguerite.jp/Nihongo/WWW/RefCSS/table-layout.html
お礼
ありがとうございます
- askaaska
- ベストアンサー率35% (1455/4149)
- askaaska
- ベストアンサー率35% (1455/4149)
InternetExplorerは<table>があると </table>を読みこむまで待って その構造を解析して表示するわ。 なので一発で綺麗に表示される反面 ページ全体が<table>でくくられていると いつまでも何も表示されないで いらいらするという欠点があるの。 昔のNetscapeNavigatorは気にせず 描画をはじめていたわ。 （昔のと言っているのは今は知らないから） そのため、読みこむ内容によって かくかくかくって描画が変わっていくのは面白かったわよ。 #2さんが見たのはきっとこれだと思うわ。 検証していないけどGoogle Chromeもこれじゃないかな。
お礼
ありがとうございます。 ＞その構造を解析して表示するわ。 コレは、構造を「HTMLパーサーによって解析して」と「レンダリングしている」、という理解でよいですか？ この手法を具体的に示しているサイトや書籍をご紹介いただけますでしょうか？ 特にtableタグに関する解析と表示方法を知りたいのです。 （ググってみましたが、無知なもので辿りつけませんでした。）
- suzuko
- ベストアンサー率38% (1112/2922)
＃１の方のを読んで、どこだったかすっげー回線速度の遅いPCで、１度表示されたテーブルが、後から中央線（１セルと２セルの間の線）だけがひょこっと右に移動して表示されていくのを見たような気が・・・ 思い違いかもしれません。むっちゃあやふやな情報ですみません。
お礼
ありがとうございます
- KDASH-XP
- ベストアンサー率46% (63/136)
昔ISDNなど回線が遅かった時代に、TABLEの表示テクニックでWIDTH属性を全部指定しておく(これは今も有効ですが)、や─属性名は忘れましたが─最初の方の行で表示幅を決めてしまう．．．ような属性指定があった記憶があります。 ということは、逆に言えば明示的に何も指定がない場合はやはり全ての要素を読み込んだ後に、表示サイズを計算しているのでは？と推測できますが．．．。 セルの中にJavaScriptを埋め込んで、どのタイミングで描画処理が行われているか？とか調べられたりしないかな？？とか思いました（なんとなく．．．ですが）。
お礼
ありがとうございます
関連するQ&A
- <tr>タグ、<td>タグ
テーブルでレイアウトを行い、htmlで背景色・cssで文字のスタイルを適用する場合、<tr>タグと<td>タグのどちらに記述するのがよいのでしょうか。IEだと大差は無いようなのですが、firefoxやNetscapeで違いが出てくるように感じます（特にfirefox）。 (1)cssで文字スタイルの場合、<table>タグに<table class="text">といった感じで問題ないでしょうか（table内の文字すべてclassがtextの場合）。それともやはり<td>タグひとつひとつにクラス指定した方が良いのでしょうか。 (2)テーブルに背景色を指定する場合、<tr>タグ・<td>タグのどちらに指定するのが良いのでしょうか。
- ベストアンサー
- HTML
- テーブルの一つのtdタグだけ、文字を小さく
テーブルの一つのtdタグだけ、文字を小さくしたい場合は、 この方法でいいのでしょうか？ <html> <head> <title></title> <STYLE type="text/css"> <!-- p { font-size: 20%; } '--> </STYLE> </head> <body> <table border=1 cellspacing=1 cellpadding=1> <tr><td>普通</td><td>普通</td></tr> <tr><td>普通</td><td><p>test</p></td></tr> </table> </body> </html>
- ベストアンサー
- CSS
- tdタグに何も入れなくとも幅を均一にする方法
<table border = "1"> <tr> <th>hoge</th> <td></td> </tr> </table> 上記のような場合、<td>タグ内には何も書かれてないので セルがつぶされた形で表示されますよね？ これを<th>タグ内のhogeと同じセルの幅で表示するにはどうすればいいですか？ style属性にwidth:100pxとかしてみたのですが無駄でした‥
- ベストアンサー
- HTML
- 一気に「テーブルの2列目のtdタグを右詰にする
<html> <head> <title>test</title> </head> <body> <table border=1> <tr><th>No</th><th>aaaaaaa</th></tr> <tr><td>1</td><td>bbb</td></tr> <tr><td>2</td><td>ccc</td></tr> </table> </body> </html> このようなテーブルで 右側の2列目のtdタグを右詰にしたいのですが、 一気に「テーブルの2列目のtdタグを右詰にする」と言う方法は有りますか? 今は <html> <head> <title>test</title> <style type="text/css"> td.example1 { text-align: right; } </style> </head> <body> <table border=1> <tr><th>No</th><th>aaaaaaa</th></tr> <tr><td>1</td><td class="example1">bbb</td></tr> <tr><td>2</td><td class="example1">ccc</td></tr> </table> </body> </html> このようにしていますが 一つ一つタグを付けるのは非効率的と思っています。
- ベストアンサー
- HTML
- tableタグについて
<table width="700" border="0"> <tr><td width="700">あああああああ</td></tr> <tr><td width="200">いい</td><td width="500">ううううう</td></tr> </table> このタグですと【ああああああ】の部分が２段になります。 多分<td width="200">のためやと思うのですが、 <tr><td width="200">いい</td><td width="500">ううううう</td></tr> の部分を <tr><td width="700"><table width="700"><tr><td width="200">いい</td><td width="500">ううううう</td></tr></table></td></tr> にすると表示されます。 この方法以外にもっと簡単に表示できる方法はないでしょうか お願いします。
- ベストアンサー
- HTML
- JavaScriptで特定のtdタグにclass名をつけたい
指定のdiv内にある一行目（もしくは、最初の3つ）のtdタグに対して JavaScriptでClass名を付けたいのですが、どのようにすればよいでしょうか？ 【HTML参考】 <div id="box"> <table> <tr> <td>セル１</td> <td>セル２</td> <td>セル３</td> </tr> <tr> <td>セル４</td> <td>セル５</td> <td>セル６</td> </tr> </table> </div> 上記のような時、div#box内の「セル１～３」に対してclass名を付けたいと言った場合です。 よろしくお願いいたします。
- 締切済み
- JavaScript
- テーブルの行の高さを指定する時全てのtdタグに？
スタイルシートでテーブルの行の高さを指定する時は、 全てのtdタグにスタイルシートを指定するべきか、 １つだけ（一番左だけ）指定すればいいのかわからないので押してください。 全てのtdタグに指定しても、一つのtdタグに指定しても、結局はその行の高さは指定した高さになります。 コードを書く上でどちらが適切か教えてください。 -------------------------------------------------- <style type="text/css"> td.test {height: 50px;} </style> <body> １の例<br>（2列ともclass="test"を入れた）<br> <table border=1> <tr><td class="test">1</td><td class="test">2</td></tr> <tr><td class="test">3</td><td class="test">4</td></tr> </table> <br><br> ２の例<br>（一番左の列だけclass="test"をいれた）<br> <table border=1> <tr><td class="test">1</td><td>2</td></tr> <tr><td class="test">3</td><td>4</td></tr> </table> <br><br> ３の例<br>（スタイルシートは何も指定していない）<br> <table border=1> <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr> </table>
- ベストアンサー
- HTML
- HTML <td></td>タグ セル内余白を無くす方法
次の様なプログラムで画像(a.gif 30x30ピクセル)を表示させると、画像とセル枠線との上下の間に余白ができる。この余白を無くす方法？ <table border="1"> <tr><td rowspan="2"><img src="a.gif"></td><td><br></td></tr> <tr><td rowspan="2"><img src="a.gif"></td></tr> <tr><td rowspan="2"><img src="a.gif"></td></tr> <tr><td rowspan="2"><img src="a.gif"></td></tr> <tr><td><br></td><td> </table> テーブル内を２列にして、画像を縦方向に画像高さの半分だけズラして表示したい。 セル結合をしないで、ごく普通に２行２列にすると画像とセル枠との間には余白が生じない。 セル結合した場合に生ずる余白を無くす方法を教えて下さい。エディタは「メモ帖」、ＯＳはWinXP、ブラウザはInternet Explorer６です。
- ベストアンサー
- ホームページ作成ソフト
- tableタグについて
どのようのウィンドー幅になっても全ての文字が表示させたいのですが、以下のタグの何処がおかしいのでしょうか。 <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td> <div align=center> <table width="700"> <tr> <td>あいうえお・かきくけこ・さしすせそ</td> </tr> </table> </div> </td> </tr> </table> この場合、ウィンドー枠を右から左に向かって縮小していくと、「あいうえお・かきくけこ・さしすせそ」の”そ”から順に見えなくなります。 そのではなくて、 あいうえお かきくけこ さしすせそ になり、 さらに縮小すると あい うえ おか かき くけ こさ しす せそ の様な感じで すべてが表示されるようにしたいのですが、どのようなタグを挿入すれば良いのでしょうか？ お願いします。
- ベストアンサー
- ホームページ作成ソフト
- TRタグの余白をcssで設定するには
TRタグとTRタグの間に余白とつけて表示したいのですが、 CSSでmarginが効かず、paddingはボーダーがTDタグの下に設定してあるので、 文字と線の間が開いてしまいます。 margin-bottomが効けばいいのですが、どうすれば表示することができますか？ <table> <tr> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> </tr> </table>
- ベストアンサー
- HTML
- ワードファイルを指定範囲で印刷できない問題についてお困りの方へ
- 使用中のブラザー製品（DCP-J4140N）において、ユーザーが指定した範囲での印刷ができないトラブルが発生しています。ユーザーが試したことやエラーメッセージについても解説しています。
- お使いの環境（Windows 11）や接続方法（無線LAN）によるトラブルではない場合、ワードファイルの指定範囲での印刷ができない原因を特定するためには、関連するソフトや設定についても確認する必要があります。設定に問題がない場合は、お手数ですがメーカーサポートへのお問い合わせをおすすめします。
お礼
HTML仕様書の存在を再認識しました。 ありがとうございます。