جداول HTML: دليل عملي لإنشاء الجداول وتنسيقها مع أمثلة برمجية

مقدمة إلى جداول HTML

عند تطوير صفحة أو مشروع يعرض بيانات بشكل مرئي، فإن اختيار الطريقة المناسبة لعرض المعلومات ينعكس مباشرة على سهولة القراءة والفهم. وفي كثير من الحالات، تُعد جداول HTML الخيار الأنسب لعرض البيانات المنظمة التي تتكوّن من صفوف وأعمدة، خاصة عندما تكون كمية البيانات كبيرة أو تحتاج إلى مقارنة واضحة بين القيم.

في هذا الدليل، سنتعرف على مفهوم الجداول في HTML، وأهم الوسوم المستخدمة في بنائها، ثم ننتقل إلى ميزات متقدمة مثل العناوين، وcaption، وscope، وخصائص دمج الخلايا، بالإضافة إلى كيفية تنسيق الجداول باستخدام CSS.

ما هي الجداول في HTML؟

الجدول في HTML هو وسيلة لعرض البيانات داخل صفوف وأعمدة، بطريقة تشبه إلى حد كبير الجداول الموجودة في برامج الجداول الحسابية مثل Excel. ويمكنك من خلاله تنظيم أنواع متعددة من المحتوى مثل النصوص، والروابط، والصور، والأرقام داخل خلايا مرتبة ومنطقية.

تُستخدم الجداول عادة عندما تكون البيانات مترابطة بنيوياً، أي عندما تمثل كل خانة جزءاً من مجموعة بيانات أكبر يمكن قراءتها أفقياً وعمودياً.

أهم وسوم جداول HTML

• <table>: العنصر الرئيسي الذي يحتوي الجدول بالكامل.
• <tr>: يُستخدم لإنشاء صف.
• <td>: يُستخدم لإنشاء خلية بيانات عادية.
• <th>: يُستخدم لإنشاء خلية عنوان داخل الجدول.
• <caption>: يضيف وصفاً أو عنواناً توضيحياً للجدول.
• <thead>: يحدد رأس الجدول.
• <tbody>: يحتوي على المحتوى الرئيسي للجدول.
• <tfoot>: يحدد تذييل الجدول.

الصيغة الأساسية لإنشاء جدول في HTML

لبناء جدول بسيط، تحتاج أولاً إلى عنصر <table>، ثم تضيف داخله الصفوف باستخدام <tr>، وبعد ذلك تضع الخلايا داخل كل صف باستخدام <td>.

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td>Cell 4</td>
    <td>Cell 5</td>
    <td>Cell 6</td>
  </tr>
</table>

هذا المثال ينشئ جدولاً مكوّناً من صفّين، يحتوي كل صف على ثلاث خلايا. ورغم بساطة البنية، فإنها تمثل الأساس الذي تُبنى عليه جميع الجداول الأكثر تعقيداً.

كيفية إضافة عناوين للأعمدة باستخدام <th>

عند عرض بيانات حقيقية، من المهم أن يعرف القارئ وظيفة كل عمود. وهنا يأتي دور الوسم <th> الذي يُستخدم لإضافة عناوين توضيحية للجدول. في الغالب، توضع هذه العناوين في الصف الأول.

افتراضياً، يعرض المتصفح النص داخل <th> بخط عريض ومحاذاة وسطية، لتمييزه عن الخلايا العادية.

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
    <td>Hillary</td>
    <td>Nyakundi</td>
    <td>tables@mail.com</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>developer@mail.com</td>
  </tr>
</table>

باستخدام <th> يصبح من السهل معرفة أن العمود الأول مخصص للاسم الأول، والثاني لاسم العائلة، والثالث للبريد الإلكتروني. وهذا يحسن تجربة القراءة ويزيد من وضوح البيانات.

إضافة عنوان وصفي للجدول باستخدام <caption>

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

يساعد caption في منح القارئ سياقاً سريعاً قبل قراءة التفاصيل، كما أنه مفيد من ناحية تحسين الوصول وإيضاح محتوى الجدول.

الصيغة العامة

<table>
  <caption></caption>
  <tr></tr>
