فروردین, ۱۳۹۸ بدون نظر CSS, طراحی سایت

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

 

در این مبحث در مورد جداول  ، نحوه نمایش جداول در CSS و محتویات آن صحبت می کنیم.

Tabels

 

border-collapse :

این خاصیت مدل حاشیه را برای تگ table مشخص میکند.

این خاصیت دارای مقادیر زیر است:

separate : در صورت استفاده از این مقدار تنها خانه هایی که در درون جدول وجود دارد می تواند حاشیه داشته باشد اما ستون ها و ردیف ها نمی توانند حاشیه داشته باشند . یعنی تنها یک سلول از چهار طرف فاصله میگیرد که این مقدار مقدار پیش فرض می باشد.

collapsing : در صورت استفاده از این مقدار فاصله بین خانه های جدول و حاشیه های انها قرار نمیگیرد.

این تنها زمانی کاربرد دارد که از مقدار separate برای جدول استفاده کرده باشیم و این خاصیت میزان فاصله بین خانه های جدول را کنترل میکند.

#result {
border-collapse:separate ;
border-spacing:1em 0.5em ;
}

 

در مثال بالا میزان ۱em فاصله افقی را و میزان ۰.۵em فاصله عمودی را در بین خانه های جدول تعیین میکند.

نکته: با این خاصیت میتوان مقدار منفی و یا یک یا دو مقدار را بپذیرد که در صورت استفاده از دو مقدار ، به صورت معمول مقدار اول مربوط به فاصله افقی و مقدار دوم مربوط به فاصله عمودی می شود . اما اگر از یک مقدار استفاده نمایید این مقدار هم مربوط به فاصله افقی و هم مربوط به فاصله عمودی ان می شود.

Empty-cells :

با استفاده از این خاصیت می توانید تعیین کنید که آیا رنگ پس زمینه و حاشیه های خانه هایی که محتویات ندارند نمایش داده شوند یا خیر. این خاصیت تنها زمانی استفاده می گردد که خاصیت separate برای جدول استفاده کرده باشیم . اما در مقدار collapsing در نظر گرفته نمی شود.

خاصیت Empty-cells دارای مقادیر زیر می باشد:

show: در صورت استفاده از این مقدار پس زمینه خانه های خالی نمایش داده میشود.

hide : در صورت استفاده از این مقدار پس زمینه خانه های خالی نمایش داده نمی شود.و اگر مقدار تمامی خانه های موجود در یک ردیف جدول برابر با hide باشد و در ضمن این خانه ها نیز خالی باشد ان ردیف نمایش داده نمی شود.

caption-side :

این خاصیت مکان عنوان جدول را در جهت عمودی مشخص می کند،اما اگر خواسته باشید مکان افقی را تعیین نمایید می توانید از خاصیت text-align استفاده نمایید.

این خاصیت دارای مقادیر زیر است:

top: این مقدار مکان متن را در بالا قرار می دهد.

bottom: این مقدار مکان متن را در پایین قرار می دهد.

inherit: این مقدار ، مقدار پیش فرض این خاصیت است.

برچسب ها

ارسال نظر شما

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *