الجداول: الهيكل والدمج وإمكانية الوصول

لماذا توجد الجداول

صممت جداول HTML لغرض واحد: عرض البيانات الجدولية -- المعلومات التي تنتمي بشكل طبيعي الى صفوف واعمدة، مثل الجداول الزمنية والاحصائيات ومقارنات الاسعار وجداول البيانات. قبل ان تظهر ادوات تخطيط CSS مثل Flexbox و Grid، اساء المطورون استخدام الجداول لبناء تخطيطات صفحات كاملة. هذه الممارسة اصبحت قديمة وضارة بامكانية الوصول. في هذا الدرس ستتعلم كيفية بناء جداول منظمة وسهلة الوصول بالطريقة الصحيحة.

هيكل الجدول الاساسي

كل جدول يبدا بعنصر <table>. داخله تنشئ صفوفا بواسطة <tr> (صف الجدول)، وخلايا رؤوس بواسطة <th> (راس الجدول)، وخلايا بيانات بواسطة <td> (بيانات الجدول). خلايا الراس تكون عريضة ومتمركزة افتراضيا، مما يشير للمتصفحات وقارئات الشاشة انها تسمي البيانات في ذلك العمود او الصف.

<table>
  <tr>
    <th>المنتج</th>
    <th>السعر</th>
    <th>متوفر</th>
  </tr>
  <tr>
    <td>لوحة مفاتيح</td>
    <td>$45.00</td>
    <td>نعم</td>
  </tr>
  <tr>
    <td>فارة</td>
    <td>$25.00</td>
    <td>لا</td>
  </tr>
</table>

الاقسام الدلالية: thead و tbody و tfoot

للجداول الاكبر، يجب تجميع الصفوف في اقسام منطقية باستخدام <thead> لصف او صفوف الراس، و <tbody> للبيانات الرئيسية، و <tfoot> لصفوف الملخص او المجاميع. هذه العناصر لا تغير المظهر المرئي افتراضيا، لكنها توفر بنية ذات معنى لقارئات الشاشة، وتمكن التمرير المستقل للجسم في بعض المتصفحات، وتجعل محددات CSS اكثر دقة.

<table>
  <caption>تقرير مبيعات الربع الثالث</caption>
  <thead>
    <tr>
      <th scope="col">الشهر</th>
      <th scope="col">الوحدات المباعة</th>
      <th scope="col">الايرادات</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>يوليو</td>
      <td>1,200</td>
      <td>$36,000</td>
    </tr>
    <tr>
      <td>اغسطس</td>
      <td>1,450</td>
      <td>$43,500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>المجموع</td>
      <td>2,650</td>
      <td>$79,500</td>
    </tr>
  </tfoot>
</table>

عنصر <caption> يوفر عنوانا للجدول. يجب ان يكون العنصر الاول داخل <table>. تعلن قارئات الشاشة عن العنوان قبل قراءة محتوى الجدول، مما يعطي المستخدمين سياقا حول البيانات التي سيسمعونها.

دمج الصفوف والاعمدة

احيانا تحتاج خلية لتمتد عبر اعمدة او صفوف متعددة. استخدم سمة colspan لدمج الاعمدة و rowspan لدمج الصفوف. عند استخدام هذه السمات تاكد من ان العدد الاجمالي للخلايا في كل صف لا يزال صحيحا -- الخلية التي تحتوي colspan="2" تحل محل خليتين عاديتين.

<table>
  <thead>
    <tr>
      <th rowspan="2" scope="col">الموظف</th>
      <th colspan="2" scope="colgroup">التواصل</th>
    </tr>
    <tr>
      <th scope="col">البريد الالكتروني</th>
      <th scope="col">الهاتف</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>سارة احمد</td>
      <td>sara@example.com</td>
      <td>555-0101</td>
    </tr>
    <tr>
      <td>عمر علي</td>
      <td>omar@example.com</td>
      <td>555-0202</td>
    </tr>
  </tbody>
</table>

امكانية الوصول مع سمة scope

سمة scope في عناصر <th> تخبر قارئات الشاشة ما اذا كان الراس ينطبق على عمود (scope="col") او صف (scope="row") او مجموعة اعمدة (scope="colgroup"). بدون scope يجب على قارئات الشاشة تخمين اي خلايا بيانات يصفها الراس، وغالبا ما تخطئ في الجداول المعقدة. اضف دائما scope الى رؤوس جداولك.

تنسيق الجداول بواسطة CSS

افتراضيا لا تحتوي جداول HTML على حدود وتبدو بسيطة. يجب ان يتم كل التنسيق المرئي من خلال CSS وليس من خلال سمات HTML المهملة مثل border و cellpadding و bgcolor. نمط شائع هو التخطيط المتناوب حيث تحصل الصفوف المتناوبة على الوان خلفية مختلفة لتحسين القراءة.

<style>
  table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 10px 14px;
    text-align: right;
  }
  th {
    background-color: #2c3e50;
    color: white;
  }
  tbody tr:nth-child(even) {
    background-color: #f2f2f2;
  }
  tbody tr:hover {
    background-color: #e8e8e8;
  }
</style>

خاصية border-collapse: collapse تدمج حدود الخلايا المتجاورة في حد واحد، مما يبدو انظف بكثير من نمط الحدود المزدوجة الافتراضي.

الجداول المتجاوبة

الجداول العريضة يمكن ان تتجاوز حدود الشاشات الصغيرة. استراتيجية متجاوبة بسيطة هي تغليف الجدول في حاوية قابلة للتمرير. هذا يحافظ على الجدول سليما مع السماح بالتمرير الافقي على الاجهزة المحمولة:

<div style="overflow-x: auto;">
  <table>
    <!-- محتوى الجدول هنا -->
  </table>
</div>

متى لا تستخدم الجداول

يجب استخدام الجداول فقط للبيانات الجدولية. لا تستخدم الجداول ابدا لتخطيط الصفحات او قوائم التنقل او محاذاة الصور او انشاء نصوص متعددة الاعمدة. جداول التخطيط تربك قارئات الشاشة التي تحاول قراءتها كبيانات، وتتعطل على الاجهزة المحمولة. استخدم CSS Flexbox او Grid للتخطيط بدلا من ذلك. قاعدة جيدة: اذا كانت البيانات منطقية في جدول بيانات، استخدم جدولا. اذا لم تكن كذلك، استخدم تخطيط CSS.