استایل دهی جدول (Table Styling)
می خواهیم «استایل دهی جدول» را ساده کنیم. با CSS ظاهر جدول قشنگ می شود. منظور از CSS همان زبان استایل است. مثل تعویض تم گوشی، ولی برای جدول.
خط خطی راه راه افقی (Zebra Stripes)
هر ردیفِ دوم را رنگ بده تا افکت راه راه بسازی.
tr:nth-child(even) {
background-color: #D6EEEE;
}
نکته: اگر بنویسی odd، ردیف های 1،3،5 رنگ می گیرند.
راه راه عمودی ستون ها
این بار ستون های زوج را رنگ بده. تیترها هم شامل شوند.
td:nth-child(even),
th:nth-child(even) {
background-color: #D6EEEE;
}
ترکیب افقی و عمودی
هردو الگو را قاطی کن. با رنگ شفاف، نتیجه جذاب می شود.
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);
}
خط کش های افقی ردیف ها
فقط پایین هر ردیف خط بکش. جدول تمیز و خوانا می شود.
tr {
border-bottom: 1px solid #ddd;
}
هایلایت روی هاور
با حرکت ماوس، ردیف را روشن کن. تشخیص آسان می شود.
tr:hover {
background-color: #D6EEEE;
}
گام های عملی
- :nth-child را روی ردیف ها تست کن.
- همان را روی ستون ها اجرا کن.
- در صورت نیاز، هر دو را ترکیب کن.
- هاور را اضافه کن تا پیمایش آسان شود.
مطالب مرتبط: ادغام سلول ها، مرزهای جدول، و استایل دهی جدول.
جمع بندی سریع
- راه راه افقی با
:nth-child(even)رویtr. - راه راه عمودی با
:nth-child(even)رویtd/th. - ترکیب دو افکت با رنگ شفاف بهتر می شود.
- خط زیر ردیف ها، خوانایی را زیاد می کند.
- هاور، پیمایش دیداری را راحت می کند.