آموزش CSS – جداول در CSS

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

معمولا از جدول برای نماش داده های موجود استفاده می شود. در CSS شما می توانید ظاهر نمایشی مربوط به جداول را کنترل و مدیریت کنید.

استایل دهی جداول در CSS :

زمانی که یک جدول HTML را بدون هیچ گونه سبک و صفتی می سازید، مرورگر آن را بدون حاشیه نشان خواهد داد. استایل دهی جداول در CSS می تواند ظاهر آن را بهبود ببخشد.

در این مقاله به شما نشان خواهیم داد که چگونه می توانید طرح و نمایش المان جدول table را به کمک CSS کنترل کنید و یک جدول زیبا و جذاب بسازید.

اضافه کردن حاشیه(Borders)به جدول:

خصوصیت Border در زبان CSS بهترین روش برای تعریف حاشیه جدول هاست.

به مثال زیر توجه کنید. این کد می تواند حاشیه سیاه را برای المان های <table> ،<th> و <td> ایجاد کند.

table, th, td {
    border: 1px solid black;
}

table, th, td {

border: 1px solid black;

}

خصوصیت border-collapse:

اگر مثال بالا را اجرا کنید, حتما متوجه شده اید که هر سلول از جدول دارای حاشیه های جداگانه و نیز فضایی بین حاشیه های سلول های مجاور است.

این موضوع بدین خاطر رخ می دهد که حاشیه های سلول جدول به صورت پیش فرض از هم جدا شده اند. اما شما می توانید حاشیه های جدول را به کمک خصوصیت border-collapse به یک حاشیه واحد تبدیل کنید.

این خصوصیت مدل حاشیه جدول را انتخاب می کند. چنین خصوصیتی می تواند یکی از دو مقادیر Collapse یا Separate را داشته باشد.

مدل separated، مدل پیش فرض برای جدول های HTML است که در آن هر سلول مجاور حاشیه مجزای خویش را خواهد داشت.
در مدل collapsed ، سلول های مجاور دارای حاشیه های اشتراکی هستند.

به مثال زیر توجه کنید:

table {
    border-collapse: collapse;
}
table, th, td {
    border: 1px solid black;
}

table {

border-collapse: collapse;

}

table, th, td {

border: 1px solid black;

}

همچنین شما می توانید فضای بین حاشیه سلول های جدول را به کمک تنظیم مقدار خصوصیت border-spacing بر روی صفر حذف کنید.

با این حال، چنین خصوصیتی تنها فضای موجود را حذف می کند و همانند خصوصیت border-collapse حاشیه ها را ترکیب نمی نماید.

نکته: اگر <!DOCTYPE> در سند HTML مشخص نشده باشد، خصوصیت border-collapse نتایج غیر قابل پیش بینی خواهد داشت.

کنترل کردن طرح جدول:

به طور پیش فرض، یک جدول برای اینکه بتواند خود را با داده های موجود در آن منطبق سازد، خود را توسعه داده یا کوچک تر می کند. داده های موجود، داخلِ جدول را پر می کنند و تا زمانی که فضای کافی برای داده فراهم نشده است جدول توسعه پیدا می کند.

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

این خصوصیت الگوریتم هایی را برای استفاده در سلول ها، ستون ها و سطرها ایجاد می کند. دو الگوریتم طرح بندی جدول در دسترس کاربران قرار دارد: یکی از آن ها automatic و دیگری Fixed است.

Auto: از الگوریتم خودکار برای طرح بندی جدول استفاده می کند. با این الگوریتم عرض جدول و سلول های آن به محتوای سلول بستگی خواهد داشت.
Fixed: از الگوریتم ثابت برای طرح بندی جدول استفاده می کند. با این الگوریتم، طرح افقی جدول به محتوای سلول وابسته نیست و تنها به عرض جدول، عرض ستون و حاشیه یا فضای سلول وابسته خواهد بود.

مثال زیر نشان می دهد که جدول از الگوریتم fixed استفاده می کند و عرض ثابت ۳۰۰ پیکسل را دارد.

table {
    width: 300px;
    table-layout: fixed;
}

table {

width: 300px;

table-layout: fixed;

}

بدون وجود مقادیر ثابت در خصوصیت table-layout (در جدول های بزرگ) کاربر تا زمانی که مرورگر کل جدول را رندر نکرده است هیچ بخشی از جدول را نخواهد دید .

نکته: شما می توانید عملکرد رندر شدن جدول را به کمک خصوصیت table-layout بهینه سازی کنید. مقادیر ثابت برای این خصوصیت، باعث می شود یک سطر از جدول شما در زمان واحد رندر شود و همین امر اطلاعات سریع تری در اختیار کاربران قرار می دهد.

مدیریت سلول های خالی:

خصوصیت empty-cells رندر شدن حاشیه ها و پس زمینه سلول هایی که محتوای قابل مشاهده در جدول ندارند را کنترل می کند. این خصوصیت سه مقدار زیر را می تواند اتخاذ کند:

show
hide
inherit

قانون استایل دهی زیر، سلول های خالی موجود در المان جدول را پنهان می سازد.

table {
    border-collapse: separate;
    empty-cells: hide;
}

table {

border-collapse: separate;

empty-cells: hide;

}

کنترل موقعیت عنوان جدول:

خصوصیت caption-side در CSS، موقعیت عمودی جعبه کپشن جدول را تنظیم می کند. قانون استایل دهی زیر، کپشن جدول را زیر جدول والدش تنظیم می کند.

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

caption {
    caption-side: bottom;
}

caption {

caption-side: bottom;

}

توجه: خصوصیت caption-side در مرورگر اینترنت اکسپلورر ۷ و پایین تر از آن کار نمی کند. این خصوصیت تنها در اینترنت اکسپلورر ۸ پشتیبانی می شود و باید <!DOCTYPE> مشخص گردد.

امیدوارم در این بخش آموزش CSS, از استایل دهی جداول در CSS نهایت استفاده را برده باشید.

در بخش بعدی با Box-Model در CSS آشنا می شویم.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.