فاصله داخلی جدول
برای کنترل فضای بین محتوا و حاشیه در جدول، از خاصیت padding برای عناصر <td> و <th> استفاده کنید:
مثال: تنظیم فاصله داخلی
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
</table>th, td {
padding: 15px;
text-align: left;
}جداکننده‌های افقی
برای اضافه کردن خط زیر عناصر <th> و <td>، از خاصیت border-bottom استفاده کنید:
مثال: جداکننده‌های افقی
th, td {
border-bottom: 1px solid #ddd;
}جدول دارای قابلیت هاور
برای برجسته کردن ردیف‌های جدول با حرکت ماوس، از سلکتور :hover بر روی عناصر <tr> استفاده کنید:
مثال: جدول با هاور
tr:hover {
background-color: coral;
}جدول با خطوط راه‌راه (Striped Table)
برای ایجاد جدول راه‌راه، از سلکتور nth-child() استفاده کرده و به ردیف‌های زوج (یا فرد) رنگ پس‌زمینه اضافه کنید:
مثال: جدول راه‌راه
tr:nth-child(even) {
background-color: #f2f2f2;
}رنگ‌بندی جدول
برای تنظیم رنگ پس‌زمینه و رنگ متن در عناصر <th>، از background-color و color استفاده کنید:
مثال: رنگ‌بندی جدول
th {
background-color: #04AA6D;
color: white;
}این تنظیمات به شما کمک می‌کنند تا جدول‌های خود را جذاب‌تر و کاربردی‌تر کنید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام