📊 الجداول في HTML: تنظيم وعرض البيانات بترتيب أنيق

تخيل أنك تريد عرض قائمة بأسماء الطلاب ودرجاتهم، أو جدول مواعيد الحصص الأسبوعية، أو حتى مقارنة بين مواصفات منتجين. الطريقة المثلى لعرض هذه البيانات المنظمة في صفحة الويب هي استخدام الجداول (Tables). في هذا الدرس، سنتعلم معاً كيفية بناء جدول HTML خطوة بخطوة، من الصفر وحتى إتقان أساسياته. هيا بنا نبدأ! 🚀

🔨 الهيكل الأساسي للجدول: ثلاث علامات رئيسية

لكل جدول HTML هيكل أساسي مكون من ثلاث علامات رئيسية تعمل معاً:

  1. <table>: هذه هي العلامة الأم (الحاوية) التي نعلن بداخلها أننا سننشئ جدولاً. كل شيء متعلق بالجدول يوضع بين <table> و </table>.
  2. <tr>: اختصار لـ Table Row. تُستخدم لإنشاء صف (Row) جديد داخل الجدول. كل <tr> تمثل سطراً أفقيًا في الجدول.
  3. <td>: اختصار لـ Table Data. تُستخدم لإنشاء خلية (Cell) داخل الصف. كل <td> تمثل علبة صغيرة تحتوي على بيانات فعلية (نص، صورة، إلخ). الخلايا هي التي تشكل الأعمدة.

💡 الفكرة ببساطة: الجدول (<table>) مثل الصفحة. نملأها بصفوف (<tr>). وكل صف نملؤه بخلايا (<td>).

<!DOCTYPE html>
<html>
<head>
    <title>جدولي الأول</title>
</head>
<body>
    <h2>جدول بسيط</h2>
    <table>
        <tr> <!-- الصف الأول -->
            <td>الاسم</td> <!-- الخلية الأولى في الصف الأول -->
            <td>العمر</td> <!-- الخلية الثانية في الصف الأول -->
        </tr>
        <tr> <!-- الصف الثاني -->
            <td>أحمد</td>
            <td>25</td>
        </tr>
        <tr> <!-- الصف الثالث -->
            <td>سارة</td>
            <td>22</td>
        </tr>
    </table>
</body>
</html>

النتيجة ستظهر جدولاً بثلاثة صفوف وعمودين، لكنه لن يكون جميلاً دون تنسيقات CSS (وهو موضوع لاحق).

🏷️ إضافة عناوين للجدول مع <th> و <caption>

لجعل جدولنا أكثر وضوحاً واحترافية، نضيف عناوين.

أولاً: عناوين الأعمدة مع <th> علامة <th> تعني Table Header. تشبه <td> تماماً، لكنها مخصصة لخلايا العنوان (عادة في الصف الأول). المتصفح يعرض نصها بخط عريض (Bold) ومركز (Center) تلقائياً.

<table>
    <tr>
        <th>اسم المنتج</th> <!-- عنوان العمود الأول -->
        <th>السعر</th>     <!-- عنوان العمود الثاني -->
        <th>الكمية</th>    <!-- عنوان العمود الثالث -->
    </tr>
    <tr>
        <td>كتاب HTML</td>
        <td>50 ريال</td>
        <td>10</td>
    </tr>
    <tr>
        <td>قلم جاف</td>
        <td>5 ريال</td>
        <td>100</td>
    </tr>
</table>

ثانياً: عنوان رئيسي للجدول مع <caption> علامة <caption> تضع عنواناً أو وصفاً للجدول ككل، ويظهر عادة في أعلى الجدول.

<table>
    <caption>📋 قائمة مشتريات المكتبة</caption> <!-- العنوان الرئيسي للجدول -->
    <tr>
        <th>اسم المنتج</th>
        <th>السعر</th>
        <th>الكمية</th>
    </tr>
    <tr>
        <td>كتاب HTML</td>
        <td>50 ريال</td>
        <td>10</td>
    </tr>
</table>

🧩 دمج الخلايا: colspan و rowspan

