يمكن تحسين مظهر الجدول في HTML بشكل كبير باستخدام CSS. في هذا الدرس، سننظر في كيفية تنسيق أجزاء مختلفة من الجدول.
كما ترى أدناه، يكون للجدول المحدد المظهر المناسب، والذي يتم الحصول عليه من خلال تطبيق سمات CSS عليه.
الشركة | الاتصال | البلد |
---|---|---|
ألفريدز فوتيركيست | ماريا أندرس | ألمانيا |
مركز موكتيزوما التجارى | فرانسيسكو تشانغ | المكسيك |
ارنست هاندل | رولان مندل | النمسا |
الجزيرة للتجارة | هيلين بينيت | المملكة المتحدة |
Laughing Bacchus Winecellars | يوشي تاناموري | كندا |
مخازن الغذاء ريونيتي | Giovanni Rovelli | إيطاليا |
الحدود في الجداول
لتحديد حدود الجدول في CSS، نستخدم سمة الحدود.
يحدد المثال التالي border أسود لعناصر <table> و <th> و <td>:
table, th, td {
border: 1px solid black;
}
لاحظ أن نموذج الجدول أعلاه له حدين. وذلك لأن عناصر الجدول <th> و <td> لها حدود منفصلة.
سمة border-collapse
تُستخدم سمة طي الحدود لتحويل حدود الجدول الثنائي التي يجب تقليلها إلى حد واحد:
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
إذا كنت تريد رسم حد واحد فقط حول الجدول، فقم بتعيين سمة الحد على علامة <table> فقط:
table {
border: 1px solid black;
}
سمات الطول والعرض للجدول
يتم تحديد طول وعرض الجدول باستخدام سمات width و height في لغة CSS.
في المثال التالي، تم ضبط طول الجدول على 100٪ وعرض عناصر <th> على 50 بكسل.
الاسم الاول | الكنية | مدخرات |
---|---|---|
نفذ | جريفين | 200 دولار |
لويس | جريفين | 180 دولارًا |
جو | سوانسون | 400 دولار |
th {
text-align: left;
}
محاذاة أفقية Horizontal alignment
تُستخدم سمة text-align لمحاذاة المحتوى أفقيًا (مثل اليسار واليمين والوسط) في <th> أو <td>.
بشكل افتراضي، يكون محتوى العنصر <th> محاذيًا للوسط ومحتوى العنصر <td> إلى اليسار.
في مثال الجدول أدناه، تتم محاذاة النصوص الموجودة داخل عناصر <th> إلى اليسار:
th {
text-align: left;
}
انحياز عمودي Vertical alignment
باستخدام سمة vertical-align (باستخدام القيم top،bottom و middle)، يمكن محاذاة النص داخل عناصر <th> أو <td> عموديًا.
بشكل افتراضي، تكون المحاذاة الرأسية لمحتويات الجدول في (middle) لكل من عنصري <th> و <td>).
في المثال التالي، تم تعيين المحاذاة الأفقية لعناصر <td> على القيمة bottom:
td {
height: 50px;
vertical-align: bottom;
}
ضبط Padding المتروكة للجداول
للتحكم في المسافة بين محتويات الجدول وحدوده، نستخدم سمة padding في عنصري <th> و <td>:
th, td {
padding: 15px;
text-align: left;
}
فواصل أفقية
لإضافة فواصل أفقية إلى الجدول، قم بتعيين سمة border-bottom لعنصري <th> و <td>:
th, td {
border-bottom: 1px solid #ddd;
}
استخدام ميزة hover للجدول
استخدم hover: في علامة <tr> لتمييز الصفوف التي يتم وضع الماوس عليها:
tr:hover {background-color: #f5f5f5}
إنشاء جداول مموجة لقراءة المزيد من البيانات
لتحسين قابلية قراءة البيانات في الجداول، يمكنك استخدام المحدد nth-child () وسمة background-color للصفوف الزوجية والفردية في الجدول.
tr:nth-child(even) {background-color: #f2f2f2}
لون الجدول
في المثال التالي، تم تعيين لون خلفية الجدول ولون عناصر النص <th>:
th {
background-color: #4CAF50;
color: white;
}
الجداول التفاعلية
إذا كان حجم الشاشة صغيرًا جدًا لعرض جميع محتويات الجدول، فسيتم تمرير الجدول سريع الاستجابة أفقيًا.
للقيام بذلك، أدخل الجدول في عنصر div واضبط سمة النمط الخاصة به على overflow-x: auto:
<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>