HTML - Table Styling تنسيق الجداول

تنسيق الجداول في HTML (HTML Table Styling)

يمكنك استخدام CSS لتنسيق الجداول في HTML وإضافة لمسة جمالية لتسهيل قراءة البيانات.

---

✅ تحديد حدود (Borders) للجداول

<style>
  table, th, td {
    border: 1px solid black;
  }
</style>

<table>
  <tr>
    <th>الاسم</th>
    <th>العمر</th>
  </tr>
  <tr>
    <td>سارة</td>
    <td>25</td>
  </tr>
</table>

⬅ يتم تعيين حدود سوداء حول الجدول والخلايا.

---

✅ دمج حدود الخلايا باستخدام border-collapse

<style>
  table {
    border-collapse: collapse;
  }
</style>

⬅ هذا يجعل الحدود بين الخلايا تُعرض كحد واحد فقط.

---

✅ عرض الجدول بالكامل

<style>
  table {
    width: 100%;
  }
</style>

⬅ يجعل الجدول يشغل عرض الصفحة بالكامل.

---

✅ محاذاة النص داخل الخلايا

<style>
  th {
    text-align: left;
  }
</style>

⬅ يُستخدم لمحاذاة النص داخل خلايا العنوان إلى اليسار.

---

✅ تلوين صفوف الجدول

<style>
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
</style>

⬅ يضيف لون مختلف للصفوف الزوجية لتسهيل القراءة.

---

✅ تمييز الخلية عند تمرير الفأرة

<style>
  tr:hover {
    background-color: #ddd;
  }
</style>

⬅ عند تمرير الفأرة فوق الصف، يتغير لونه.

---

✅ تمييز عناوين الأعمدة بلون مختلف

<style>
  th {
    background-color: #04AA6D;
    color: white;
  }
</style>

⬅ يجعل عناوين الأعمدة مميزة ومرئية أكثر.

---

💡 ملاحظات:

• التنسيق باستخدام CSS يمنحك تحكمًا كاملاً في مظهر الجدول.
• يمكنك تنسيق الجداول داخل ملف .css خارجي أو داخل الوسوم <style>.
• التنسيق يساعد على تحسين تجربة المستخدم وفهم البيانات بشكل أسرع.