ویژگی های مربوط به جدول در css

در css تعدادی ویژگی وجود دارد که فقط برای کار کردن با عناصر جدول استفاده می شوند. این ویژگی ها کنترل لازم برای چگونگی نمایش داده های جدول را در اختیار ما قرار می دهند.

ویژگی border-spacing

فاصله بین حاشیه های (border) خانه های جدول که در کنار یکدیگر قرار دارند را می توان با استفاده از ویژگی border-spacing تغییر داد؛ این ویژگی برابر با خصوصیت (attribute) cellspacing در اچ تی ام ا ل است. W3C مقدار صفر را به عنوان مقدار پیش فرض برای این ویژگی قرار داده است، اما بیشتر مرورگرها مقدار 2پیکسل را به عنوان مقدار پیش فرض در نظر می گیرند.

border-spacing : inherit | <length> [<length>]

می توانیم برای این ویژگی دو مقدار طولی را مشخص کنیم. از این دو مقدار، عدد اول فضای افقی را تعیین می کند، و عدد دوم فضای عمودی را مشخص می کند.

.spacing {
border-spacing: 5px 10px;
}

border-spacing یک ویژگی مربوط به جدول است، نه ویژگی مربوط به خانه های جدول، بنابراین همانطور که در مثال زیر می بینید این ویژگی به عنصر <table> اعمال می شود:

<table class="spacing">
<caption>جدول من</caption>
<tr>
<td>خانه اول، ردیف اول </td>
<td>خانه دوم، ردیف اول</td>
</tr>
<tr>
<td>خانه اول، ردیف دوم</td>
<td>خانه دوم، ردیف دوم</td>
</tr>
</table>

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

خانه های جدول دارای border و padding هستند، اما margin ندارند؛ به جای آن باید از ویژگی border-spacing استفاده کنیم. padding در مورد خانه های جدول مثل سایر عناصر عمل می کند و مثل خصوصیت cellpadding در اچ تی ام ال است.

ویژگی border-collapse

ویژگی border-collapse مشخص می کند که آیا حاشیه های جدول به یک حاشیه تنها یا جداگانه تبدیل شود.

border-collapse : inherit | separated | collapse

به طور معمول خانه های جدول حاشیه های مربوط به خود را دارند و این حاشیه ها توسط فاصله ای که در ویژگی border-spacing تعیین می شود از هم جدا می شوند. اگر حاشیه ها با مقدار collapse تعیین شده باشند، خانه های جدول حاشیه ها را با یکدیگر به اشتراک می گذارند و هر مقداری که برای border-spacing تعیین شده باشد نادیده گرفته خواهد شد.

table { border-collapse: collapse;}

با اعمال کردن این ویژگی، جدول ذکر شده در مثال بالا به این شکل نمایش داده می شود:

ویژگی caption-side

عنصر <caption> یک برچسب برای جدول ایجاد می کند. با استفاده از ویژگی caption-side می توانیم محل قرارگیری این برچسب را تغییر دهیم.

caption-side : inherit | top | bottom

عنوان معمولا در بالای جدول قرار می گیرد، اما با استفاده از ویژگی caption-side می توانیم مشخص کنیم که برچسب در پایین جدول قرار گیرد. این ویژگی به عنصر <caption> اعمال می شود، اما می توانیم این ویژگی را برای عنصر <table> تنظیم کنیم به خاطر اینکه این ویژگی به ارث برده می شود.

caption { caption-side: bottom; }

ویژگی empty-cell

یک خانه جدول که دارای محتوا نیست به صورت معمول حاشیه و پس زمینه خود را نمایش می دهد. با استفاده از ویژگی empty-cell می توانیم این رفتار را تغییر دهیم.

empty-cell : inherit | show | hide

با تنظیم کردن مقدار این ویژگی با مقدار hide حاشیه و پس زمینه خانه جدول نمایش داده نمی شود. Layout جدول با استفاده از این ویژگی تغییر نمی کند.

ویژگی table-layout

ویژگی table-layout مشخص می کند که آیا عرض خانه های جدول باید ثابت باشند یا انعطاف پذیر. برخلاف سایر ویژگی های مربوط به جدول، ویژگی table-layout خصوصیات خود را از عنصر والد به ارث نمی برد:

table-layout : auto | fixed

مقدار پیش فرض این ویژگی auto است، و به این معنی است که خانه های جدول به صورت خودکار بزرگتر می شوند تا محتوا را در داخل خود جای دهند، حتی اگر عرض این خانه ها بیشتر از عرض تنظیم شده برای آنها باشد. برای اینکه مطمئن شویم عرض خانه جدول ثابت باشد، باید مقدار fixed را برای این ویژگی تعیین کنیم. بنابراین صفحه بندی افقی خانه جدول فقط به عرض تنظیم شده برای جدول بستگی دارد، نه به محتوای خانه های جدول.

/* ثابت نگاه داشتن عرض خانه های جدول */
.fixed { table-layout: fixed; }

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