آموزش استایل دهی به جداول در 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 باشد و در ضمن این خانه ها نیز خالی باشد ان ردیف نمایش داده نمی شود.