CSS آموزش - خواص پيشرفته - تنظيم جداول در CSS

خريد CD های آموزشی

آموزش کامل JavaScript
آموزش کامل Java Script

خواص پيشرفته CSS

جداول در CSS :

با استفاده از مجموع خواص ارائه شده در اين بخش ، می توان خصوصيات و ظاهر جداول را در CSS تنظيم کرد .
نکته مهم : قبل از مطالعه اين قسمت ، شما بايد با نحوه طراحی جداول در HTML به طور کامل اشنا باشيد . برای دريافت اطلاعات به بخش آموزش جداول در HTML برويد .

خواص ارائه شده در اين قسمت در ليست زير آمده است . برای دريافت اطلاعات بر روی هر کدام کليک کنيد :

border-collapse
border-spacing
caption-side

empty-cells
table-layout

خاصيت border-collapse

نام خاصيت	نوع خاصيت	شرح
border-collapse	collapse seprate	نحوه نمايش حاشيه يک جدول را به يکی از 2 حالت زير تعيين می کند : - collapse : در اين حالت ، خطوط حاشيه خانه های درونی جدول با خطوط حاشيه بيروني جدول ، در قالب يک خط ترکيب شده و يک خط واحد را تشکيل می دهند . - seprate : در اين حالت خطوط حاشيه خانه های درونی جدول با خطوط حاشيه بيرونی به صورت مجزا از هم نمايش داده می شوند ، که حالت استاندارد HTML است .

مثال : در مثال زير 2 حالت خاصيت border-collapse را نشان داده ايم . در جدول Table 1 حالت collapse و در جدول Table 2 حالت seprate نمايش داده شده است :

< table style="border: solid 2px blue; width: 400px; border-collapse: collapse" >
  < tr >
    < td style="border: solid 2px blue" >
      Cell 1 , Table 1
    < /td >
    < td style="border: solid 2px blue" >
      Cell 2 , Table 1
    < /td >
  < /tr >
< /table >

< table style="border: solid 2px blue; width: 400px; border-collapse: separate" >
  < tr >
    < td style="border: solid 2px blue" >
      Cell 1 , Table 2
    < /td >
    < td style="border: solid 2px blue" >
      Cell 2 , Table 2
    < /td >
  < /tr >
< /table >

Cell 1 , Table 1

Cell 2 , Table 1

Cell 1 , Table 2

Cell 2 , Table 2

خاصيت border-spacing

نام خاصيت	نوع خاصيت	شرح
border-spacing	length	اين خاصيت ميزان فاصله بين خطوط حاشيه خانه های درونی جدول را با خطوط حاشيه دور جدول بر حسب واحدی مثل پيکسل یا نقطه تعيين می کند . مثال : اين خاصيت فقط در زمانی کاربرد دارد ، که خاصيت border-collapse روی مقدار seprate تنظيم شده باشد .

مثال : در مثال زير بين خطوط حاشيه خانه های جدول و خطوط حاشيه بيرونی ، فاصله ايجاد کرده ايم :

< table style="border: solid 2px blue; border-collapse: separate ; border-spacing : 3px " >
  < tr >
    < td style="border: solid 2px blue" >
      Cell 1
    < /td >
    < td style="border: solid 2px blue" >
      Cell 2
    < /td >
  < /tr >
< /table >

Cell 1

Cell 2

خاصيت caption-side

نام خاصيت	نوع خاصيت	شرح
caption-side	top right bottom left	اين خاصيت موقعيت قرار گيری عنوان جدول را تعيين می کند . عنوان جدول توسط تگ < caption > ايجاد می شود . حالت های ممکن عبارتند : - top : عنوان در بالای جدول قرار می گيرد . - right : عنوان در سمت راست جدول قرار می گيرد . - bottom : عنوان در پايين جدول قرار می گيرد . - left : عنوان در سمت چپ جدول قرار می گيرد .

مثال : در مثال زير چند حالت قرار گيری عنوان جدول را بررسی کرده ايم :

< table style="border: solid 2px blue; caption-side: left ; width: 400px" >
  < caption > Table 1 , Caption left < /caption >
  < tr >
    < td style="border: solid 2px blue" >
      Cell 1
    < /td >
    < td style="border: solid 2px blue" >
      Cell 2
    < /td >
  < /tr >
</table>

< table style="border: solid 2px blue; caption-side: bottom ; width: 400px" >
  < caption > Table 2 , Caption bottom < /caption >
  < tr >
    < td style="border: solid 2px blue" >
      Cell 1
    < /td >
    < td style="border: solid 2px blue" >
      Cell 2
    < /td >
  < /tr >
