آموزش برنامه نویسی ، پایگاه داده sql server
آموزشگاه برنامه نویسی تحلیل داده : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server


آموزشگاه برنامه نویسی مجتمع فنی تهران میرداماد : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server

خواص پيشرفته 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 نمايش داده شده است :

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


خاصيت 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 اختلاف وجود دارد و بعضی از آنها از برخی از خواص پشتيبانی درستی نمی کنند . برای مثال می توانيد ، صفحات همين سايت را در 3 مرورگر مطرح 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
الگوريتم نمايش جدول را تعيين می کند . به طور کلی 2 الگوريتم برای طراحی جدول داريم :
- الگوريتم نمايش اتوماتيک 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
خروجی


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بود ه است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : جمع سه + پنج چنده ؟