نمط جدول CSS
حشوة الجدول
للتحكم في المسافة بين الحد والمحتوى في جدول ، استخدم
padding
الخاصية في عنصري <td> و <th>:
مثال
th, td
{
padding: 15px;
text-align: left;
}
فواصل أفقية
الاسم الاول | اسم العائلة | مدخرات |
---|---|---|
نفذ | جريفين | $100 دولار |
لويس | جريفين | 150 دولارًا |
جو | سوانسون | 300 دولار |
أضف border-bottom
الخاصية إلى <th> و <td> للفواصل الأفقية:
مثال
th, td {
border-bottom: 1px solid #ddd;
}
طاولة تحوم
استخدم :hover
المحدد على <tr> لتمييز صفوف الجدول عند تحريك الماوس فوقها:
الاسم الاول | اسم العائلة | مدخرات |
---|---|---|
نفذ | جريفين | $100 دولار |
لويس | جريفين | 150 دولارًا |
جو | سوانسون | 300 دولار |
مثال
tr:hover {background-color: yellow;}
طاولات مخططة
الاسم الاول | اسم العائلة | مدخرات |
---|---|---|
نفذ | جريفين | $100 دولار |
لويس | جريفين | 150 دولارًا |
جو | سوانسون | 300 دولار |
بالنسبة للجداول المخططة بالحمار الوحشي ، استخدم nth-child()
المحدد وأضف background-color
كل صفوف الجدول الزوجية (أو الفردية):
مثال
tr:nth-child(even) {background-color: #f2f2f2;}
لون الجدول
يحدد المثال أدناه لون الخلفية ولون النص لعناصر <th>:
الاسم الاول | اسم العائلة | مدخرات |
---|---|---|
نفذ | جريفين | $100 دولار |
لويس | جريفين | 150 دولارًا |
جو | سوانسون | 300 دولار |
مثال
th {
background-color: #04AA6D;
color: white;
}