</table>

مثال عملي

<table>
  <caption>Free Coding Resources</caption>
  <tr>
    <th>Sites</th>
    <th>Youtube Channels</th>
    <th>Mobile Apps</th>
  </tr>
  <tr>
    <td>FreeCodeCamp</td>
    <td>FreeCodeCamp</td>
    <td>Enki</td>
  </tr>
  <tr>
    <td>W3Schools</td>
    <td>Academind</td>
    <td>Programming Hero</td>
  </tr>
  <tr>
    <td>Khan Academy</td>
    <td>The Coding Train</td>
    <td>SoloLearn</td>
  </tr>
</table>

في المثال السابق، يوضّح caption أن الجدول يعرض مصادر تعليمية مجانية لتعلم البرمجة، ما يمنح المستخدم فهماً سريعاً قبل استعراض البيانات.

فهم الخاصية scope في جداول HTML

تُستخدم الخاصية scope داخل خلايا العناوين <th> لتحديد نوع البيانات التي يرتبط بها العنوان: هل يصف عموداً؟ أم صفاً؟ أم مجموعة أعمدة أو صفوف؟

ورغم أن الجدول قد يبدو مفهوماً بصرياً دونها، فإن استخدام scope يمنح بنية أكثر دقة، خصوصاً في الجداول الكبيرة أو عند الاهتمام بتحسين الوصول وتقنيات قراءة الشاشة.

القيم الشائعة للخاصية scope

• col: يشير إلى أن العنوان خاص بعمود.
• row: يشير إلى أن العنوان خاص بصف.
• colgroup: يحدد مجموعة أعمدة.
• rowgroup: يحدد مجموعة صفوف.

الصيغة العامة

<table>
  <tr>
    <th scope="value"></th>
  </tr>
</table>

مثال على استخدام scope

<table>
  <tr>
    <th></th>
    <th scope="col">Semester</th>
    <th scope="col">Grade</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Jan - April</td>
    <td>Credit</td>
  </tr>
  <tr>
    <td>2</td>
    <td>May - August</td>
    <td>Pass</td>
  </tr>
  <tr>
    <td>3</td>
    <td>September - December</td>
    <td>Distinction</td>
  </tr>
</table>

في هذا المثال، تم تعيين scope="col" لأن العناوين Semester وGrade تصف الأعمدة وليس الصفوف.

دمج الخلايا أفقياً وعمودياً باستخدام colspan وrowspan

من الميزات المهمة في جداول HTML إمكانية جعل خلية واحدة تمتد عبر أكثر من عمود أو أكثر من صف. يُعرف ذلك باسم دمج الخلايا أو Cell Spanning.

• colspan: لتمديد الخلية أفقياً عبر عدة أعمدة.
• rowspan: لتمديد الخلية عمودياً عبر عدة صفوف.

تأخذ هاتان الخاصيتان قيماً رقمية أكبر من صفر، تعبّر عن عدد الخلايا التي تريد أن تمتد عبرها الخلية الحالية.

<table>
  <tr>
    <th>Name</th>
    <th>Subject</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td rowspan="2">Hillary</td>
    <td>Advanced Web</td>
    <td>75</td>
  </tr>
  <tr>
    <td>Operating System</td>
    <td>60</td>
  </tr>
  <tr>
    <td rowspan="2">Lary</td>
    <td>Advanced Web</td>
    <td>80</td>
  </tr>
  <tr>
    <td>Operating System</td>
    <td>75</td>
  </tr>
  <tr>
    <td colspan="3">Total Average: 72.5</td>
  </tr>
</table>

في المثال السابق:

• تم استخدام rowspan="2" لربط اسم الطالب بمادتين دراسيتين.
• تم استخدام colspan="3" لعرض متوسط الدرجات داخل خلية تمتد على عرض الجدول بالكامل.

من المهم جداً ضبط قيم colspan وrowspan بدقة، لأن أي خطأ في عدد الخلايا قد يؤدي إلى تشوه بنية الجدول أو تداخل العناصر بصرياً.

تقسيم الجدول إلى رأس ومحتوى وتذييل