ماذا لو أردنا أن تشغل خلية واحدة مساحة عمودين أو صفين؟ هنا نستخدم خاصيتين قويتين.

  1. colspan: لدمج خلايا أفقياً عبر عدة أعمدة.
  2. rowspan: لدمج خلايا عمودياً عبر عدة صفوف.
<table border="1"> <!-- نستخدم border مؤقتاً لرؤية الحدود بوضوح -->
    <tr>
        <th>الاسم</th>
        <th colspan="2">معلومات الاتصال</th> <!-- هذه الخلية تشغل عمودين -->
    </tr>
    <tr>
        <td>خالد</td>
        <td>khaled@example.com</td>
        <td>0555123456</td>
    </tr>
</table>
<br>
<table border="1">
    <tr>
        <th rowspan="2">المادة</th> <!-- هذه الخلية تشغل صفين -->
        <th>الدرجة</th>
    </tr>
    <tr>
        <!-- لاحظ أن خلية "المادة" اندمجت من الأعلى، لذا لا نضع شيئاً هنا لهذا العمود في الصف الثاني -->
        <td>95</td>
    </tr>
</table>

🎨 تنسيق الجدول الأساسي (بدون CSS)

للأسف، HTML القديم كان يستخدم خصائص مثل border و width مباشرة داخل علامة <table>. هذه الطريقة قديمة وغير مستحبة اليوم، لأن تنسيق المظهر من مهمة لغة CSS وحدها. لكن لفهم الجداول بشكل مرئي أثناء التعلم، يمكنك استخدام border بشكل مؤقت:

<table border="1"> <!-- إضافة حدود حول الجدول والخلايا (قيمة 1 تعني رقيقة) -->
    <tr>
        <th>اليوم</th>
        <th>النشاط</th>
    </tr>
    <tr>
        <td>الاثنين</td>
        <td>تعلم HTML</td>
    </tr>
</table>

تذكر: الهدف من هذا العرض المؤقت هو مساعدتك على رؤية هيكل الجدول فقط. في المشاريع الحقيقية، نتحكم بكل هذه التفاصيل (الحدود، الألوان، المسافات) باستخدام CSS.

🧪 مثال تطبيقي شامل: جدول جدول الحصص

لنطبق كل ما تعلمناه في مثال واقعي وبسيط.

<!DOCTYPE html>
<html>
<head>
    <title>جدولي الأسبوعي</title>
</head>
<body>
    <h1>🗓️ جدول الحصص الدراسية</h1>

    <table border="1">
        <caption>الفصل الدراسي الأول - الصف الثالث</caption>
        <tr>
            <th>اليوم / الحصة</th> <!-- خلية عنوان في الزاوية -->
            <th>الحصة الأولى</th>
            <th>الحصة الثانية</th>
            <th>الحصة الثالثة</th>
        </tr>
        <tr>
            <th>الأحد</th> <!-- عنوان للصف -->
            <td>رياضيات</td>
            <td>علوم</td>
            <td>لغة عربية</td>
        </tr>
        <tr>
            <th>الاثنين</th>
            <td>تاريخ</td>
            <td colspan="2">تربية بدنية</td> <!-- حصة التربية البدنية مدتها حصتان -->
        </tr>
        <tr>
            <th>الثلاثاء</th>
            <td>جغرافيا</td>
            <td>لغة إنجليزية</td>
            <td>فنون</td>
        </tr>
    </table>

    <p>✅ لقد أنشأنا جدولاً منظمًا يعرض البيانات بوضوح!</p>
</body>
</html>

🎯 ملخص الدرس

لقد تعلمنا في هذا الدرس الركائز الأساسية لبناء الجداول في HTML:

  • العلامة الأساسية <table> لحاوية الجدول.
  • كيفية إنشاء صفوف بالعلامة <tr>.
  • كيفية ملء الصفوف ببيانات باستخدام <td> وعناوين باستخدام <th>.
  • إضافة عنوان وصفي للجدول ككل بـ <caption>.
  • تقنيات دمج الخلايا أفقيًا بـ colspan وعموديًا بـ rowspan.
  • استخدام border بشكل مؤقت لفهم الهيكل (مع التأكيد على أن التنسيق الحقيقي يكون بـ CSS).