آموزش استایل دهی به جدول در CSS

اضافه کردن padding به جدول

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

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

اضافه کردن ویژگی border-bottom به عناصر <th>  و <td> برای ایجاد تقسیم کننده های افقی(یعنی خطوط افقی) در جدول:

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

رنگی کردن ردیف های جدول با رفتن ماوس روی آن(Hoverable Table)

با استفاده از سلکتور hover: روی عنصر <tr> می توانیم کاری کنیم که وقتی ماوس روی ردیف های جدول می رود، رنگی یا هایلایت شود.

tr:hover {background-color: coral;}

استفاده از جدول های راه راه(Striped Tables)

برای راه راه کردن جدول ها، از سلکتور nth-child() استفاده کنید و یک background-color را به تمام ردیف های زوج (یا فرد) اعمال کنید:

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

 رنگ کردن جدول در CSS

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

th {
  background-color: #04AA6D;
  color: white;
}