شرح الجداول في HTML بالعربي — بناء جداول بيانات احترافية

تحتاج أحياناً إلى عرض بيانات بطريقة منظمة في صفوف وأعمدة — كجدول المقارنة بين خطط الأسعار، أو جدول الدرجات، أو قائمة المنتجات. HTML تمتلك مجموعة وسوم مخصصة تماماً لهذا الغرض.

الوسوم الأساسية للجدول — الأربعة الكبار

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

أبسط جدول ممكن

<table>
    <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>

لاحظ التركيب: <table> يحتوي على <tr>، وكل <tr> يحتوي على <th> أو <td>. الصف الأول عادةً فيه <th> للعناوين، وباقي الصفوف فيها <td> للبيانات.

تذكر: بدون CSS سيظهر الجدول بدون حدود مرئية. الحدود تُضاف بـ CSS: table, th, td { border: 1px solid black; }

أقسام الجدول الدلالية — thead وtbody وtfoot

للجداول الكبيرة والاحترافية، يُقسَّم الجدول إلى ثلاثة أقسام دلالية. هذا يُحسّن قابلية القراءة في الكود ويُفيد محركات البحث وقارئات الشاشة.

<table>
    <!-- رأس الجدول -->
    <thead>
        <tr>
            <th>المنتج</th>
            <th>الكمية</th>
            <th>السعر</th>
        </tr>
    </thead>

    <!-- جسم الجدول -->
    <tbody>
        <tr>
            <td>كتاب HTML</td>
            <td>2</td>
            <td>50 دولار</td>
        </tr>
        <tr>
            <td>كورس CSS</td>
            <td>1</td>
            <td>30 دولار</td>
        </tr>
    </tbody>

    <!-- تذييل الجدول -->
    <tfoot>
        <tr>
            <td colspan="2">المجموع الكلي</td>
            <td>130 دولار</td>
        </tr>
    </tfoot>
</table>

دمج الخلايا — colspan وrowspan

أحياناً تحتاج خلية واحدة أن تمتد عبر عدة أعمدة أو صفوف. هذا هو دور colspan وrowspan.

دمج أعمدة — colspan

تجعل الخلية تمتد عبر عدد من الأعمدة. الرقم = عدد الأعمدة التي ستدمجها.

<table>
    <tr>
        <!-- هذه الخلية تمتد على عمودين -->
        <th colspan="2">معلومات شخصية</th>
    </tr>
    <tr>
        <td>الاسم الأول</td>
        <td>الاسم الأخير</td>
    </tr>
</table>

دمج صفوف — rowspan

تجعل الخلية تمتد عبر عدد من الصفوف.

<table>
    <tr>
        <!-- هذه الخلية تمتد على صفين -->
        <td rowspan="2">المجموعة أ</td>
        <td>الطالب: أحمد</td>
    </tr>
    <tr>
        <!-- لا تضع خلية هنا — الخلية السابقة تشغل هذا المكان -->
        <td>الطالب: سارة</td>
    </tr>
</table>

عنوان الجدول — <caption>

يمكنك إضافة عنوان للجدول يظهر فوقه تلقائياً:

<table>
    <caption>جدول درجات الطلاب — الفصل الأول 2025</caption>
    <thead>
        <tr>
            <th>الطالب</th>
            <th>الدرجة</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>أحمد</td>
            <td>95</td>
        </tr>
    </tbody>
</table>

مثال عملي كامل — جدول مقارنة خطط الأسعار

<table>
    <caption>مقارنة خطط الاشتراك</caption>
    <thead>
        <tr>
            <th>الميزة</th>
            <th>مجاني</th>
            <th>مدفوع</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>الدروس الأساسية</td>
            <td>✅</td>
            <td>✅</td>
        </tr>
        <tr>
            <td>الدروس المتقدمة</td>
            <td>❌</td>
            <td>✅</td>
        </tr>
        <tr>
            <td>الشهادة</td>
            <td>❌</td>
            <td>✅</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2"></td>
            <td><strong>29 دولار/شهر</strong></td>
        </tr>
    </tfoot>
</table>

الأسئلة الشائعة — FAQ

ما الفرق بين <th> و<td>؟

<th> للعناوين — نصه عريض ومتوسط أفقياً افتراضياً، ويُخبر محركات البحث أن هذه خلية عنوان. <td> للبيانات العادية — نصه عادي واتجاهه يعتمد على الاتجاه الافتراضي للنص.

هل <thead> و<tbody> إجباريان؟

لا، الجدول يعمل بدونهما. لكنهم يُحسّنون قابلية قراءة الكود، ويُفيدان في تطبيق تنسيقات CSS منفصلة على كل قسم، ومهمان لـ SEO وإمكانية الوصول.

هل يمكنني وضع صور أو روابط داخل خلايا الجدول؟

نعم، <td> يمكنه استيعاب أي محتوى HTML: نصوص، صور، روابط، حتى جداول أخرى متداخلة.

كيف أجعل الجدول يتكيف مع شاشات الموبايل؟

الجداول صعبة على الموبايل بطبيعتها. الحل الأشيع هو إضافة overflow-x: auto لعنصر يُغلّف الجدول: <div style="overflow-x: auto;"><table>...</table></div>