ویژگی padding در جدول
با ویژگی 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;
}
احسان اسلامی
