CSS - Tables الجداول

CSS - تنسيق الجداول (Tables)

🔸 توفّر CSS خصائص متعددة لتنسيق الجداول وتحسين مظهرها سواء من حيث الحجم، الحدود، المحاذاة، الألوان، أو الاستجابة على الأجهزة المختلفة.

✅ تنسيق الحدود باستخدام border

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 10px;
}

✅ التحكم بحجم الجدول

table {
  width: 100%;
  height: auto;
}

✅ محاذاة محتوى الخلايا

th {
  text-align: left;
}
td {
  text-align: center;
  vertical-align: middle;
}

✅ تزيين الجداول بالألوان والتباين

table {
  background-color: #f9f9f9;
}
th {
  background-color: #333;
  color: white;
}
td {
  background-color: #fff;
}

✅ جعل الجدول مستجيبًا (Responsive)

📱 يمكن تغليف الجدول داخل عنصر <div> وإعطاؤه خاصية التمرير الأفقي.

<div style="overflow-x:auto;">
  <table>
    <tr>
      <th>الاسم</th>
      <th>الوظيفة</th>
      <th>العمر</th>
    </tr>
    <tr>
      <td>محمود</td>
      <td>مطور ويب</td>
      <td>40</td>
    </tr>
    <tr>
      <td>نورا</td>
      <td>مصممة</td>
      <td>30</td>
    </tr>
  </table>
</div>

💡 ملاحظات إضافية

• استخدم border-collapse: collapse; لدمج الحدود بين الخلايا.
• لتباعد إضافي، يمكن استخدام padding داخل th وtd.
• الجداول الكبيرة يمكن أن تكون مزعجة في الشاشات الصغيرة، لذا يُفضل دائمًا جعلها قابلة للتمرير.