تنسيق جدول HTML
استخدم CSS لجعل الجداول تبدو أفضل.
جدول HTML - خطوط زيبرا
إذا أضفت لونًا للخلفية على كل صف جدول آخر ، فستحصل على تأثير خطوط حمار وحشي جميل.
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
لتصميم كل عنصر من عناصر صف الجدول ، استخدم :nth-child(even)
المحدد مثل هذا:
مثال
tr:nth-child(even) {
background-color: #D6EEEE;
}
ملاحظة: إذا كنت تستخدم (odd)بدلاً من ذلك
(even)، فسيحدث التصميم في الصف 1،3،5 وما إلى ذلك بدلاً من 2،4،6 وما إلى ذلك.
جدول HTML - خطوط حمار وحشي عمودية
لعمل خطوط حمار وحشي عمودية ، صمم كل عمود آخر ، بدلاً من كل صف آخر .
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
قم بتعيين :nth-child(even)عناصر بيانات الجدول مثل هذا:
مثال
td:nth-child(even),
th:nth-child(even) {
background-color: #D6EEEE;
}
ملاحظة: ضع :nth-child()المحدِّد على كل من thوالعناصر td
إذا كنت تريد أن يكون النمط على كل من الرؤوس وخلايا الجدول العادية.
اجمع بين خطوط حمار وحشي رأسية وأفقية
يمكنك دمج التصميم من المثالين أعلاه وسيكون لديك خطوط في كل صف آخر وكل عمود آخر.
إذا كنت تستخدم لونًا شفافًا ، فستحصل على تأثير متداخل.
استخدم rgba()لونًا لتحديد شفافية اللون:
مثال
tr:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
th:nth-child(even),td:nth-child(even) {
background-color: rgba(150,
212, 212, 0.4);
}
فواصل أفقية
| الاسم الاول | اسم العائلة | مدخرات |
|---|---|---|
| نفذ | جريفين | $100 دولار |
| لويس | جريفين | 150 دولارًا |
| جو | سوانسون | 300 دولار |
إذا حددت حدودًا في أسفل كل صف جدول فقط ، فسيكون لديك جدول بفواصل أفقية.
أضف border-bottomالخاصية إلى جميع
trالعناصر للحصول على فواصل أفقية:
مثال
tr {
border-bottom: 1px solid #ddd;
}
طاولة تحوم
استخدم :hoverالمحدد في
trلإبراز صفوف الجدول عند تحريك الماوس فوقها:
| الاسم الاول | اسم العائلة | مدخرات |
|---|---|---|
| نفذ | جريفين | $100 دولار |
| لويس | جريفين | 150 دولارًا |
| جو | سوانسون | 300 دولار |
مثال
tr:hover {background-color: #D6EEEE;}