</table>

< table style="border: solid 2px blue; caption-side: top ; width: 400px" >
  < caption > Table 3 , Caption top < /caption >
  < tr >
    < td style="border: solid 2px blue" >
      Cell 1
    < /td >
    < td style="border: solid 2px blue" >
      Cell 2
    < /td >
  < /tr >
</table>

Table 1 , Caption left
Cell 1	Cell 2

Table 2 , Caption bottom
Cell 1	Cell 2

Table 3 , Caption top
Cell 1	Cell 2

خاصيت empty-cells

نام خاصيت	نوع خاصيت	شرح
empty-cells	show hide	مشخص می کند که آيا خانه های خالی جدول و خطوط حاشيه های آنها نمايش داده شود يا خير ، که دو حالت دارد : - show : خانه های خالی و خطوط حاشيه آنها نمايش داده می شود . - show : خانه های خالی و خطوط حاشيه آنها نمايش داده نمی شود ، که حالت پيش فرض است .

مثال : در مثال زير چند حالت های مختلف نمايش خانه های خالی را بررسی کرده ايم . در جدول اول خانه های خالی نمايش داده شده و در جدول دوم نمايش داده نشده است . ستون دوم جدول های زير خالی است که با رنگ سبز نمايش داده شده است .
اشاره : متاسفانه بين مرورگرهای مختلف در نمايش بسياری از تگ ها و خواص HTML و CSS اختلاف وجود دارد و بعضی از آنها از برخی از خواص پشتيبانی درستی نمی کنند . برای مثال می توانيد ، صفحات همين سايت را در 3 مرورگر مطرح Internet Explorer , FireFox و Opera مشاهده کنيد تا به اختلافات پی ببريد .

< table style="border: solid 2px blue; width: 400px; border-collapse: separate; empty-cells: show" >
  < tr >
    < td style="border: solid 2px blue" >
      Cell 1
    < /td >
    < td style="border: solid 2px green" >
    < /td >
    < td style="border: solid 2px blue" >
      Cell 2
    < /td >
  < /tr >
< /table >

< table style="border: solid 2px blue; width: 400px; border-collapse: separate; empty-cells: hide" >
  < tr >
    < td style="border: solid 2px blue" >
      Cell 1
    < /td >
    < td style="border: solid 2px green" >
    < /td >
    < td style="border: solid 2px blue" >
      Cell 2
    < /td >
  < /tr >
< /table >

Cell 1

Cell 2

Cell 1

Cell 2

خاصيت table-layout

نام خاصيت

نوع خاصيت

شرح

table-layout

auto
fixed

الگوريتم نمايش جدول را تعيين می کند . به طور کلی 2 الگوريتم برای طراحی جدول داريم :
- الگوريتم نمايش اتوماتيک auto :

در الگوريتم اتوماتيک ، عرض ستون های جدول بر حسب محتويات درونی آنها تنظيم می شود .
الگوريتم اتوماتيک به دليل اينکه ابتدا نياز دارد تا کليه محتويات جدول ها را لود کند ، بنابراين در نمايش جدول ها کمی کند عمل می کند .

- الگوريتم نمايش ثابت fixed :

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

مثال : در مثال زير چند حالت های مختلف الگوريتم های نمايش جداول را بررسی کرده ايم . در جدول اول از الگوريتم اتوماتيک auto و در جدول دوم از الگوريتم ثابت fixed استفاده کرده ايم .

< table style="border: solid 2px blue" >
  < tr >
    < td style="border: solid 2px blue ; table-layout :auto " >
      Cell 1 , Table 1 , Auto Algoritm
    < /td >
    < td style="border: solid 2px blue" >
      Cell 2 , Table 1 , Auto Algoritm
    < /td >
  < /tr >
< /table >

< table style="border: solid 2px blue; table-layout :fixed ; width: 500px; height: 80px" >
  < tr >
    < td style="border: solid 2px blue; width: 250px" >
      Cell 1 , Table 2 , Fixed Algoritm
    < /td >
    < td style="border: solid 2px blue; width: 250px" >
      Cell 2 , Table 2 , Fixed Algoritm
    < /td >
  < /tr >
< /table >

Cell 1 , Table 1 , Auto Algoritm

Cell 2 , Table 1 , Auto Algoritm

Cell 1 , Table 2 , Fixed Algoritm

Cell 2 , Table 2 , Fixed Algoritm