قالب وردپرس قالب وردپرس آموزش وردپرس قالب فروشگاهی وردپرس وردپرس
خانه / اموزش / html/css / جداول در CSS

جداول در CSS

جداول در CSSReviewed by سالار on Apr 6Rating: 5.0

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

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

border-collapse
border-spacing
caption-side
empty-cells
table-layout

خاصيت border-collapse

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

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

Example
< 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
خروجی

css-main-iriranweb


خاصيت border-spacing

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

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

Example
< 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 : عنوان در سمت چپ جدول قرار می گيرد .

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

Example
< 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 اختلاف وجود دارد و بعضی از آنها از برخی از خواص پشتيبانی درستی نمی کنند . برای مثال می توانيد ، صفحات همين سايت را در ۳ مرورگر مطرح Internet Explorer , FireFox و Opera مشاهده کنيد تا به اختلافات پی ببريد .

Example
< 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
الگوريتم نمايش جدول را تعيين می کند . به طور کلی ۲ الگوريتم برای طراحی جدول داريم :
– الگوريتم نمايش اتوماتيک auto :

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

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

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

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

Example
< 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
خروجی

مطلب پیشنهادی

شی Screen در جاوا اسکريپت – صفحه نمایش

شی Screen در جاوا اسکريپت - صفحه نمایشReviewed by سالار on Dec 4Rating: 5.0شی Screen …

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

 
در خبرنامه ما عضو شوید

در خبرنامه ما عضو شوید

در خبرنامه ما عضو شوید تا بهترین پست هفته مارو در ایمیل خودتون دریافت کنید :)

تبریک ! شما عضو خبرنامه ما شدید