テーブルレイアウトの長所と短所、そして推奨されない理由

テーブルレイアウトの長所と短所、そして推奨されない理由
テーブルの欠点

1. テーブルは他の HTML タグよりも多くのバイトを占有します。 (ダウンロード時間が遅くなり、サーバーのトラフィック リソースがさらに消費されます。)

2. Tablelle はブラウザのレンダリング エンジンのレンダリング順序をブロックします。 (ページの生成が遅れ、ユーザーの待ち時間が長くなります。)

3. 表に画像を表示する場合は、1 つの論理画像を複数の画像に分割する必要があります。 (設計の複雑さが増し、ページの読み込み時間が長くなり、HTTP セッションの数が増加します。)

4. 一部のブラウザでは、表内のテキストをコピーする際に問題が発生する場合があります。 (これはユーザーを困惑させます。)

5. テーブルは、内部レイアウト属性の一部 (<td> 内の要素の高さ 100% など) の有効性に影響します (これにより、ページ デザインの自由度が制限されます)。

6. CSS を学習すると、ページレイアウトにテーブルを使用するのがより面倒になることがわかります。 (最初に CSS を少し学習すると、後で多くの時間を節約できます。)

7. テーブルはページレイアウトに対して意味的に正しくありません。 (これはコンテンツではなくプレゼンテーションについて説明します。)

8. テーブルコードは読者を困惑させます。 (CSSが使えないだけでなく混乱してしまいます)

9. テーブルは一度デザインされると、そのデザインが死んでしまい、CSS で新しい外観を与えることが難しくなります。

テーブルの利点

状況によっては、Table を使用するのが 100% 適切かつ正しい場合があります。たとえば、表を作成するために table を使用することはまったく正しいです。

テーブルを使用するかどうか決められない場合は、上記の点を参考にすれば答えが見つかると思います。

<<:  momentJs を使用してカウントダウン コンポーネントを作成する (サンプル コード)

>>:  Linux での Jenkins の詳細なインストール手順

推薦する

JavaScript のシングルトン デザイン パターン

目次1. デザインパターンとは何ですか? 2. デザインパターンの5つの設計原則(SOLID) 3....

Deepin で virtualenv をインストールして使用するチュートリアル

virtualenv は、分離された Python 仮想環境を作成するためのツールです。独立したディ...

JavaScript の new 演算子を自分で実装する方法

目次コンストラクタ新しいオペレーター自分で新しいものを実装するコンストラクタnew を導入する前に、...

Vueはコードのハイライトを実現するためにモナコを使用しています

Vue 言語と要素コンポーネントを使用して、コード コンテンツの入力を必要とし、ハイライト表示が可能...

MySQL (8 および 5.7) の Docker インストール

この記事では、Dockerを使用してMySQLデータベースとリモートアクセス構成をデプロイする方法を...

JavaScript におけるイベント バブリング メカニズムの詳細な分析

バブリングとは何ですか? DOM イベント フローには、イベント キャプチャ ステージ、ターゲット ...

docker run によって起動されたコンテナがハングしてデータが失われた場合の対処方法

シナリオの説明あるシステムでは、機能サービスはdocker stack deploy xxxで起動し...

ウェブサイトのフロントエンドをエレガントでユーザーにとって魅力的なものにする方法

ウェブフロントエンドのウェブサイトの気質は感情であり、言葉なしでユーザーを魅了できる感情です。では、...

MySQLステートメントを監視する方法の詳細な説明

クイックリーディングSQL ステートメントを監視する必要があるのはなぜか、監視方法と監視手段について...

ウェブページサイズに関する調査

<br />統計によると、Web ページの平均サイズは 2003 年以降 3 倍に増加し...

CentOS8 でローカル yum ソースを構成するための詳細なチュートリアル

centos8 ディストリビューションは、BaseOS および AppStream リポジトリを通じ...

Node.js でのブレークポイント再開の実装

序文通常のビジネスニーズ: 写真、Excel などをアップロードします。結局のところ、数 MB のサ...

Docker+Jenkins+Gitlab+Djangoアプリケーションデプロイ実践の詳細な説明

1. 背景インターネット アプリケーションの急速な更新と反復という状況では、従来の手作業や単純なスク...

フレックスレイアウトが子要素によって引き伸ばされたときに、コンテンツをコンテナ内に保持する方法

モバイル デバイスでは、フレックス レイアウトが非常に便利です。デバイスの幅に応じてコンテナーの幅を...

IntelliJ IDEA に Docker プラグインをインストールする詳細な手順 (2018 バージョン)

目次1. 開発環境2. dockerプラグインをインストールする1. アイデアのインストール2. イ...