استایل جدول در CSS (CSS Table Styling)
در این راهنما «استایل جدول در CSS» را مرور می کنیم. ابتدا فاصله گذاری داخلی «Padding» را می بینیم، سپس جداکننده های افقی، حالت Hover سطرها، طرح گورخری و در پایان رنگ دهی سربرگ ها را تمرین می کنیم.
Padding در سلول های جدول
برای افزایش فاصله محتوا از کادر داخلی سلول ها، ویژگی «padding» را روی عناصر td و th اعمال کنید. همچنین می توانید ترازبندی را همزمان تنظیم کنید.
th, td{ padding:10px; text-align:left; }جداکننده افقی سطرها
برای افزودن خطوط جداکننده میان سطرها، کافی است مرز پایینی هر سلول را مقداردهی کنید. بنابراین خوانایی جدول بیشتر می شود.
th, td{ border-bottom:1px solid #ddd; }جدول Hoverable
با شبه کلاس «:hover» روی عنصر tr می توانید در اثر عبور ماوس، سطر را برجسته کنید. این کار به دنبال کردن داده ها کمک می کند.
tr:hover{ background-color:coral; }طرح گورخری (Zebra-striped)
برای ایجاد ردیف های یکی در میان، از انتخاب گر «nth-child()» استفاده کنید. همچنین بهتر است رنگ پس زمینه ملایم برگزینید.
tr:nth-child(even){ background-color:#f2f2f2; }رنگ دهی سربرگ جدول
می توانید پس زمینه و رنگ متن سلول های th را تغییر دهید تا عنوان ها متمایز شوند.
th{ background-color:#04AA6D; color:white; }نکته: برای سازگاری طراحی، ابتدا سبک پایه جدول را تعریف کنید و سپس حالت های تعاملی مانند «:hover» و ردیف های گورخری را اضافه کنید.
مسیر تکمیلی و «استایل جدول در CSS»
پس از یادگیری استایل جدول در CSS، حتماً این بخش های مرتبط را نیز ببینید: تراز جدول در CSS و اندازه جدول در CSS. همچنین مستندات مرجع را مطالعه کنید: MDN: padding، MDN: :hover و MDN: :nth-child().