اذهب إلى المحتوى

الميزات المتقدمة لجداول HTML

ابراهيم الخضور

بواسطة ابراهيم الخضور

 مشاركة

بعد أن تعلمنا أساسيات التعامل مع الجداول في HTML في المقال السابق، نلقي الضوء في هذا المقال على بعض الميزات المتقدمة لجداول HTML مثل الشروحات captions والملخصات summaries وتجميع الصفوف لتشكيل ترويسة أو جسم أو تذييل، كما يمر المقال على مفهوم سهولة الوصول accessibility لذوي المشاكل البصرية إلى محتوى الجداول.

إضافة شرح إلى الجدول

يمكنك إضافة شروحات إلى الجداول باستخدام العنصر <caption> بعد وضعه تحت وَسم البداية للعنصر <table> مباشرةً: 

<table>
  <caption>Dinosaurs in the Jurassic period</caption>

  ...
</table>

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

ملاحظة: يمكن استخدام السمة summary التي يملكها العنصر <table> لإضافة وصف يمكن لقارئات الشاشة الوصول إليه وقراءته، لكننا نفضِّل استخدام العنصر <caption> بدلًا منها لأنها أُلغيَت في مواصفات HTML5، ولا يمكن رؤيتها من قبل المستخدِمين صحيحِي البصر لأنها لن تعرض على الصفحة.

تطبيق: إضافة شرح إلى جدول

لنلق نظرةً ثانيةً إلى مثال برنامج التدريس اليومي الذي طرحناه في المقال السابق:

  1. عُد إلى البرنامج اليومي لمدرّسة اللغات الذي ستجده على جيت-هاب واحفظ نسخًا منه على حاسوبك الشخصي.
  2. أضف شرحًا مناسبًا إلى محتوى الجدول.
  3. احفظ التعديلات التي أجريتها ثم حمِّل الملف ضمن المتصفح لترى النتيجة.

ملاحظة: يمكن إيجاد الملف بصورته النهائية على جيت-هاب.

إضافة هيكلية للجدول باستخدام <thead> و <tfoot> و <tbody>

عندما تتعقد هيكلية الجداول نوعًا ما، فلا بدّ من تحديد هذه الهيكلية بصورة أوضح، ولتنفيذ ذلك تُستخدَم العناصر <thead> و <tfoot> و <tbody> التي تسمح لك بتوصيف ترويسة وتذييل وجسم للجدول.

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

  • استخدِم العنصر <thead> لتغليف الجزء الذي يمثّل ترويسة الجدول، وهو عادةً الصف الأول الذي يضم ترويسات جميع الأعمدة لكن ليس دائمًا، فإذا كنت تستخدِم عنصرَي تجميع خلايا العمود <colgroup> و <col>، فضع ترويسة الجدول بعدها مباشرةً.
  • استخدِم العنصر <tfoot> لتغليف الجزء الذي يمثل تذييل الجدول، فقد يكون هذا الجزء هو الصف الأخير من الجدول وقد جمعت فيه قيم الأسطر السابقة مثلًا، وبإمكانك وضع عنصر التذييل في آخر الجدول كما تتوقع أو تحت ترويسة الجدول مباشرةً لأن المتصفح سيصيّره في المكان الصحيح.
  • استخدِم العنصر <tbody> لتغليف بقية الأجزاء، فقد يأتي جسم الجدول تحت الترويسة أو تحت التذييل تبعًا للطريقة التي تنويها في تنظيم الجدول.

ملاحظة: إن العنصر <tbody> هو دائمًا جزء من الجدول سواءً صرَّحت عن ذلك أم لا، ولكي تتحقق من ذلك افتح أيًا من أمثلة الجداول التي لا تحتوي على <tbody> ثم تفحص شيفرة باستخدام أدوات مطوري ويب وستجد أنّ المتصفح قد أضاف هذا العنصر تلقائيًا، وقد تتساءل إذًا لِمَ عليّ إضافته أصلًا، والجواب هو أنه سيمنحك تحكمًا أكبر بهيكلية الجدول وتنسيقه.

تطبيق: هيكلة جدول

