特にテーブルを使用して魅力的なWebページレイアウトを作成することに慣れている場合は、CSSレイアウトを書くことが難しい場合があります。 HTML5ではレイアウト用のテーブルが使用できますが、それは良い考えではありません。
テーブルにアクセスできない
検索エンジンと同様に、ほとんどのスクリーンリーダーはHTMLで表示されている順序でWebページを読み込み、スクリーンリーダーが解析するのは非常に困難です。これは、表レイアウト内のコンテンツは、左から右、上から下に読むと常に直線的な意味を持つわけではないためです。さらに、ネストした表では、表のセルにさまざまなスパンがあるため、そのページを把握することが非常に難しくなります。
これは、HTML5仕様書がレイアウトのためにテーブルに対して推奨している理由と、HTML 4.01がそれを許可しない理由です。アクセス可能なウェブページは、より多くの人々がそれらを使用することを可能にし、プロのデザイナーのマークです。
CSSを使用すると、セクションをページの左側に属するものとして定義できますが、HTMLの最後に配置します。次にスクリーンリーダと検索エンジンは、重要な部分（コンテンツ）を最初に読み、重要でない部分（ナビゲーション）を最後に読みます。
テーブルは厄介です
Webエディタを使用してテーブルを作成しても、Webページは依然として非常に複雑で維持管理が困難です。最もシンプルなWebページ設計を除き、ほとんどのレイアウト表では、多数の属性とネストした表を使用する必要があります。
あなたがそれをやっている間、テーブルを構築するのは簡単かもしれませんが、完了したらそれを維持する必要があります。 6ヵ月後には、なぜテーブルをネストしたのか、いくつのセルが並んでいるのかなどを覚えておくのは簡単ではありません。言うまでもなく、Webページをチームメンバーとして管理している場合は、関係者全員にテーブルの仕組みを説明したり、変更が必要なときに時間がかかることを期待する必要があります。
CSSも同様に複雑になる可能性がありますが、プレゼンテーションをHTMLと区別して保持し、長期的に維持するのがずっと簡単です。さらに、CSSレイアウトを使用すると、1つのCSSファイルを作成して、すべてのページをそのように見えるようにスタイルできます。その後、サイトのレイアウトを変更する場合は、1つのCSSファイルを変更するだけで、サイト全体が変更されます。レイアウトを更新するためにテーブルを更新するために、各ページを1つずつ移動する必要はありません。
テーブルは柔軟性がありません
パーセンテージ幅のテーブルレイアウトを作成することは可能ですが、読み込みが遅くなることが多く、レイアウトの見た目を劇的に変えることがあります。しかし、テーブルに指定された幅を使用すると、自分とは異なるサイズのモニターではうまく見えない非常に頑丈なレイアウトになります。
多くのモニター、ブラウザー、および解像度で見た目がよくなる柔軟なレイアウトを作成するのは比較的簡単です。実際、CSSのメディアクエリでは、サイズの異なる画面用に別々のデザインを作成できます。
ネストした表は、同じデザインのCSSよりも遅くロードされます
テーブルを使って空想レイアウトを作成する最も一般的な方法は、テーブルを「入れ子にする」ことです。これは、1つ（またはそれ以上）のテーブルが別のテーブル内に配置されることを意味します。ネストされたテーブルが多いほど、Webブラウザがページをレンダリングするのにかかる時間が長くなります。
ほとんどの場合、テーブルレイアウトはCSSデザインより多くの文字を使用して作成します。文字数が少なくても、ダウンロードすることは少なくなります。
テーブルが検索エンジンの最適化を傷つけることがある
最も一般的なテーブル作成レイアウトには、ページの左側にナビゲーションバーがあり、右側にメインコンテンツがあります。表を使用する場合、これは（一般的に）HTMLに表示される最初のコンテンツが左側のナビゲーションバーであることが必要です。検索エンジンはコンテンツに基づいてページを分類し、多くのエンジンはページの上部に表示されるコンテンツが他のコンテンツよりも重要であると判断します。したがって、左側のナビゲーションが最初に表示されたページには、ナビゲーションより重要度の低いコンテンツが表示されます。
CSSを使用すると、重要なコンテンツをHTMLに配置してから、CSSを使用してデザインに配置する場所を決定できます。これは、デザインがページの下に置かれたとしても、検索エンジンが重要なコンテンツを最初に見ることを意味します。
テーブルは必ずしもよく印刷されない
多くのテーブルデザインは、プリンタにはあまりにも幅があるため、適切に印刷されません。したがって、ブラウザを適切にするために、ブラウザはテーブルを切り取り、下のセクションを印刷して、非常にばらばらのページを作成します。ときには、大丈夫なページで終わることもありますが、右端全体が欠落しています。他のページでは、さまざまなシートのセクションが印刷されます。
CSSを使用すると、ページを印刷するためだけに別のスタイルシートを作成できます。
レイアウトのテーブルがHTML 4.01で無効です
HTML 4仕様では、「非ビジュアルメディアにレンダリングするときに問題が発生する可能性があるため、ドキュメントコンテンツをレイアウトするための手段としてテーブルを使用すべきではありません。
したがって、有効なHTML 4.01を作成する場合は、レイアウト用にテーブルを使用することはできません。表形式のデータには表のみを使用し、表形式のデータは一般にスプレッドシートやデータベースに表示されるようなものです。
しかし、HTML5ではルールが変更され、レイアウト用のテーブルは推奨されていませんが、有効なHTMLと見なされています。 HTML5の仕様では、「表はレイアウト補助として使用しないでください。これは、前述のように、スクリーンリーダーが差別化するためのレイアウト用のテーブルが難しいためです。
CSSを使用してページの配置とレイアウトを行うのは、作成した表を使用するための唯一の有効なHTML 4.01の方法です.HTML5ではこの方法も強く推奨されています。
レイアウトの表はあなたの仕事の見通しに影響を与える可能性があります
新しいデザイナーがHTMLとCSSを学ぶにつれて、テーブルレイアウトを構築する上でのスキルはますます低くなります。はい、お客様は通常、ウェブページを構築するために使用すべき正確な技術を教えてくれるわけではありませんが、
- アクセス可能なWebページ：スクリーンリーダが見ることができるデザインは、多くの国や企業が毎日アクセシビリティをますます重要視しています。
- 維持可能なウェブページ：あなたが将来それらを維持しない場合でも、彼らと一緒に取ることができるデザイン。
- フレキシブルなデザイン：多くのブラウザ、解像度、デバイスで機能するデザイン。
- 高速ダウンロードページ：スピードはSEOにとってさえもますます重要になっています。
- 印刷可能なデザイン：特別なスクリプトや余分なページなしで印刷するページ。
クライアントが求めているものを提供できない場合、彼らはデザインのためにあなたに来るのをやめます。 1990年代後半から使用されていた技術を習得し、組み込むつもりはないので、ビジネスに苦労することは本当にありますか？
道徳：CSSを使うことを学ぶ
CSSは学ぶのが難しいかもしれませんが、何か価値のあるものは努力する価値があります。あなたのスキルを停滞させないでください。 CSSを学び、あなたのウェブページをビルドする方法と同じように、レイアウト用のCSSで構築します。
