تعلم إضافة وتخصيص حدود الجداول في CSS خطوة بخطوة

🎨 تحويل الجداول: دليل شامل لإضافة وتخصيص الحدود في CSS

بعد أن تعلمنا في الدروس السابقة كيفية إنشاء جدول وتنسيق محتواه، حان الوقت لإضافة لمسة جمالية ووظيفية مهمة: الحدود (Borders). تخيل جدولاً بدون حدود – سيكون من الصعب جداً تمييز الصفوف والأعمدة! في هذا الدرس، سنتعلم معاً كيفية إضافة حدود للجداول وتخصيصها بالكامل باستخدام CSS، خطوة بخطوة وبأمثلة بسيطة.

📝 فهم خصائص الحدود الأساسية

تتحكم في حدود أي عنصر (بما في ذلك الجدول وخلابيه) من خلال ثلاث خصائص رئيسية في CSS:

1. border-style: تحدد نمط الحد. هل هي خط متصل؟ متقطع؟ منقط؟
2. border-width: تحدد سمك الحد (مثل 1px، 2px، thin).
3. border-color: تحدد لون الحد (مثل red، #333333، rgb(0, 150, 255)).

يمكنك استخدام كل خاصية على حدة، أو استخدام الخاصية المختصرة border.

🛠️ تطبيق الحدود على الجدول

لنبدأ بمثال جدول بسيط بدون أي تنسيق:

<table>
  <tr>
    <th>الاسم</th>
    <th>العمر</th>
  </tr>
  <tr>
    <td>أحمد</td>
    <td>25</td>
  </tr>
  <tr>
    <td>سارة</td>
    <td>30</td>
  </tr>
</table>

النتيجة بدون CSS: جدول بلا حدود واضحة.

لإضافة حدود بسيطة حول كل خلية (<td>) وكل عنوان (<th>) في الجدول، نستخدم الخاصية المختصرة border:

/* تطبيق حدود على جميع الخلايا وعناوين الجدول */
td, th {
  border: 1px solid black; /* سمك 1 بكسل، نمط متصل، لون أسود */
}

النتيجة: الآن كل خلية لها حدودها الخاصة. لكن قد تلاحظ وجود مسافة مزدوجة بين الخلايا! هذا لأن كل خلية لها حدها المستقل.

✨ حل مشكلة الحدود المزدوجة بـ border-collapse

لدمج الحدود المتجاورة للخلايا وجعلها حداً واحداً أنيقاً، نستخدم خاصية border-collapse على عنصر <table> نفسه. هذه الخاصية هي سر الفرق بين الجدول المحترف والجدول الهاوي!

table {
  border-collapse: collapse; /* دمج الحدود المتجاورة */
}

td, th {
  border: 1px solid black;
}

النتيجة: اختفت الحدود المزدوجة وأصبح الجدول أنظف وأكثر احترافية! ✅

🎨 تخصيص نمط ولون وسمك الحدود

لنجعل جدولنا أكثر جاذبية من خلال التخصيص.

1. تغيير نمط الحدود (border-style)

جرب هذه الأنماط الشائعة بدلاً من solid (المتصل):

td, th {
  border: 2px dashed blue; /* خطوط متقطعة */
  /* border: 3px dotted green; */ /* نقاط */
  /* border: 4px double red; */   /* خط مزدوج */
}

2. تخصيص جوانب محددة من الحدود

ماذا لو أردت حداً مختلفاً للجانب السفلي فقط للعناوين (<th>)؟

th {
  border-bottom: 3px solid darkblue; /* حد سفلي سميك فقط */
  /* نزيل الحدود الأخرى من العناوين */
  border-left: none;
  border-right: none;
  border-top: none;
}

3. إضافة حدود للجدول نفسه

لا تنسَ إضافة حد خارجي للجدول ككل:

table {
  border-collapse: collapse;
  border: 2px solid gray; /* حد خارجي للجدول */
}

💡 مثال عملي شامل

لنطبق كل ما تعلمناه على جدول لجدول مواعيد:

table {
  border-collapse: collapse;
  width: 100%;
  border: 2px solid #4CAF50; /* حد أخضر للجدول */
}

th {
  background-color: #4CAF50;
  color: white;
  border-bottom: 3px solid #2E7D32; /* حد سفلي داكن للعناوين */
  padding: 12px;
  text-align: right;
}

td {
  border: 1px solid #ddd; /* حدود خفيفة للخلايا */
  padding: 8px;
}

/* تغيير لون خلفية الصف عند المرور بالفأرة */
tr:hover {
  background-color: #f5f5f5;
}

النتيجة: جدول ذو مظهر حديث، واضح، وسهل القراءة! 🎉

📌 ملخص الدرس

تعلمنا في هذا الدرس الأساسيات القوية لتنسيق حدود الجداول:

• استخدام الخصائص border-style, border-width, border-color أو الخاصية المختصرة border.
• أهمية خاصية border-collapse: collapse; لدمج الحدود ومنع الظاهرة المزدوجة.
• كيفية تخصيص حدود جوانب محددة من العنصر (كالجانب السفلي فقط).
• تطبيق أمثلة عملية لإنشاء جداول أنيقة ووظيفية.