آموزش CSS - چیدمان و طرح بندی ها

استفاده از CSS به جای جداول HTML برای طراحی صفحات وب مزایایی دارد، لیست زیر به بررسی این مزایا و معایب می‌پردازد:

مزایا استفاده از جدول:

بیشتر مرورگرها حتی بهترین استانداردها را هنوز پشتیبانی می‌کنند، اما استفاده از CSS به آرامی در حال انتشار است.
با استفاده از CSS، می‌توانید طرح صفحه‌ی خود را بهبود بخشیده و سازماندهی کنید، در حالی که جداول هنگام تغییر اندازه پنجره مرورگر، ممکن است ساختار صفحه را به مراتب تغییر دهند.
یادگیری و کنترل جداول نسبت به CSS آسان‌تر است.

معایب استفاده از جداول:

CSS آینده اسناد وب را تعیین می‌کند و به زودی توسط بیشتر مرورگرها پشتیبانی خواهد شد.
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>

این تنظیمات باعث می‌شود که رندر کردن جدول سریع‌تر انجام شود، زیرا فقط نیاز است اندازه‌های سلول‌ها را محاسبه کند.

همچنین، برای طراحی یک طرح ستونی ساده با استفاده از CSS می‌توانید این مراحل را دنبال کنید:

تنظیم حاشیه .
تعریف ستون با رنگ مورد نظر.
ایجاد دسته‌بندی‌های دیگر با رنگ‌های متفاوت و تنظیم چیدمان.
با این کارها، می‌توانید چیدمان دلخواه خود را ایجاد کرده و صفحه وب خود را به بهترین شکل نمایش دهید.

تنظیم حاشیه:

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

تعریف ستون‌ها:

<style>
   #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">
                  محتوای نهایی اینجا قرار می گیرد...
               </div>
            </div>
         </div>
      </div>
   </div>
</body>

استفاده از این ساختار، به شما امکان می‌دهد تا بهترین چیدمان را برای صفحات خود انتخاب کرده و مطمئن شوید که محتوای شما به بهترین شکل ممکن نمایش داده می‌شود.حتی می‌توانید به این طرح ستونی نوار ناوبری یا بخش‌های دیگری را اضافه کنید.

چاپ - درس قبلی

درس بعدی - اعتبارسنجی ها