CSS-レイアウト

HTMLテーブルに非常に慣れており、HTMLテーブルを使用してページレイアウトを効率的に設計できることを願っています。ただし、CSSはドキュメント内の要素を配置するための多くのコントロールも提供します。 CSSは_未来の波_であるため、ページレイアウトの目的で、テーブルではなくCSSを学習して使用してみませんか？

次のリストは、両方の技術のいくつかの長所と短所を収集します-

ほとんどのブラウザはテーブルをサポートしていますが、CSSサポートは徐々に採用されています。
ブラウザウィンドウのサイズが変更された場合、テーブルはより寛容です-コンテンツをモーフィングし、それに応じて変更に対応するためにラップします。 CSSの配置は、正確でかなり柔軟性に欠ける傾向があります。
テーブルは、CSSルールよりも簡単に学習および操作できます。

しかし、これらの引数のそれぞれは逆にすることができます-

CSSはWebドキュメントの将来にとって極めて重要であり、ほとんどのブラウザでサポートされます。
CSSはテーブルよりも正確であるため、ブラウザウィンドウに関係なく、ドキュメントを意図したとおりに表示できます。
入れ子になったテーブルを追跡するのは大変なことです。 CSSルールはよく整理され、読みやすく、簡単に変更される傾向があります。

最後に、あなたにとって理にかなっている技術を使用し、あなたが知っていることや文書を提示するものを最良の方法で使用することをお勧めします。

CSSは_table-layout_プロパティも提供して、テーブルのロードをより高速にします。以下は例です-

<table style = "table-layout:fixed;width:600px;">
   <tr height = "30">
      <td width = "150">CSS table layout cell 1</td>
      <td width = "200">CSS table layout cell 2</td>
      <td width = "250">CSS table layout cell 3</td>
   </tr>
</table>

大きなテーブルの方がメリットがわかります。従来のHTMLでは、ブラウザは最終的にテーブルをレンダリングする前にすべてのセルを計算する必要がありました。ただし、テーブルレイアウトアルゴリズムを_fixed_に設定すると、テーブル全体をレンダリングする前に最初の行を見るだけで済みます。つまり、テーブルの列幅と行高さを固定する必要があります。

サンプル列レイアウト

CSSを使用して簡単な列レイアウトを作成する手順は次のとおりです-

次のようにドキュメント全体のマージンとパディングを設定します-

<style style = "text/css">
   <!--
      body {
         margin:9px 9px 0 9px;
         padding:0;
         background:#FFF;
      }
   -->
</style>

ここで、黄色の列を定義し、後でこのルールを<div>に添付します-

<style style = "text/css">
   <!--
      #level0 {
         background:#FC0;
      }
   -->
</style>

この時点までに、黄色のボディを持つドキュメントがあるので、今度はlevel0内に別の部門を定義しましょう−

<style style = "text/css">
   <!--
      #level1 {
         margin-left:143px;
         padding-left:9px;
         background:#FFF;
      }
   -->
</style>

今、私たちはレベル1内にもう1つの部門をネストし、背景色だけを変更します-

<style style = "text/css">
   <!--
      #level2 {
         background:#FFF3AC;
      }
   -->
</style>

最後に、同じ手法を使用して、level2内にlevel3の区分をネストして、右の列の視覚的なレイアウトを取得します-

<style style = "text/css">
   <!--
      #level3 {
         margin-right:143px;
         padding-right:9px;
         background:#FFF;
      }
      #main {
         background:#CCC;
      }
   -->
</style>

次のようにソースコードを完成します-

<style style = "text/css">
   body {
      margin:9px 9px 0 9px;
      padding:0;
      background:#FFF;
   }

   #level0 {background:#FC0;}

   #level1 {
      margin-left:143px;
      padding-left:9px;
      background:#FFF;
   }

   #level2 {background:#FFF3AC;}

   #level3 {
      margin-right:143px;
      padding-right:9px;
      background:#FFF;
   }

   #main {background:#CCC;}
</style>
<body>
   <div id = "level0">
      <div id = "level1">
         <div id = "level2">
            <div id = "level3">
               <div id = "main">
                  Final Content goes here...
               </div>
            </div>
         </div>
      </div>
   </div>
</body>

同様に、ページの上部にトップナビゲーションバーまたは広告バーを追加できます。

それは次の結果を生成します-

Css-layouts

CSS-レイアウト

サンプル列レイアウト