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

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 ページのニーズを満たすことができます。

<<:  よく忘れられがちな CSS のヒント 26 選

>>:  HTML内のフレームセットタグが正常に表示されない原因の解析と解決方法

推薦する

Docker に MySQL をデプロイする例

目次1 コンテナクラウドとは何ですか? 2 Dockerの紹介3 dockerを使ってMySQLをイ...

MySQL EXPLAIN ステートメントの使用例

目次1. 使用方法2. 出力結果1.id 2.選択タイプ3.表4.パーティション5.タイプ6.可能な...

TypeScript のマップされた型とより優れたリテラル型推論について説明します。

目次概要マップされた型を使用して Object.freeze() を構築するマッピングタイプの構文は...

MySql の忘れたパスワードの変更方法はバージョン 5.7 以上に適しています

1. まずmysqld.exeプロセスを停止します2. cmd を開き、mysql の bin ディ...

Homebrewを使用してMacにMySQLをインストールするときにログインできない問題を解決する

お使いのコンピュータが Mac の場合、homebrew を使用して MySQL をインストールする...

Vue の親子コンポーネントの値転送と一方向データフローの問題の詳細な説明

目次序文1. 親コンポーネントが子コンポーネントに値を渡す2. サブコンポーネントのprops型制約...

2 級コンピュータ試験のための MySQL の知識ポイントとよく使用される MYSQL コマンド

2級コンピュータ試験のMySQL知識ポイントの基礎、一般的なMYSQLコマンドは次のとおりです。よく...

Windows 10 システムで nginx ファイル サーバーを構成するためのグラフィック チュートリアル

Nginx の公式 Web サイトから Windows バージョンの Nginx をダウンロードしま...

Vant Uploaderは1枚以上の写真をアップロードするコンポーネントを実装します

この記事では、1枚以上の写真をアップロードするためのVant Uploaderコンポーネントを紹介し...

MySQL の指定文字によるマージと分割の例のチュートリアル

序文指定した文字による結合または分割は一般的なシナリオです。MySQL では結合の記述は比較的簡単で...

MySQL共通インデックスとユニークインデックスの選択に関する詳細な分析

各人が固有の携帯電話番号で登録し、ビジネス コードによって重複する携帯電話番号が 2 つ書き込まれな...

JavaScript 関数型プログラミングの基礎

目次1. はじめに2. 関数型プログラミングとは何ですか? 3. 純粋関数(関数型プログラミングの基...

HTML 学習ノート - HTML 構文の詳細な説明 (必読)

1. HTML マークアップ言語とは何ですか? HTML は、Web ページの情報を表すマークアッ...

Telnet は Alpine イメージの busybox-extras に移動されました

Alpine イメージの telnet はバージョン 3.7 以降、busybox-extras パ...

Linux netstatコマンドの詳細な説明

目次Linux netstat コマンド1. TCP接続ステータスの詳細な説明2. コマンド形式3....