لنحاول تجربة العناصر التي تهيكل الجدول:

  1. ابدأ بحفظ نسخ عن الملفين spending-record.html وminimal-table.css في مجلد جديد على حاسوبك.
  2. افتح ملف HTML في المتصفح وسترى أنّ الجدول واضح مع إمكانية لتحسينه قليلًا، إذ يبدو الصف "SUM" الذي يضم مجموع النفقات في المكان الخاطئ، كما قد تلاحظ بعض التفاصيل المفقودة في الشيفرة.
  3. ضع الصف الذي يمثّل الترويسة داخل عنصر <thead> والصف "SUM" ضمن عنصر <tfoot> وبقية الجدول ضمن عنصر <tbody>.
  4. احفظ التعديلات وحمّل الملف من جديد، ثم لاحظ كيف انتقل الصف إلى أسفل الجدول.
  5. استخدِم السمة colspan لتمتد الخلية "SUM" على الأعمدة الأربعة الأولى كي يظهر المبلغ تحت العمود "Cost".
  6. أضف بعض التنسيقات البسيطة إلى الجدول لترى فائدة تطبيق تنسيق CSS، لذا ضع الشيفرة التالية داخل العنصر <style> الموجود داخل العنصر <head> في ملف HTML: 
tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}
  1. احفظ التعديلات ثم حمّل الملف من جديد وشاهد نتيجة عملك، فإذا لم يكن العنصران <tbody> و <tfoot> في مكانهما الصحيح، لكان عليك كتابة شيفرة تنسيق أكثر تعقيدًا للحصول على النتيجة ذاتها.

ستبدو نتيجة العمل كما يلي:

ملاحظة: يمكنك الاطلاع على النسخة النهائية من المثال على جيت-هاب.

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

يمكن وضع جدول ضمن آخر شرط أن تكون هيكلية الجدول مكتملة بما في ذلك العنصر <table>، ولا ننصح عادةً بمثل هذا التداخل لأنه سيعقد من توصيف الجداول ويصعّب وصول قارئات الشاشة إلى محتوياتها، كما يُعَدّ إدراج خلايا أو صفوف أو أعمدة جديدة إلى الجدول المطلوب هو الأجدى في كثير من الحالات، لكنك قد تضطر أحيانًا إلى إدراج جدول ضمن آخر خاصةً إذا أردت إدراج محتوى من مصدر خارجي دون تعقيدات إضافية على سبيل المثال، وتعرض الشيفرة التالية جدولين بسيطين متداخلين: 

<table id="table1">
  <tr>
    <th>title1</th>
    <th>title2</th>
    <th>title3</th>
  </tr>
  <tr>
    <td id="nested">
      <table id="table2">
        <tr>
          <td>cell1</td>
          <td>cell2</td>
          <td>cell3</td>
        </tr>
      </table>
    </td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell5</td>
    <td>cell6</td>
  </tr>
</table>

ستبدو نتيجة تنفيذ الشيفرة كما يلي:

جداول خاصة بذوي المشاكل البصرية

لنراجع باختصار استخدامات الجداول، إذ تُعَدّ الجداول أداةً مفيدةً تساعدنا في الوصول السريع إلى البيانات والبحث عن القيم المختلفة فيها، وبنظرة سريعة مثلًا على الجدول الذي نعرضه تاليًا ستتمكن من معرفة عدد الخواتم Rings التي بيعت في جينت Gent شهر 8 عام 2016، إذ نربط بصريًا بين المعلومات الواردة في الجدول مع ترويسة الصف والعمود لنجد المطلوب.

    Clothes Accessories      
    Trousers Skirts Dresses Bracelets Rings
Belgium Antwerp 56 22 43 72 23
Gent 46 18 50 61 15  
Brussels 51 27 38 69 28  
The Netherlands Amsterdam 89 34 69 85 38
Utrecht 80 12 43 36 19  

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

ملاحظة: يوجد حوالي 253 مليون شخص كفيف أو يعاني من مشاكل بصرية وفقًا لمنظمة الصحة العالمية WHO في عام 2017.

استخدام ترويسات الأعمدة والصفوف

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

استخدام السمة scope

تُضاف هذه السمة إلى العنصر <th> -أي ترويسة جدول- لتدل قارئات الشاشة على الخلايا التي تمثلها ترويسة معينة (هل هي ترويسة صف أم عمود مثلًا؟)، وبالعودة إلى مثال التطبيق السابق الذي طرحناه سابقًا، سترى كيف تُميَّز ترويسة العمود لأنها ستبدو على الصورة التالية: 

<thead>
  <tr>
    <th scope="col">Purchase</th>
    <th scope="col">Location</th>
    <th scope="col">Date</th>
    <th scope="col">Evaluation</th>
    <th scope="col">Cost (€)</th>
  </tr>
