divとtableの選択と組み合わせ方について簡単に説明します

ページレイアウトは、Web ページを扱い始めた頃からずっと気にかけていたことです。初期のテーブル構造のページから DIV、そして DIV+Table へと、ニーズは変化してきましたが、目的は変わっていないと言えます。なぜこう言うのでしょうか? 単純なものから複雑なものへ、そして複雑なものから単純なものへ、単純なアプリケーションから複雑なアプリケーションへ、すべてが需要を中心に行われるのは明らかです。多くの開発者やデザイナーは、ページレイアウトを開発する際に、レイアウトが合理的かどうか、構造がコンパクトかどうか、十分なスケーラビリティがあるかどうか、読みやすいかどうかなど、いくつかの点を考慮する必要があります。 Web を構築するために Table と DIV を適切に使用する方法は、私たちが議論する重要な問題です。これはいくつかの異なる観点から見ることができます:

1. ポジショニング

まず、厳密に言えば、テーブルと div はどちらも合理的なレイアウト方法です。テーブルの価値を否定したり、div にはメリットしかなくデメリットがないことを否定したりすることはできません。 Web アーキテクチャでは、テーブルと div の両方を使用できると言えます。重要なのは、Web のニーズをどこに位置付けるかです。

Web ページがサイトにどの程度の影響を与えるかを考慮する必要があります。たとえば、サイトが大量のアクセスとデータを対象としている場合 (もちろん、キャッシュの問題についてはここでは説明しません)、特にループが多い場合は、アーキテクチャによってテーブルの使用が削減されるのが一般的です。もちろん、テーブルも便利です。複雑なサイトでは、div+css では表現したいコンテンツを正確に定義することが難しい場合があります。この場合、テーブルが適切な選択です。これは、開発目標を達成しながら必要なコストを確保するために、開発前に考慮する必要がある問題でもあります。同様に、div + css を使用して複雑なページを実装することは、テーブルを使用するほど簡単ではないことがよくあります。

2. 特徴

table と div にはそれぞれ独自の特性があります。これは、開発者とデザイナーの価値観が異なることも意味しており、これは開発者とデザイナーにとって非常に重要です。

テーブルを使用すると、構造化されたインターフェースを簡単に構築できます。テーブル独自のパラメータを定義することで、必要な効果を実現するページ レイアウトをすばやく定義できます。もちろん、CSS の調整は比較的軽減できます。欠点は、拡張性と可読性が比較的低いことです。拡張性の低さは、メンテナンスと変更に反映されます。テーブルレイアウトが複雑でページ数が多いサイトでは、要件が変わると開発者は困惑します。変更要件が多すぎると、Web インターフェイスの開発作業が完全に台無しになります。読みやすさが悪い、これも相対的なものです。例を見てみましょう。同じエフェクトテーブルとdivを使用してページを表示します。

- - テーブル - -

<テーブルの幅="300" 境界線="0" セル間隔="0" セルパディング="0">

<tr>

<td rowspan="3" bgcolor="#FF0000"> </td>

<td> </td>

<td rowspan="3" bgcolor="#0000FF"> </td>

</tr>

<tr>

<td> </td>

</tr>

<tr>

<td> </td>

</tr>

</テーブル>

- - テーブル - -

－－－－div 1－－－－

<div style="width:100px;background-color:red;"></div>

<div style="width:100px;background-color:white;">

<div></div>

<div></div>

<div></div>

</div>

<div style="width:100px;background-color:blue;"></div>

－－－－div 1－－－－

－－－－div 2－－－－

<div style="display:inline-table; width:300px;">

<div style="float:left; width:200px; clear:left">

<div style="display:inline-table;">

<div style="float:left;clear:left;width:100px; background-color:red;"></div>

<div style="float:right; clear:right; width:100px;">

<div></div>

<div></div>

<div></div>

</div>

</div>

</div>

<div style="float:right; width:100px; clear:right; background-color:blue;"></div>

</div>

－－－－div 2－－－－

...

表は表現がより「厳密」であり、制限があります。複雑な構造を表現する場合、理解するのが非常に難しくなる可能性があります。多くの場合、当社の Web サイトのプログラム コンテンツは非常に大きく、開発者がコードの明確な概要をすぐに頭の中で把握することは非常に困難です。

div については、HTML 構文における div の意味と機能はわかっています。ページ レイアウトを実装するために使用する場合、CSS によってほぼ完全にサポートされます。特に、ユーザーに対する視覚効果に非常に厳しい要件があるターゲットを絞った Web の場合、div を単独で使用することはできないと言えます。div の使用は、専門的な CSS パラメータと組み合わせて実装する必要があります。前の例から、div レイアウトはより柔軟性があり、シンプルにも複雑にもできることがわかります。 CSS と DIV を組み合わせることで、同じ表示効果をさまざまな方法で実現できます。その利点は、その強力な拡張性です。開発者やデザイナーは、対応する CSS を調整するだけで、レイアウトをまったく新しいものにすることができます。これは、テーブルでは到底不可能なことです。しかし、比較的複雑な構造を持つパーツの場合、div+css 開発は難しい場合が多く、単純な div と css エフェクトを書くのに半日かかります。この点では、Table の方がはるかに優れています。dw などの WYSIWYG ソフトウェアを使用すると、div+css で半日かかるものを簡単に作成できます。

3. 互換性

ブラウザの互換性は、すべての Web サイトにとって重要なトピックです。テーブルと div の互換性の点では、テーブルの方が利点が多いです。

私たちがよく使用する IE および FF ブラウザは、DIV CSS 設定について非常に厳しいです。同じ CSS でも 2 つのブラウザで結果が異なる場合が多く、これは開発者にとって大きな問題です。ユーザーのブラウザを除外することは不可能なので、開発中に構文とレイアウト方法を調整することしかできません。 Div では CSS を厳密にサポートする必要がありますが、table ではそれほど考慮する必要はありません。テーブルの厳密さはさまざまなブラウザによく反映されます。

私たちの位置づけ、機能、互換性の問題を考慮した後、レイアウト方法と採用するアーキテクチャについて、誰もが明確に理解できるはずです。実際の開発者にとっては、それをうまく活用することが最も重要な概念であると言いたいです。開発や設計作業を行う際に、自分の技術的能力を盲目的に優先したり、発揮したりするのではなく。 div では、その柔軟で明確なアーキテクチャ特性を十分に発揮し、table の厳密さと連携して、さまざまな Web ページのニーズを満たすことができます。