فرمت دهی جداول در CSS

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

Border ها در جداول 

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

در مثال زیر یک border مشکی برای عناصر <table> ، <th> و <td> مشخص شده است :

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

توجه داشته باشید که جدول مثال فوق دارای دو border است. و این به خاطر این است که عناصر table و <th> و <td> دارای border های جداگانه ای هستند.

صفت  border-collapse

از صفت  border-collapse برای تبدیل border های دوتایی جدولی که باید به یک border کاهش پیدا کند استفاده میشود :

table {
    border-collapse: collapse;
}

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

اگر شما بخواهید فقط یک border اطراف جدول رسم شود، صفت border را فقط برای تگ <table> تنظیم کنید :

table {
    border: 1px solid black;
}

صفات طول و عرض برای یک جدول

طول و عرض یک جدول با استفاده از صفات width و height در زبان CSS مشخص میشوند.

در مثال زیر مقدار طول جدول برابر با 100% و عرض عناصر <th> با مقدار 50 پیکسل تنظیم شده اند.

th {
    text-align: left;
}

تراز بندی افقی

از صفت text-align برای ترازبندی افقی (مانند چپ، راست و وسط) محتوا در <th> یا <td> استفاده میشود.

به صورت پیشفرض، محتوای عناصر <th> دارای ترازبندی وسط بوده و محتوای عناصر <td> دارای ترازبندی چپ هستند.

در جدول مثال زیر متون داخل عناصر <th> چپ چین شده اند:

th {
    text-align: left;
}

ترازبندی عمودی

با استفاده از صفت vertical-align (با استفاده از مقادیر top ، bottom و middle) میتوان متون داخل عناصر <th> یا <td> را به صورت عمودی ترازبندی کرد.

به صورت پیشفرض، ترازبندی عمودی برای محتوای یک جدول ، وسط (middle) است (برای هر دو عنصر <th> و <td>).

در مثال زیر ترازبندی افقی برای عناصر <td> با مقدار bottom تنظیم شده است :

td {
    height: 50px;
    vertical-align: bottom;
}

تنظیم Padding برای جداول

برای کنترل فضای بین محتوای یک جدول و border های آن ، از صفت padding در عناصر <th> و <td> استفاده میکنیم :

th, td {
    padding: 15px;
    text-align: left;
}

جداکننده های افقی

برای افزودن جداکننده های افقی به جدول صفت border-bottom را برای عناصر <th> و <td> تنظیم میکنیم :

th, td {
    border-bottom: 1px solid #ddd;
}

استفاده از امکان hover برای جدول

از انتخاب کننده ی hover: در تگ <tr> برای هایلایت کردن ردیف هایی که موس روی آنها قرار میگیرد استفاده میکنیم :

tr:hover {background-color: #f5f5f5}

ایجاد جدول های راه راه برای خوانایی بیشتر داده ها

برای اینکه خوانایی داده ها در جداول بهتر شود میتوان از انتخاب کننده ی ()nth-child و صفت background-color برای ردیف های زوج و فرد یک جدول استفاده کرد.

tr:nth-child(even) {background-color: #f2f2f2}

رنگ یک جدول

در مثال زیر رنگ پس زمینه برای جدول و رنگ متون عناصر <th> مقدار دهی شده اند :

th {
    background-color: #4CAF50;
    color: white;
}

جدول های واکنش گرا

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

برای این کار جدول مورد نظر را داخل یک عنصر div قرار داده و مقدار صفت style آن را برابر overflow-x:auto قرار دهید :

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>