عصر انتقال داده رایان تکرو
آموزش استایل دهی به جداول در CSS
CSS طراحی سایت

آموزش استایل دهی به جداول در CSS

آموزش استایل دهی به جداول در CSS
CSS طراحی سایت

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

نوشتن نظر

ضبط پیام صوتی

زمان هر پیام صوتی 5 دقیقه است