آموزش استایل دهی به جداول در CSS
آموزش استایل دهی به جداول در CSS
در این مبحث در مورد جداول ، نحوه نمایش جداول در CSS و محتویات آن صحبت می کنیم.
Tabels
border-collapse :
این خاصیت مدل حاشیه را برای تگ table مشخص میکند.
این خاصیت دارای مقادیر زیر است:
separate : در صورت استفاده از این مقدار تنها خانه هایی که در درون جدول وجود دارد می تواند حاشیه داشته باشد اما ستون ها و ردیف ها نمی توانند حاشیه داشته باشند . یعنی تنها یک سلول از چهار طرف فاصله میگیرد که این مقدار مقدار پیش فرض می باشد.
collapsing : در صورت استفاده از این مقدار فاصله بین خانه های جدول و حاشیه های انها قرار نمیگیرد.
این تنها زمانی کاربرد دارد که از مقدار separate برای جدول استفاده کرده باشیم و این خاصیت میزان فاصله بین خانه های جدول را کنترل میکند.
| #result { border-collapse:separate ; border-spacing:1em 0.5em ; } |
در مثال بالا میزان 1em فاصله افقی را و میزان 0.5em فاصله عمودی را در بین خانه های جدول تعیین میکند.
نکته: با این خاصیت میتوان مقدار منفی و یا یک یا دو مقدار را بپذیرد که در صورت استفاده از دو مقدار ، به صورت معمول مقدار اول مربوط به فاصله افقی و مقدار دوم مربوط به فاصله عمودی می شود . اما اگر از یک مقدار استفاده نمایید این مقدار هم مربوط به فاصله افقی و هم مربوط به فاصله عمودی ان می شود.
Empty-cells :
با استفاده از این خاصیت می توانید تعیین کنید که آیا رنگ پس زمینه و حاشیه های خانه هایی که محتویات ندارند نمایش داده شوند یا خیر. این خاصیت تنها زمانی استفاده می گردد که خاصیت separate برای جدول استفاده کرده باشیم . اما در مقدار collapsing در نظر گرفته نمی شود.
خاصیت Empty-cells دارای مقادیر زیر می باشد:
show: در صورت استفاده از این مقدار پس زمینه خانه های خالی نمایش داده میشود.
hide : در صورت استفاده از این مقدار پس زمینه خانه های خالی نمایش داده نمی شود.و اگر مقدار تمامی خانه های موجود در یک ردیف جدول برابر با hide باشد و در ضمن این خانه ها نیز خالی باشد ان ردیف نمایش داده نمی شود.
caption-side :
این خاصیت مکان عنوان جدول را در جهت عمودی مشخص می کند،اما اگر خواسته باشید مکان افقی را تعیین نمایید می توانید از خاصیت text-align استفاده نمایید.
این خاصیت دارای مقادیر زیر است:
top: این مقدار مکان متن را در بالا قرار می دهد.
bottom: این مقدار مکان متن را در پایین قرار می دهد.
inherit: این مقدار ، مقدار پیش فرض این خاصیت است.
