تنسيق الجدول في CSS | كود جدول CSS

 

يمكن تحسين مظهر الجدول في 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>