1. مهمان گرامی، جهت ارسال پست، دانلود و سایر امکانات ویژه کاربران عضو، ثبت نام کنید.
    بستن اطلاعیه

آموزش css/ظاهر جداول/خاصيت table-layout

شروع موضوع توسط Amon Amarth ‏16/4/13 در انجمن CSS

  1. کاربر ارزشمند

    تاریخ عضویت:
    ‏7/6/12
    ارسال ها:
    11,734
    تشکر شده:
    26,186
    امتیاز دستاورد:
    113
    جنسیت:
    مرد
    حرفه:
    IT-Handmade leather
    آموزش css/ظاهر جداول/خاصيت table-layout


    [h=3] خاصيت table-layout [/h] [TABLE="class: pr, width: 100%"]
    [TR]
    [TD="class: prname"] نام خاصيت
    [/TD]
    [TD="class: prname"] نوع خاصيت
    [/TD]
    [TD="class: prdes"] شرح
    [/TD]
    [/TR]
    [TR]
    [TD="class: prbody"] table-layout [/TD]
    [TD="class: prbody"] auto
    fixed [/TD]
    [TD="class: prbody"] الگوريتم نمايش جدول را تعيين می کند . به طور کلی 2 الگوريتم برای طراحی جدول داريم :
    - الگوريتم نمايش اتوماتيک auto :
    • در الگوريتم اتوماتيک ، عرض ستون های جدول بر حسب محتويات درونی آنها تنظيم می شود .
    • الگوريتم اتوماتيک به دليل اينکه ابتدا نياز دارد تا کليه محتويات جدول ها را لود کند ، بنابراين در نمايش جدول ها کمی کند عمل می کند .
    - الگوريتم نمايش ثابت fixed :
    • در الگوريتم ثابت ، عرض و ارتفاع جدول و خانه های آن بر حسب مقادير تعيين شده توسط کاربر تنظيم می شود و به محتويات درونی آن کاری ندارد .
    • در الگوريتم ثابت ، مرورگر با سرعت بيشتری جدول را نمايش می دهد ، زيرا نيازی به لود شدن محتويات درونی آن ندارد .
    [/TD]
    [/TR]
    [/TABLE]
    مثال : در مثال زير چند حالت های مختلف الگوريتم های نمايش جداول را بررسی کرده ايم . در جدول اول از الگوريتم اتوماتيک auto و در جدول دوم از الگوريتم ثابت fixed استفاده کرده ايم .
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example [/TD]
    [/TR]
    [TR]
    [TD="class: body"] < 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 >
    [/TD]
    [TD="class: header"] کد [/TD]
    [/TR]
    [TR]
    [TD="class: body"] [TABLE]
    [TR]
    [TD] Cell 1 , Table 1 , Auto Algoritm [/TD]
    [TD] Cell 2 , Table 1 , Auto Algoritm [/TD]
    [/TR]
    [/TABLE]

    [TABLE="width: 500"]
    [TR]
    [TD] Cell 1 , Table 2 , Fixed Algoritm [/TD]
    [TD] Cell 2 , Table 2 , Fixed Algoritm [/TD]
    [/TR]
    [/TABLE]
    [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]

    منبع: developer1
     
    یک شخص از این تشکر کرد.