table、tr、tdタグがどのような解釈を経てブラウザ(ユーザエージェント?)によって描画されているのか?
をご教授いただきたく質問します。
(table、tr、tdタグの使用方法に関する質問ではありません)
例として、添付画像にサンプルを用意しました。
1セルの幅を決定出来るのは3セルの要素を解釈した後となると思うのですが、
そうなると、1セル→2セル→3セル→4セル という順番で要素と枠線が描画されるのではなく、
全ての要素を一度チェックした後に、各セルの座標を決定し、
要素と枠線を描画しているのではないか?と考えました。
しかし、同じものを2回チェックするのってスマートでないなあ・・・
実際にはどのように解釈されているのだろう・・・
という思いで質問した次第です。
よろしくお願いします。
No.6ベストアンサー
- 回答日時:
tableの表示方法は、ブラウザ依存なのですが、HTMLの仕様では、逐次表示が可能なようにtableのサイズが早く決められるようにせよと書かれています。
視覚系ユーザエージェントによる表の整形 ( 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 … )]より
No.5
- 回答日時:
はじめまして
ユーザーによる幅の指定のない場合には、
1.1行目を読み込んだ時点で各列の幅を決定する
2.表全体を読み込んだ後に各列の幅を決定する
の2通りがあります。
これは
table-layoutというプロパティで選択できます。(ブラウザによっては効かないものもあります)
http://www.htmq.com/style/table-layout.shtml
http://w3g.jp/css/table/table-layout
http://www.tagindex.com/stylesheet/table/table_l …
http://www.marguerite.jp/Nihongo/WWW/RefCSS/tabl …
No.4
- 回答日時:
Web上にレンダリング仕様書ってあるのかしら。
欲しいなら直接問い合わせた方がいいと思うわ。
描画は独自技術だったりするから
技術的な情報を得るのは難しいと思うけど
<table>の表示タイミングくらいなら
教えてもらえると思うわ。
No.3
- 回答日時:
InternetExplorerは<table>があると
</table>を読みこむまで待って
その構造を解析して表示するわ。
なので一発で綺麗に表示される反面
ページ全体が<table>でくくられていると
いつまでも何も表示されないで
いらいらするという欠点があるの。
昔のNetscapeNavigatorは気にせず
描画をはじめていたわ。
(昔のと言っているのは今は知らないから)
そのため、読みこむ内容によって
かくかくかくって描画が変わっていくのは面白かったわよ。
#2さんが見たのはきっとこれだと思うわ。
検証していないけどGoogle Chromeもこれじゃないかな。
ありがとうございます。
>その構造を解析して表示するわ。
コレは、構造を「HTMLパーサーによって解析して」と「レンダリングしている」、という理解でよいですか?
この手法を具体的に示しているサイトや書籍をご紹介いただけますでしょうか?
特にtableタグに関する解析と表示方法を知りたいのです。
(ググってみましたが、無知なもので辿りつけませんでした。)
No.1
- 回答日時:
昔ISDNなど回線が遅かった時代に、TABLEの表示テクニックでWIDTH属性を全部指定しておく(これは今も有効ですが)、や─属性名は忘れましたが─最初の方の行で表示幅を決めてしまう...ような属性指定があった記憶があります。
ということは、逆に言えば明示的に何も指定がない場合はやはり全ての要素を読み込んだ後に、表示サイズを計算しているのでは?と推測できますが...。
セルの中にJavaScriptを埋め込んで、どのタイミングで描画処理が行われているか?とか調べられたりしないかな??とか思いました(なんとなく...ですが)。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
TABLEのセルの中の文字を行単位...
-
ホームページのテキストを折り...
-
<th>タグを使っても太字にしな...
-
HTMLのテーブルをExcelにCopy&P...
-
CSSで特定のテーブルだけに...
-
テーブルとテーブルの間隔について
-
文字を線で囲みたい
-
ラインを端から端まで画面いっ...
-
tableのcellpadding="0" cellsp...
-
画面サイズを取得し、テーブル...
-
同じ幅指定のつもりなのに、ブ...
-
画面幅に合わせてテーブルのカ...
-
<fieldset>タグについて
-
テーブルタグの中にdivを含めて...
-
tableタグとformタグの組み合わせ
-
html でのテキスト結合について
-
tableにul,または,olを入れられ...
-
テーブルの行を折りたたみたい...
-
【CSS】縦横スクロールテーブル...
-
テーブルの横に画像を
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルとテーブルの間隔について
-
TABLEのセルの中の文字を行単位...
-
<th>タグを使っても太字にしな...
-
CSSで特定のテーブルだけに...
-
HTML5で、テーブル内tdタグの高...
-
table表を横に並べる際の間隔指定
-
同じ幅指定のつもりなのに、ブ...
-
tableのcellpadding="0" cellsp...
-
html5のテーブル内でdivのタブ...
-
<fieldset>タグについて
-
textareaの外側の文字が下付き...
-
テーブル内のセル間にスペース...
-
画面幅に合わせてテーブルのカ...
-
HTMLのテーブルをExcelにCopy&P...
-
テーブルデータを折り返して表...
-
ホームページのテキストを折り...
-
フォームタグのプルタウンの隙...
-
HTML tableのセルにtextareaを...
-
table 幅固定で、端までいった...
-
(HTML)Tableを任意の位置に置...
おすすめ情報