الجداول في HTML: الصفوف والأعمدة والدمج

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

أبسط جدول

الجدول يُبنى من ثلاثة وسوم أساسية:

• <table>: الجدول كله.
• <tr>: صف واحد (table row).
• <td>: خلية بيانات داخل الصف (table data).

<table>
  <tr>
    <td>أحمد</td>
    <td>95</td>
  </tr>
  <tr>
    <td>منى</td>
    <td>88</td>
  </tr>
</table>

لاحظ طريقة التفكير: HTML تبني الجدول صفاً بعد صف. تفتح صفاً، ثم تضع خلاياه من اليمين لليسار (في الصفحات العربية)، ثم تغلقه وتبدأ الصف التالي. عدد الأعمدة يُحسب من عدد الخلايا في كل صف.

تخيّل الجدول مثل رفوف مكتبة: كل <tr> رف، وكل <td> خانة على هذا الرف.

خلايا العناوين: th

الجدول السابق لا يخبرنا ماذا تعني الأرقام. لذلك نضيف صفاً أول فيه عناوين الأعمدة باستخدام <th> (table header) بدل <td>:

<table>
  <tr>
    <th>الاسم</th>
    <th>الدرجة</th>
  </tr>
  <tr>
    <td>أحمد</td>
    <td>95</td>
  </tr>
</table>

يعرض المتصفح محتوى <th> بخط عريض وفي المنتصف. والأهم من الشكل: قارئات الشاشة تفهم أن هذه عناوين، فتقرأ للكفيف «الدرجة: 95» بدلاً من «95» وحدها.

أقسام الجدول: thead و tbody و tfoot

في الجداول الكبيرة نقسّم الصفوف إلى ثلاثة أجزاء، مثل الكتاب الذي له غلاف وصفحات وخاتمة:

• <thead>: صف (أو صفوف) العناوين.
• <tbody>: صفوف البيانات.
• <tfoot>: صف الخلاصة، مثل المجموع أو المتوسط.

ونضيف أيضاً <caption> كأول عنصر داخل <table>، ليكون عنواناً للجدول كله:

<table>
  <caption>درجات اختبار الرياضيات</caption>
  <thead>
    <tr>
      <th>الاسم</th>
      <th>الدرجة</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>أحمد</td>
      <td>95</td>
    </tr>
    <tr>
      <td>منى</td>
      <td>88</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>المتوسط</td>
      <td>91.5</td>
    </tr>
  </tfoot>
</table>

هذا التقسيم لا يغير الشكل كثيراً، لكنه يجعل الجدول منظماً، ويسهّل تنسيق كل جزء بـ CSS، ويساعد المتصفح عند طباعة الجداول الطويلة.

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

أحياناً تحتاج خلية تمتد على أكثر من عمود أو أكثر من صف، مثل حصة مزدوجة في جدول الحصص.

colspan: تجعل الخلية تمتد أفقياً على عدة أعمدة:

<tr>
  <td colspan="2">حصة رياضة مزدوجة</td>
</tr>

rowspan: تجعل الخلية تمتد رأسياً على عدة صفوف:

<tr>
  <th rowspan="2">الأحد</th>
  <td>عربي</td>
</tr>
<tr>
  <td>رياضيات</td>
</tr>

لاحظ في مثال rowspan أن الصف الثاني فيه خلية واحدة فقط، لأن خلية «الأحد» من الصف الأول تشغل مكانها فيه.

احسب الخلايا

عند الدمج، تأكد أن مجموع الأعمدة في كل صف متساوٍ. الخلية التي فيها colspan="2" تُحسب كخليتين. أي خطأ في الحساب يجعل الجدول «يتكسّر» وتظهر خلايا خارج مكانها.

الحدود والتنسيق

الجدول في HTML يظهر بلا حدود افتراضياً. ستجد في الأمثلة القديمة الخاصية border="1"، لكنها قديمة ولا ننصح بها. الطريقة الصحيحة هي CSS، وسنستخدم سطرين بسيطين منها في التجربة التالية لترى الجدول بوضوح، وستفهمها بالتفصيل في كورس CSS.

الجداول للبيانات فقط

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

جرّب بنفسك

هذا جدول حصص صغير فيه caption و thead ودمج للخلايا. أضف يوماً جديداً، وجرّب تغيير قيمة colspan:

جرّب بنفسكHTML

محرر الكود (HTML)<style> table { border-collapse: collapse; } th, td { border: 1px solid #999; padding: 8px 14px; } </style> <table> <caption>جدول الحصص</caption> <thead> <tr> <th>اليوم</th> <th>الحصة الأولى</th> <th>الحصة الثانية</th> </tr> </thead> <tbody> <tr> <th>الأحد</th> <td>عربي</td> <td>رياضيات</td> </tr> <tr> <th>الإثنين</th> <td colspan="2">رحلة علمية</td> </tr> <tr> <th>الثلاثاء</th> <td>علوم</td> <td>حاسب آلي</td> </tr> </tbody> </table>

شغّلارجع للكود الأصليأو اضغط Ctrl + Enter

الناتج

أخطاء شائعة

• وضع td مباشرة داخل table بدون tr: كل خلية يجب أن تكون داخل صف.
• اختلاف عدد الخلايا بين الصفوف: صف فيه 3 خلايا وآخر فيه 2 بدون colspan يجعل الجدول غير متناسق.
• استخدام td للعناوين وتكبيرها بالخط العريض: استخدم <th> للعناوين، فهي تحمل المعنى الصحيح لقارئات الشاشة.

اختبر نفسك

سؤال

أي وسم يمثل صفاً واحداً في الجدول؟

<td><th><tr>

سؤال

الجدول فيه 3 أعمدة، وتريد خلية واحدة تملأ الصف كله. ماذا تكتب؟

<td colspan="3"><td span="all"><td rowspan="3">

الخلاصة

• <table> الجدول، و <tr> الصف، و <td> خلية البيانات، و <th> خلية العنوان.
• الجدول يُبنى صفاً بعد صف، وعدد الأعمدة يأتي من عدد الخلايا.
• <caption> عنوان الجدول، و <thead> و <tbody> و <tfoot> تنظّم أجزاءه.
• colspan للدمج الأفقي، و rowspan للدمج الرأسي، مع حساب الخلايا بدقة.
• الحدود والتنسيق بـ CSS، والجداول للبيانات فقط لا لتخطيط الصفحة.