استایل دهی جداول HTML

استایل‌دهی جداول HTML

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

جداول HTML - طرح راه‌راه (Zebra Stripes)

اگه به هر سطر جدول به صورت یکی در میان یک رنگ پس‌زمینه بدید، یک افکت راه‌راه (زبرا استرایپز) زیبا خواهید داشت.

برای استایل دادن به هر سطر جدول به صورت یکی در میان، از انتخاب‌گر :nth-child(even) به این شکل استفاده کنید:

مثال:

td:nth-child(even), th:nth-child(even) {
     background-color: #D6EEEE;
}

نکته: اگه به جای (even) از (odd) استفاده کنید، استایل‌دهی روی سطر‌های 1، 3، 5 و الی آخر اعمال می‌شه، به جای سطر‌های 2، 4، 6 و الی آخر.

جداول HTML - طرح راه‌راه عمودی (Vertical Zebra Stripes)

برای ایجاد طرح راه‌راه عمودی، به جای سطرها، ستون‌ها رو به صورت یکی در میان استایل بدید.

انتخاب‌گر :nth-child(even) رو برای عناصر داده جدول (td) به این شکل تنظیم کنید:

مثال:

<style>
    tr:nth-child(even) {
        background-color: rgba(150, 212, 212, 0.4);
    }

    th:nth-child(even),
    td:nth-child(even) {
        background-color: rgba(150, 212, 212, 0.4);
    }
</style>

نکته: اگه می‌خواید استایل‌دهی هم روی سربرگ‌ها (th) و هم روی سلول‌های معمولی جدول (td) اعمال بشه، انتخاب‌گر :nth-child() رو برای هر دو عنصر th و td قرار بدید.

ترکیب طرح راه‌راه عمودی و افقی

می‌تونید استایل‌دهی دو مثال بالا رو با هم ترکیب کنید و در نتیجه روی هر سطر و هر ستون به صورت یکی در میان راه‌راه داشته باشید. اگه از یک رنگ شفاف (transparent) استفاده کنید، یک افکت همپوشانی (overlapping) به دست میارید.

برای مشخص کردن شفافیت رنگ، از فرمت رنگ rgba() استفاده کنید:

مثال:

tr {
   border-bottom: 1px solid #ddd;
}

جداکننده‌های افقی (Horizontal Dividers)

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

ویژگی border-bottom رو به همه عناصر tr اضافه کنید تا جداکننده‌های افقی رو به دست بیارید:

مثال:

tr {
   border-bottom: 1px solid #ddd;
}

جدول قابل اشاره (Hoverable Table)

از انتخاب‌گر :hover روی tr استفاده کنید تا سطر‌های جدول رو هنگام قرار گرفتن نشانگر ماوس روی اونها هایلایت کنید:

مثال:

tr:hover {
    background-color: #D6EEEE;
}