ブログダイエット:テーブル表示の高速化
はじめに
そこで、やってみる価値はありそうな簡単な方法から説明します。
今回は、テーブル(table)表示の高速化です。
テーブルを用いてレイアウトを行っている方向けの情報です。
exciteユーザならば、テーブルを用いないでレイアウトをしても、最新のコメント」と「最新のトラックバック」はテーブルなので、この技は利用できるかも。
excite以外でも利用できる技です。
でも、ちょっと難しいかもしれないのと、体感速度が得られない場合もあります。
(高スペックのマシンを利用している方は特にね。)
難易度:★★
(テーブル(table)の自動調整の恩恵にあずかっている方にとっては辛いかも・・・)
内容
テーブル(table)は全てを読み込んでから列幅を調整して表示を行うため、表示が遅くなることがあります。
しかし、テーブル(table)の第1行目のセル幅を正しく指定し、table-layout: fixedと指定することにより、テーブル(table)の表示を速くすることができます。
注意:table-layout: fixedを指定すると、第1行目の列幅を元に表示するため、列幅が正しくない場合は、テーブル(table)の列幅の自動調整が機能せずに、指定の通りに表示されます。したがって、サイトの表示が崩れることや、ブラウザによっては表示速度が遅くなることがありますのでご注意下さい。
詳しくは、以下のサイトをご覧下さい。
情報元
HTML クイックリファレンス>>
テーブルの表示の違い>>
指定方法
ちょっと試すには、HTML編集部分でtableにstyle="table-layout: fixed"を追加して表示速度を体感して下さい。もし、体感速度が速くなって表示も崩れていない場合はそのまま利用し続けることができます。
<table border="0" cellpadding="0" cellspacing="0" width="800" style="table-layout: fixed">
<tr><td width="150" valign="top">
exciteのブログのサイドバーに対しての指定方法
なお、widthの幅は標準サイズの150pxとしましたが、皆さんの環境に合わせて指定して下さい。
.MN table{width:150px;table-layout: fixed;}
.MN_L table{width:150px;table-layout: fixed;}
.MN_R table{width:150px;table-layout: fixed;}
おまけ
今日のポイント
- テーブル(table)に対してtable-layout: fixed;を指定することによりテーブルの表示速度を速くします。
- テーブルはtable-layout: fixed;を指定しないときには、テーブルを全て読み込んでからレイアウトを決定して表示します。従って、ユーザの指定がある程度違っていても自動で調整して見れるように表示します。
難易度:★★
ご注意
もし崩れる場合はこの技は控えて下さい。
よろしくお願いします。