آموزش جداول در CSS
آموزش جداول در CSS
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش جداول در CSS خواهیم پرداخت.
می توانید ویژگی های یک جدول را مانند زیر تنظیم کنید:
- border-collapse مشخص می کند که آیا مرورگر باید ظاهر مرزهای مجاور را که یکدیگر را لمس می کنند کنترل کند یا اینکه هر سلول باید سبک خود را حفظ کند.
- caption-side پهنا را مشخص می کند که باید بین سلول های جدول ظاهر شود.زیرنویس های سمت شرح در عنصر <caption> ارائه می شوند. به طور پیش فرض ، اینها بالاتر از جدول موجود در سند ارائه می شوند. شما از ویژگی سمت زیرنویس برای کنترل نحوه قرارگیری عنوان جدول استفاده می کنید.
- empty-cells مشخص می کند که در صورت خالی بودن سلول باید مرز نشان داده شود.
- table-layout به مرورگرها این امکان را می دهد تا سرعت جدول را با استفاده از اولین ویژگی های عرض موجود در بقیه ستون ، به جای بارگیری کل جدول قبل از ارائه ، تسریع کنند.
اکنون، نحوه استفاده از این ویژگی ها را با مثال خواهیم دید.
ویژگی border-collapse
این ویژگی می تواند دارای دو مقدار باشد و از هم جدا شود. مثال زیر از هر دو مقدار استفاده می کند –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
Live Demo <html> <head> <style type = "text/css"> table.one {border-collapse:collapse;} table.two {border-collapse:separate;} td.a { border-style:dotted; border-width:3px; border-color:#000000; padding: 10px; } td.b { border-style:solid; border-width:3px; border-color:#333333; padding:10px; } </style> </head> <body> <table class = "one"> <caption>Collapse Border Example</caption> <tr><td class = "a"> Cell A Collapse Example</td></tr> <tr><td class = "b"> Cell B Collapse Example</td></tr> </table> <br /> <table class = "two"> <caption>Separate Border Example</caption> <tr><td class = "a"> Cell A Separate Example</td></tr> <tr><td class = "b"> Cell B Separate Example</td></tr> </table> </body> </html> |
خروجی به صورت زیر می باشد:
|
1 2 3 4 5 6 7 |
Collapse Border Example Cell A Collapse Example Cell B Collapse Example Separate Border Example Cell A Separate Example Cell B Separate Example |
ویژگی border-spacing
ویژگی border-spacing مسافت سلولهای مجاور را از هم جدا می کند. مرز ها. این می تواند یک یا دو مقدار را بگیرد. واحد این ها طول می باشند.
اگر یک مقدار ارائه دهید، هم برای مرزهای عمودی و هم افقی اعمال می شود. یا می توانید دو مقدار تعیین کنید، در این حالت، اول به فاصله افقی و دیگری به فاصله عمودی اشاره دارد –
توجه – متأسفانه، این ویژگی در Netscape 7 یا IE 6 کار نمی کند.
|
1 2 3 4 5 6 |
<style type="text/css"> /* If you provide one value */ table.example {border-spacing:10px;} /* This is how you can provide two values */ table.example {border-spacing:10px; 15px;} </style> |
حال بیایید مثال قبلی را اصلاح کرده و تأثیر آن را مشاهده کنیم
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<html> <head> <style type = "text/css"> table.one { border-collapse:separate; width:400px; border-spacing:10px; } table.two { border-collapse:separate; width:400px; border-spacing:10px 50px; } </style> </head> <body> <table class = "one" border = "1"> <caption>Separate Border Example with border-spacing</caption> <tr><td> Cell A Collapse Example</td></tr> <tr><td> Cell B Collapse Example</td></tr> </table> <br /> <table class = "two" border = "1"> <caption>Separate Border Example with border-spacing</caption> <tr><td> Cell A Separate Example</td></tr> <tr><td> Cell B Separate Example</td></tr> </table> </body> </html> |
خروجی به صورت زیر می باشد:
|
1 2 3 4 5 6 7 |
Separate Border Example with border-spacing Cell A Collapse Example Cell B Collapse Example Separate Border Example with border-spacing Cell A Separate Example Cell B Separate Example |
ویژگی caption-side
ویژگی caption-side به شما امکان می دهد محل محتوای عنصر <caption> را در رابطه با جدول تعیین کنید. جدولی که در زیر می آید مقادیر احتمالی را لیست می کند.
این ویژگی می تواند یکی از چهار مقدار بالا، پایین، چپ یا راست را داشته باشد. مثال زیر از هر مقدار استفاده می کند.
توجه – این خصوصیات ممکن است با مرورگر IE شما کار نکنند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<html> <head> <style type = "text/css"> caption.top {caption-side:top} caption.bottom {caption-side:bottom} caption.left {caption-side:left} caption.right {caption-side:right} </style> </head> <body> <table style = "width:400px; border:1px solid black;"> <caption class = "top"> This caption will appear at the top </caption> <tr><td > Cell A</td></tr> <tr><td > Cell B</td></tr> </table> <br /> <table style = "width:400px; border:1px solid black;"> <caption class = "bottom"> This caption will appear at the bottom </caption> <tr><td > Cell A</td></tr> <tr><td > Cell B</td></tr> </table> <br /> <table style = "width:400px; border:1px solid black;"> <caption class = "left"> This caption will appear at the left </caption> <tr><td > Cell A</td></tr> <tr><td > Cell B</td></tr> </table> <br /> <table style = "width:400px; border:1px solid black;"> <caption class = "right"> This caption will appear at the right </caption> <tr><td > Cell A</td></tr> <tr><td > Cell B</td></tr> </table> </body> </html> |
خروجی به صورت زیر می باشد:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
This caption will appear at the top Cell A Cell B This caption will appear at the bottom Cell A Cell B This caption will appear at the left Cell A Cell B This caption will appear at the right Cell A Cell B |
ویژگی empty-cells
ویژگی empty-cells نشان می دهد که یک سلول بدون هیچ محتوا باید با حاشیه نمایش داده شود.
این ویژگی می تواند یکی از سه مقدار را داشته باشد – show, hide یا inherit.
در اینجا ویژگی empty-cells برای مخفی کردن حاشیه سلولهای خالی در عنصر <table> وجود دارد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
Live Demo <html> <head> <style type = "text/css"> table.empty { width:350px; border-collapse:separate; empty-cells:hide; } td.empty { padding:5px; border-style:solid; border-width:1px; border-color:#999999; } </style> </head> <body> <table class = "empty"> <tr> <th></th> <th>Title one</th> <th>Title two</th> </tr> <tr> <th>Row Title</th> <td class = "empty">value</td> <td class = "empty">value</td> </tr> <tr> <th>Row Title</th> <td class = "empty">value</td> <td class = "empty"></td> </tr> </table> </body> </html> |
خروجی به صورت زیر می باشد:
|
1 2 3 |
Title one Title two Row Title value value Row Title value |
ویژگی table-layout
قرار است ویژگی table-layout به شما در کنترل نحوه نمایش یا چیدمان جدول توسط یک مرورگر کمک کند.
این ویژگی می تواند یکی از سه مقدار fixed, auto یا inherit را داشته باشد.
مثال زیر تفاوت این خصوصیات را نشان می دهد.
توجه – این ویژگی توسط بسیاری از مرورگرها پشتیبانی نمی شود، بنابراین به این ویژگی اعتماد نکنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<html> <head> <style type = "text/css"> table.auto { table-layout: auto } table.fixed { table-layout: fixed } </style> </head> <body> <table class = "auto" border = "1" width = "100%"> <tr> <td width = "20%">1000000000000000000000000000</td> <td width = "40%">10000000</td> <td width = "40%">100</td> </tr> </table> <br /> <table class = "fixed" border = "1" width = "100%"> <tr> <td width = "20%">1000000000000000000000000000</td> <td width = "40%">10000000</td> <td width = "40%">100</td> </tr> </table> </body> </html> |
خروجی به صورت زیر می باشد:
|
1 2 3 |
10000000000000000 10000000 100 100000000000 10000000 100 |
لیست جلسات قبل آموزش CSS
.svg)
دیدگاه شما