كما هو الحال في كثير من البنى التنظيمية في الويب، يمكن تقسيم الجدول إلى ثلاثة أجزاء رئيسية:

• <thead>: يحتوي على رأس الجدول.
• <tbody>: يضم البيانات الأساسية.
• <tfoot>: يحتوي على الملاحظات الختامية أو المجاميع أو النتائج النهائية.

هذا التقسيم لا يضيف وضوحاً بصرياً فقط، بل يجعل الشيفرة أكثر تنظيماً ويسهّل التحكم في التنسيق لاحقاً باستخدام CSS أو JavaScript.

<table>
  <thead>
    <tr>
      <th colspan="2">October</th>
      <th colspan="2">November</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Sales</td>
      <td>Profit</td>
      <td>Sales</td>
      <td>Profit</td>
    </tr>
    <tr>
      <td>$200,00</td>
      <td>$50,00</td>
      <td>$300,000</td>
      <td>$70,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="4">November was more productive</th>
    </tr>
  </tfoot>
</table>

في هذا النموذج:

• يمثل thead عناوين الأشهر.
• يمثل tbody بيانات المبيعات والأرباح.
• يمثل tfoot الاستنتاج النهائي المتعلق بأداء شهر November.

ومن الجدير بالذكر أن الجدول يمكن أن يحتوي على أكثر من tbody عندما تحتاج إلى تجميع صفوف مرتبطة منطقياً ضمن مجموعات منفصلة.

كيفية تنسيق جداول HTML باستخدام CSS

رغم أن الجداول تعمل وظيفياً دون أي تنسيق، فإن مظهرها الافتراضي غالباً لا يكون كافياً في التطبيقات والمواقع الحديثة. يساعد CSS في تحويل الجدول من عرض بسيط إلى واجهة احترافية سهلة القراءة.

يمكنك استخدام CSS لتنسيق:

• ألوان الخلفية والنصوص.
• الحدود والمسافات الداخلية.
• المحاذاة وتوزيع الأعمدة.
• تمييز الصفوف أو الأعمدة المهمة.
• تثبيت رأس الجدول أثناء التمرير في الجداول الطويلة.

في العادة، يتم وضع التنسيقات في ملف منفصل بامتداد .css ثم ربطه بملف HTML. هذه الممارسة تجعل المشروع أكثر تنظيماً وأسهل في الصيانة والتطوير.

لماذا تنسيق الجدول مهم؟

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

متى تستخدم الجداول في تصميم الويب؟

ليست كل البيانات مناسبة للعرض داخل جدول، لذلك من المهم معرفة الحالات التي يكون فيها استخدام HTML Tables منطقياً وفعّالاً.

حالات مناسبة لاستخدام الجداول

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

متى لا يكون الجدول مناسباً؟

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

أفضل الممارسات عند إنشاء جداول HTML

• استخدم <th> للعناوين بدلاً من تنسيق خلايا <td> يدوياً.
• أضف <caption> عندما يحتاج الجدول إلى وصف مختصر واضح.
• استخدم scope لتحسين البنية الدلالية والوصول.
• قسّم الجداول الكبيرة باستخدام thead وtbody وtfoot.
• تجنب دمج الخلايا بشكل مفرط إذا كان ذلك سيؤثر على وضوح البيانات.
• احرص على أن يكون الجدول مقروءاً على الشاشات الصغيرة، خاصة في التصميم المتجاوب.

الخلاصة التقنية

تُعد جداول HTML من أهم الوسائل لعرض البيانات المنظمة بشكل واضح واحترافي، خصوصاً عندما تحتاج إلى بناء علاقات بصرية مباشرة بين الصفوف والأعمدة. وكلما استخدمت الوسوم الدلالية الصحيحة مثل <th> و<caption> و<thead> مع تنسيق CSS مدروس، حصلت على جدول أكثر قابلية للقراءة وأسهل في الصيانة وأفضل من ناحية تجربة المستخدم. تقنياً، الجداول ليست مجرد وسيلة عرض، بل بنية بيانات مرئية يجب تصميمها بعناية حتى تؤدي دورها بكفاءة داخل أي مشروع ويب.