تنسيق الجدول في 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

تُستخدم سمة طي الحدود لتحويل حدود الجدول الثنائي التي يجب تقليلها إلى حد واحد:

csstable2

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>



كلمات مفتاحية: