المشروع - كل ما يتعلق بتطوير المواقع http://www.almashroo.com/

في المقالة الماضية حول الجداول تحدثت عن:

• العنصر caption والذي يستخدم لوضع ملخص لمحتويات الجدول يظهر في منتصف أعلى الجدول.
• العنصر th والذي يستخدم لتحديد رأس الجدول.
• ثم الخاصية summary التي تستخدم في وضع ملخص للجدول وهي مهمة لزيادة قابلية الوصول.
• وأخيراً العناصر thead وtbody وtfoot التي تحدد أقسام الجدول.

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

• النادي، المباريات، النقاط
• الشباب، 5، 15
• العين، 4، 9
• الشارقة، 4، 8

هذا لا يبدو مفيداً كثيراً خصوصاً لو كان الجدول كبيراً ومليئاً بالتفاصيل، لأن الزائر هنا لا يستطيع أن يشاهد الجدول بل يسمعه فلذلك علينا أن نوفر طريقة تجعل القارئ الإلكتروني يقرأ الجدول بمزيد من التفاصيل:

• النادي، المبارايات، النقاط
• النادي: الشباب، المباريات: 5، النقاط: 15
• النادي: العين، المباريات: 4، النقاط: 9
• النادي: الشارقة، المباريات: 4، النقاط: 8

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

<table>
    <tr>
        <th id="club">Club</th>
        <th id="matches">Matches</th>
        <th id="points">Points</th>
    </tr>
    <tr>
        <td>Al Shabab</td>
        <td>5</td>
        <td>15</td>

    </tr>
    <tr>
        <td>Al Ain</td>
        <td>4</td>
        <td>9</td>
    </tr>
    <tr>
        <td>Sharjah</td>
        <td>4</td>
        <td>8</td>
    </tr>
    <tr>
        <td>Al Shabab</td>
        <td>5</td>
        <td>15</td>

    </tr>
    <tr>
        <td>Al Ain</td>
        <td>4</td>
        <td>9</td>
    </tr>
    <tr>
        <td>Sharjah</td>
        <td>4</td>
        <td>8</td>
    </tr>
    </tr>
</table>

الملاحظة الأولى أنني ترجمته إلى الإنجليزية، والثانية أنني أضفت معرفاً id لكل خلية في رأس الجدول، الآن علينا ربط كل خلية في الجدول بما يناسبها في رأس الجدول، يبدو الأمر معقداً؟ لا تخف ذلك، هو أبسط مما تتصور، بالمثال يتضح المقال:

<table>
    <tr>
        <th id="club">Club</th>
        <th id="matches">Matches</th>
        <th id="points">Points</th>
    </tr>
    <tr>
        <td headers="club">Al Shabab</td>
        <td headers="matches">5</td>
        <td headers="points">15</td>

    </tr>
    <tr>
        <td headers="club">Al Ain</td>
        <td headers="matches">4</td>
        <td headers="points">9</td>
    </tr>
    <tr>
        <td headers="club">Sharjah</td>
        <td headers="matches">4</td>
        <td headers="points">8</td>
    </tr>
</table>

الآن يستطيع القارئ الإلكتروني ربط الخلية بما يناسبها في رأس الجدول، الخاصية headers هي التي تقوم بهذا الرابط، كل ما فعلناه هو أننا وضعنا لكل th في رأس الجدول معرفاً خاصاً id، وفي كل خلية في الجدول وضعنا headers يربطها برأس الجدول، قيمة headers يجب أن تكون هي نفسها قيمة المعرف id.

القسم الثاني من هذه المقالة يتحدث عن عنصر في HTML لا يعرفه الكثير من مطوري المواقع، وهو colgroup، هذا العنصر وظيفته جمع عمودين أو أكثر في الجداول، كيف يفعل ذلك؟ تصور معي أننا قمنا بعمل جدول لسائح زار ثلاث مدن في الإمارات، أراد هذا السائح جمع تكاليف رحلته، لنبسط الأمر سأكتفي بتكاليف المواصلات والإقامة، وإليك الجدول:

<table rules="groups" border="1">
  <colgroup />
  <colgroup span="2" />
  <colgroup />

  <thead>
    <tr>
        <th>المدينة</th>
        <th>المواصلات</th>
        <th>الإقامة</th>
        <th>المجموع</th>
    </tr>
  </thead>

    <tr>
        <td>أبوظبي</td>
        <td>70.00</td>
        <td>450.00</td>
        <td>520.00</td>

    </tr>
    <tr>
        <td>العين</td>
        <td>30.00</td>
        <td>300.00</td>
        <td>330.00</td>
    </tr>
    <tr>
        <td>دبي</td>
        <td>760.00</td>
        <td>120.00</td>
        <td>880.00</td>
    </tr>
</table>

قم بنسخ الجدول في محرر نصي واحفظه لديك وشاهده في متصفحك، هل لاحظت شيئاً مختلفاً؟ العمود الثاني والثالث قمنا بضمهما مع بعضهما البعض، كيف فعلنا ذلك؟

لاحظ أولاً أننا أضفنا الخاصية rules وأعطيناها القيمة gropus، هكذا نخبر المتصفح بأننا سنقوم باستخدام مجموعات للأعمدة، الخاصية border وضعت للتوضيح ثم استخدمنا العنصر colgroup ثلاث مرات، الأول للعمود الأول في الجدول، الثاني للعمودين الثاني والثالث، ولكي يضمهما مع بعضهما البعض وضعنا الخاصية span وأعطيناها القيمة 2، هكذا قمنا بضم عمودين مع بعضهما البعض، ثم استخدمنا colgroup مرة ثالثة للعمود الرابع، عليك أن تجرب هذا العنصر بطرق مختلفة لكي تفهمه جيداً، وفي الحقيقة هذا العنصر ليس صعب الفهم، وهو مفيد لأنواع مختلفة من الجداول.