آموزش 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