</thead>

وترويسة كل صف ستبدو أيضًا كما يلي إذا أضفنا ترويسات صفوف بالإضافة إلى ترويسات الأعمدة: 

<tr>
  <th scope="row">Haircut</th>
  <td>Hairdresser</td>
  <td>12/09</td>
  <td>Great idea</td>
  <td>30</td>
</tr>

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

تأخذ السمة scope أيضًا القيمتين colgroup و rowgroup وتستخدمان لتوصيف الترويسات التي تقع فوق عدة أعمدة أو صفوف، فإذا عدت إلى الجدول السابق "حول مبيعات شهر 8 عام 2016"، فستجد أنّ الخلية "Clothes" هي ترويسة للخلايا "Trousers" و "Skirts" و "Dresses"، وينبغي الإشارة إلى جميع هذه الخلايا على أنها ترويسات (<th>)، ولهذا لا بدّ من أن نزوّد الخلية "Clothes" بالسمة "scope="colgroup، في حين ستأخذ بقية الترويسات التي تقع تحتها مباشرة السمة "scope="col.

استخدام السمتين id و headers

يمكننا استخدام السمتين id و headers على أساس بديل عن scope في الارتباطات بين الترويسات والخلايا، ويجري الأمر كما يلي:

  1. زوّد كل عنصر <th> (عنصر الترويسة) بسِمة id تحمل قيمة فريدة.
  2. زوّد كل عنصر <td> (عنصر الخلية) بسِمة headers تضم قائمةً بمعرِّفات جميع الترويسات التي تُعَدّ ترويسةً مباشرةً لهذه الخلية تفصل بينها مسافةً فارغةً.

يعطي هذا الأسلوب جدوّل HTML تعريفًا صريحًا لموقع كل خلية بترويسة (أو ترويسات) العمود والصف الذي تشكل جزءًا منه، ولا بدّ من الإشارة إلى ضرورة استخدام ترويسات للصفوف والأعمدة معًا إذا أردت استخدام هذه الطريقة.

لاحظ طريقة تطبيق هذا الأسلوب على مثال التطبيق السابق السابق: 

<thead>
  <tr>
    <th id="purchase">Purchase</th>
    <th id="location">Location</th>
    <th id="date">Date</th>
    <th id="evaluation">Evaluation</th>
    <th id="cost">Cost (€)</th>
  </tr>
</thead>
<tbody>
<tr>
  <th id="haircut">Haircut</th>
  <td headers="location haircut">Hairdresser</td>
  <td headers="date haircut">12/09</td>
  <td headers="evaluation haircut">Great idea</td>
  <td headers="cost haircut">30</td>
</tr>

  ...

</tbody>

ملاحظة: تُعَدّ هذه الطريقة دقيقةً جدًا في ارتباط خلايا البيانات مع الترويسات، لكنها تتطلب عملًا أكثر لا يحتمل أية أخطاء، ولهذا يُعَدّ استخدام السمة scope كافيًا لمعظم الجداول.

تطبيق: استخدام السمتين scope و headers

  1. احفظ نسخةً عن الملفين items-sold.html و minimal-table.css في مجلد جديد على جهازك.
  2. حاول استخدام السمة scope لتحسين طريقة عرض هذا الجدول.
  3. حاول حفظ نسخة أخرى عن الملفين السابقين في مجلد آخر على جهازك ثم استخدم السمتين scope و headers لدعم فكرة سهولة الوصول إلى الجدول.

ملاحظة: يمكنك التحقق من صحة عملك بموازنته مع النسخة النهائية باستخدام scope وباستخدام headers على جيت-هاب.

خلاصة

على الرغم من وجود بعض الأفكار الأخرى التي يمكنك تعلمها عن الجداول في HTML، إلا أننا زودناك بكل ما تحتاجه حاليًا، ولا بدّ الآن من التوجه نحو تعلّم طريقة تنسيق ملفات HTML باستخدام لغة التوصيف CSS.

للمزيد من التفاصيل، ارجع إلى توثيق الجداول في موسوعة حسوب.

ترجمة -وبتصرُّف- للمقال HTML table advanced features and accessibility.

اقرأ أيضًا

  • أعجبني 1
 مشاركة
اذهب الى مقالات البرمجة

تفاعل الأعضاء

أفضل التعليقات

لا توجد أية تعليقات بعد



انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أضف تعليق

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

×

×
×
  • أضف...