ویژگی padding جدول در CSS
با ویژگی padding، در تگ های td و th می توانیم فاصله ی بین داده های جدول و حاشیه را کنترل کنیم.
| # | نام | نام خانوادگی | سن |
|---|---|---|---|
| 1 | احسان | اسلامی | 31 |
| 2 | امیر | پاشایی | 27 |
| 3 | نگین | سرخوش | 28 |
th, td {
padding: 10px;
text-align: right;
}جدول با حاشیه پایین در CSS
با استفاده از ویژگی border-bottom، در تگ های th و td، جدول به صورت زیر در می آید.
| # | نام | نام خانوادگی | سن |
|---|---|---|---|
| 1 | احسان | اسلامی | 31 |
| 2 | امیر | پاشایی | 27 |
| 3 | نگین | سرخوش | 28 |
th, td {
border-bottom: solid 1px #ccc;
}hover جدول در CSS
با استفاده از شِبه کلاس hover، در تگ tr، می توانیم با قرار دادن نشانگر ماوس روی سطرهای جدول، رنگ سطرها را تغییر دهیم.
نکته: برای اطلاعات بیشتر، به آموزش شبه کلاس hover مراجعه کنید.
| # | نام | نام خانوادگی | سن |
|---|---|---|---|
| 1 | احسان | اسلامی | 31 |
| 2 | امیر | پاشایی | 27 |
| 3 | نگین | سرخوش | 28 |
tr:hover {
background-color: #00a218;
}جدول راه راه در CSS
با شِبه کلاس nth-child()، می توانیم سطر های جدول را یکی در میان تغییر دهیم. جدول زیر به صورت راه راه ویژگی background-color گرفته است.
نکته: برای اطلاعات بیشتر، به آموزش شبه کلاس nth-child مراجعه کنید.
| # | نام | نام خانوادگی | سن |
|---|---|---|---|
| 1 | احسان | اسلامی | 31 |
| 2 | امیر | پاشایی | 27 |
| 3 | نگین | سرخوش | 28 |
tr:nth-child(even) {
background-color: #eeefee;
}
نکته: برای دسترسی به سطر های فرد، از odd و برای سطرهای زوج، از even استفاده می کنیم.
نکته: حتما شبه کلاس nth-child را قبل از hover استفاده کنید. درغیراین صورت hover اجرا نمی شود.
نمونه کد جدول در CSS
در نمونه کد زیر، ما یک جدول زیبا با کمک تمام ویژگی های بالا رسم کرده ایم.
| # | نام | نام خانوادگی | سن |
|---|---|---|---|
| 1 | احسان | اسلامی | 31 |
| 2 | امیر | پاشایی | 27 |
| 3 | نگین | سرخوش | 28 |
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 10px;
text-align: right;
}
tr:nth-child(even) {
background: #eeefee;
}
tr:hover {
background-color: #e8fdec;
}
tr:nth-child(1) {
background: #7cd689;
}خلاصه درس
در این درس با سبک جدول (Table Style) در CSS:
- ویژگی padding در جدول
- جدول با حاشیه پایین
- hover در جدول
- جدول راه راه
آشنا شدیم.
احسان اسلامی
