HTML Tables - إنشاء الجداول وعرض البيانات

1. وسم <table> وأساسيات الجداول

لإنشاء جدول بسيط نستخدم الوسم <table> مع وسوم أخرى لتحديد الصفوف والأعمدة.

🔹 الوسوم الأساسية:

• <table> : بداية الجدول.
• <tr> : إنشاء صف (Table Row).
• <td> : إنشاء خلية بيانات (Table Data).
• <th> : خلية عنوان (Table Header).

مثال جدول بسيط:

<table border="1">
  <tr>
    <th>الاسم</th>
    <th>العمر</th>
    <th>المدينة</th>
  </tr>
  <tr>
    <td>أحمد</td>
    <td>25</td>
    <td>القاهرة</td>
  </tr>
  <tr>
    <td>منى</td>
    <td>30</td>
    <td>الإسكندرية</td>
  </tr>
</table>

📌 النتيجة:

جدول منظم بثلاثة أعمدة: الاسم، العمر، المدينة.

---

2. تقسيم الجدول إلى أقسام رئيسية

لتنظيم الجدول أكثر، يمكننا تقسيمه إلى:

• <thead> : رأس الجدول (العناوين).
• <tbody> : جسم الجدول (البيانات).
• <tfoot> : ذيل الجدول (خاتمة أو ملخص).

مثال:

<table border="1">
  <thead>
    <tr>
      <th>المنتج</th>
      <th>السعر</th>
      <th>الكمية</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>حاسوب محمول</td>
      <td>15000 جنيه</td>
      <td>5</td>
    </tr>
    <tr>
      <td>هاتف ذكي</td>
      <td>8000 جنيه</td>
      <td>10</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">إجمالي العناصر: 15</td>
    </tr>
  </tfoot>
</table>

📌 هنا تم استخدام colspan="3" لدمج ثلاث خلايا في خلية واحدة بالصف الأخير.

---

3. دمج الخلايا: colspan و rowspan

• colspan: دمج عدة أعمدة.
• rowspan: دمج عدة صفوف.

مثال دمج أعمدة:

<td colspan="2">بيانات مدمجة</td>

مثال دمج صفوف:

<td rowspan="3">بيانات مشتركة</td>

---

4. إضافة حدود وتنسيق الجداول

افتراضيًا، الجداول في HTML لا تحتوي على حدود. يمكن إضافة الحدود باستخدام خاصية border أو عبر CSS.

باستخدام HTML:

<table border="1">

باستخدام CSS:

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

---

5. جداول متقدمة مع CSS

يمكن استخدام CSS لتنسيق الجداول بشكل احترافي:

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th {
    background-color: #4CAF50;
    color: white;
  }
  td, th {
    border: 1px solid #ddd;
    text-align: center;
    padding: 10px;
  }
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
</style>

📌 هذا التنسيق يجعل الجدول:

• بعرض كامل.
• يحتوي على ألوان بديلة للصفوف.
• بخط واضح وسهل القراءة.

---

6. استخدام الجداول في الحياة العملية

أمثلة على استخدامات الجداول:
🔹 عرض المنتجات والأسعار في متجر إلكتروني.
🔹 إنشاء جداول حضور أو بيانات الموظفين.
🔹 عرض إحصائيات أو تقارير.
🔹 ترتيب جدول زمني للدروس أو الأحداث.

---

الخلاصة

الجداول في HTML من الأدوات القوية لعرض البيانات بشكل منظم وواضح. بفضل استخدام الوسوم مثل <thead>, <tbody>, <tfoot>، وخصائص مثل colspan و rowspan، يمكن تصميم جداول مرنة ومناسبة لمختلف الاستخدامات. ومع إضافة CSS يمكن تحويل الجدول البسيط إلى تصميم أنيق واحترافي.