ネストした表を使用しない理由

ネストした表はWebページを遅らせる

Webページは高速にダウンロードする必要がありますが、ネストした表はプロセスを遅くする可能性があります。 より多くの人々がブロードバンドや高速インターネットを使用していることを誰にも知らせないでください。ページの読み込み速度を心配する必要はありません。 ウェブ上のコンテンツの量によって、ゆっくりと読み込まれるページまたはサイトは、すぐに読み込まれるページやサイトよりも訪問者が少なくなります。 スピードは非常に重要です。

ネストした表とは何ですか?

ネストした表は、内部に別の表を持つHTML表です。 例えば:



第1列1
第2列第2列
第3列第3列


列1




ネストした表の列1
ネストした表の列2



列3

列1
列2
列3

ネストされたテーブルにより、ページのダウンロード速度が低下します

Webページ上の単一のテーブルでは、ページがゆっくりと(理由のもとで)ダウンロードされることはありません。 しかし、あるテーブルを別のテーブルに配置すると、ブラウザがレンダリングするのがより複雑になるので、ページの読み込みが遅くなります。 そして、あなたが入れ子にしたテーブルが多いほど、ページの読み込みが遅くなります。

表を含むページを作成するときは、表内の表が多いほど、ページの読み込みが遅くなることに注意してください。 通常、ページが読み込まれると、ブラウザはHTMLの先頭から開始し、ページの下に順番に読み込みます。 ただし、ネストした表では、表全体が表示される前に表の終わりを検出する必要があります。

レイアウトのテーブル

Webページのレイアウト用にテーブルを使用すべきではありません 。 ほとんどの場合、ネストした表を使用する必要があるため、表レイアウトWebページはCSSでレンダリングされた同じデザインよりも読み込み速度が遅くなります。

また、有効なXHTMLを記述しようとしている場合は、レイアウト用にテーブルを使用しないでください。 表は表形式のデータ (スプレッドシートなど)用であり、レイアウト用ではありません。 代わりにCSSをレイアウトに使用する必要があります .CCSSのデザインはより迅速にレンダリングされ、有効なXHTMLを維持するのに役立ちます。

より速いローディングテーブルの設計

複数の行を持つ表を設計する場合、各行を別々の表として書き込むと、より迅速にロードされることがあります。 たとえば、次のような表を書くことができます。




一番上の行

左の列
右の列

しかし、同じテーブルを2つのテーブルとして作成した場合、テーブル全体を一度にレンダリングするのではなく、ブラウザが最初にレンダリングしてから2番目のレンダリングを行うため、ロードが速くなるように見えます。 トリックは、各テーブルが同じ幅と他のスタイル(パディング、マージン、ボーダーなど)を持つことを確認することです。



一番上の行




左の列
右の列

ネストした表を1つの表に変換する

これはすべて良い情報だと感じるかもしれませんが、テーブルには別のテーブルがネストされている必要あります。 これは当てはまりますが、テーブルセルのand属性を使用すると、ネストした表を少し複雑な単一表に変換することができます。 たとえば、一番上のネストした表では、これをcolspan属性だけを持つ単一の表に変換できます。



第1列1


colspan = "2" >第2列目
第3列第3列

列1
ネストした表の列1
ネストした表の列2
列3

列1
colspan = "2" >列2
列3

このテーブルには、ネストしたテーブルよりも少ない文字を使用する利点もあります。そのため、そのテーブルもより高速にダウンロードされます。