الجداول

تُستخدم جداول HTML لعرض البيانات الجدولية باستخدام الصفوف والأعمدة. يجب أن يستند قرار استخدام <table> إلى المحتوى الذي تقدمه واحتياجات المستخدمين في ما يتعلق بذلك المحتوى. إذا تم تقديم البيانات أو مقارنتها أو فرزها أو حسابها أو تبادلها، من المحتمل أن يكون <table> هو الخيار الصحيح. إذا كنت تريد تنسيق محتوى غير جدولي بدقة، مثل مجموعة كبيرة من الصور المصغّرة، لن تكون الجداول مناسبة، بل يمكنك إنشاء قائمة بالصور وتصميم الشبكة باستخدام CSS.

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

عناصر الجدول بالترتيب

تلفّ العلامة <table> محتوى الجدول، بما في ذلك جميع عناصر الجدول. إنّ دور ARIA الضمني في <table> هو table، لكنّ التكنولوجيا المساعِدة تعرف أنّ هذا العنصر هو بنية جدول تحتوي على بيانات مرتّبة في صفوف وأعمدة. إذا كان الجدول يحافظ على حالة اختيار أو يتضمّن تنقُّل ثنائي الأبعاد أو يسمح للمستخدم بإعادة ترتيب الخلايا، يمكنك ضبط role="grid". إذا كان من الممكن توسيع صفوف grid وتصغيرها، استخدِم role="treegrid" بدلاً من ذلك.

في <table>، ستجد عناوين الجدول (<thead>) ونصوص الجدول (<tbody>) وتذييلات الجدول (<tfoot>) اختياريًا. ويتألف كل منها من صفوف الجدول (<tr>). تحتوي الصفوف على عنوان الجدول (<th>) وخلايا بيانات الجدول (<td>)، التي تحتوي بدورها على جميع البيانات. قبل أيّ من هذه العناصر في DOM، قد تظهر لك ميزتان إضافيتان: الشرح الخاص بالجدول (<caption>) ومجموعات الأعمدة (<colgroup>). استنادًا إلى ما إذا كان <colgroup> يتضمّن السمة span أم لا، قد يحتوي على عناصر أعمدة الجدول المدمَجة (<col>).

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

1. عنصر <caption>
2. عناصر <colgroup>
3. عناصر <thead>
4. عناصر <tbody>
5. عناصر <tfoot>

سنتناول العناصر الثانوية لعناصر <table>، وهذه كلها اختيارية لكننا ننصح باستخدامها، ثم نلقي نظرة على الصفوف وخلايا عناوين الجدول وخلايا بيانات الجدول. وستتم تغطية <colgroup> أخيرًا.

شرح الجدول

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

يجب أن يكون العنصر <caption> هو العنصر الأول المتداخل في العنصر <table>. يتيح تضمين ذلك لجميع المستخدمين معرفة الغرض من الجدول على الفور دون الحاجة إلى قراءة النص المحيط. يمكنك بدلاً من ذلك استخدام السمة aria-label أو السمة aria-labelledby على <table> لتوفير اسم يمكن الوصول إليه كترجمة نصية. لا يتضمّن العنصر <caption> أيّ سمات خاصة بالعناصر.

تظهر الترجمة خارج الجدول. يمكن تحديد مكان الترجمة باستخدام سمة CSS caption-side، وهذه ممارسة أفضل من استخدام سمة align المتوقّفة نهائيًا. من شأن ذلك وضع الترجمة في أعلى الشاشة وأسفلها. ميزة تحديد موضع الجانب الأيمن والأيسر، بالإضافة إلى inline-start وinline-end، غير متاحة بشكل كامل حتى الآن. الجزء العلوي هو العرض التقديمي التلقائي للمتصفّح.

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

تقسيم البيانات

يتألف محتوى الجداول من ثلاثة أقسام هي: صفر أو أكثر من عناوين الجدول (<thead>)، ونص الجدول (<tbody>)، وتذييلات الجدول (<tfoot>). كلها اختيارية، ولا يمكن استخدام أي منها أو أكثر.

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

المزايا المتوفرة لدينا حتى الآن:

<table>
  <caption>MLW Students</caption>
  <thead></thead>
  <tbody></tbody>
  <tfoot></tfoot>
</table>

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

محتوى الجدول

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

تعرض أوراق أنماط وكيل المستخدم بشكل عام المحتوى في خلية عنوان في الجدول <th> بشكل متوسط وغامق. يمكن التحكّم في هذه الأنماط التلقائية وجميع الأنماط باستخدام CSS بدلاً من السمات المتوقّفة نهائيًا التي كانت متوفّرة في السابق في خلايا وصفوف فردية وحتى <table>.

كانت هناك سمات لإضافة مساحة متروكة بين الخلايا وداخل الخلايا، للحدود، ولمحاذاة النص. يجب ضبط المساحة المتروكة للخلية وتباعد الخلايا، التي تحدد المسافة بين محتوى الخلية وحدودها، وبين حدود الخلايا المجاورة، باستخدام الخاصيتين border-collapse وborder-spacing في CSS، على التوالي. ولن يكون للقاعدة Border-spacing أي تأثير في حال ضبط سياسة border-collapse: collapse. إذا تم ضبط border-collapse: separate;، من الممكن إخفاء الخلايا الفارغة تمامًا باستخدام empty-cells: hide;. لمعرفة المزيد حول تصميم الجداول، إليك عرض تقديمي تفاعلي لأنماط CSS المرتبطة بالجداول.

في الأمثلة، أضفنا حدًا على الجدول وكل خلية فردية باستخدام CSS لجعل بعض الميزات أكثر وضوحًا:

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

يكون للخلية <th> معنى دلالي، مع أدوار ARIA الضمنية لـ columnheader أو rowheader. وتحدّد الخلية بأنّها عنوان للعمود أو صف خلايا الجدول، استنادًا إلى قيمة سمة scope العددية. سيتم ضبط المتصفِّح تلقائيًا على col أو row في حال عدم ضبط scope بشكلٍ صريح. بما أنّنا استخدمنا الترميز الدلالي، تحتوي الخلية 1956 على عنوانَين: "Year" (السنة) و"Lo Minious" (لو Minious). تخبرنا هذه الرابطة أن "1956" هي "عام" التخرج لأغنية "لو مينيوس". في هذا المثال، كما نرى من الجدول بأكمله، فإن الارتباط واضح مرئيًا. ويؤدي استخدام <th> إلى توفير عملية الربط حتى إذا تم الانتقال إلى عمود أو صف العنوان خارج إطار العرض. كان بإمكاننا ضبط <th scope="col">Year</th> و<th scope="row">Lou Minious</th> بشكل واضح، ولكن باستخدام جدول بسيط كهذا، تعمل القيم التلقائية العددية. تشمل القيم الأخرى لـ scope rowgroup وcolgroup، وهي مفيدة مع الجداول المعقدة.

دمج الخلايا

على غرار MS Excel وGoogle Sheets وNumbers، من الممكن ضم خلايا متعددة في خلية واحدة. ويتم ذلك باستخدام HTML! تُستخدَم السمة colspan لدمج خليتين متجاورتين أو أكثر في صف واحد. تُستخدَم السمة rowspan لدمج الخلايا في الصفوف، مع وضعها على الخلية في الصف العلوي.

في هذا المثال، يحتوي عنوان الجدول على صفَين. يحتوي صف الرأس الأول على ثلاث خلايا تمتد على أربعة أعمدة: الخلية الوسطى تحتوي على colspan="2". يؤدي هذا إلى دمج خليتين متجاورتين. تتضمن الخلية الأولى والأخيرة rowspan="2". يؤدي هذا إلى دمج الخلية مع الخلية في الصف المجاور، أسفلها مباشرة.

يحتوي الصف الثاني في عنوان الجدول على خليتين؛ هذه هي خلايا العمودين الثاني والثالث في الصف الثاني. لا يتم الإعلان عن خلية للعمود الأول أو الأخير لأن الخلية في العمودين الأول والأخير في الصف الأول تمتد صفين.

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

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

توجد السمة headers بشكل أكثر شيوعًا في عناصر <td>، ولكنها صالحة أيضًا في <th>.

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

تصميم الجداول

هناك عنصران غامضان نسبيًا تم ذكرهما باختصار: مجموعة الأعمدة <colgroup> والعنصر التابع له الوحيد، وهو عنصر العمود <col> الفارغ. يُستخدم العنصر <colgroup> لتحديد مجموعات الأعمدة أو عناصر <col> داخل جدول.

وفي حال استخدام هذه السمة، يجب دمج تجميع الأعمدة في <table>، مباشرةً بعد <caption> وقبل أي بيانات في الجدول. وإذا كانت تشمل أكثر من عمود واحد، استخدِم السمة span.

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

<table>
  <caption>Table Caption</caption>
  <colgroup>
    <col/>
  </colgroup>
  <thead>...

ولا يتضمّن العنصر <colgroup> أو <col> معنى دلالي من حيث المساعدة في تسهيل الوصول إلى الجدول، ولكنّهما يسمحان بنمط الأعمدة المحدود، بما في ذلك ضبط عرض للعمود باستخدام CSS.

ستضبط أنماط <col> نمطًا على العمود ما دام لا يتوفّر نمط <td> أو <th> يلغي ذلك النمط. على سبيل المثال، عند استخدام <colspan> لدمج خلايا في بعض صفوف الجدول وليس كلها، لا يمكنك التأكد من أنّ أداة الاختيار، مثل tr > *:nth-child(8)، التي تختار العنصر الثانوي الثامن من كل صف، ستميّز العمود الثامن بالكامل أو ستميّز العمود الثامن لعدة صفوف، ولكن مع بعض الخلايا في العمود التاسع والعاشر، حسب ما تم دمجه من خلايا العمود أو الصف.

للأسف، لا تتوفّر سوى عدد قليل من السمات، ولا يتم اكتساب الأنماط في الخلايا، والطريقة الوحيدة لاستخدام عنصر <col> في الخلايا المستهدفة هي باستخدام أداة اختيار معقّدة، بما في ذلك أداة الاختيار ذات الصلة :has().

إذا كان لكل من <table> و<colgroup> لون خلفية، سيظهر background-color من <colgroup> في الأعلى. يكون ترتيب الرسم هو: جدول ومجموعات أعمدة وأعمدة ومجموعات صفوف وصفوف، وتحتوي الخلايا على آخر وأعلى، كما هو موضح في مخطط طبقات الجدول. لا تشكل العناصر <td> و<th> عناصر تابعة لعناصر <colgroup> أو <col>، ولا تكتسب أنماطها.

لتقسيم جدول، تكون أدوات الاختيار الهيكلية لـ CSS مفيدة. على سبيل المثال، سيضيف tbody tr:nth-of-type(odd) {background-color: rgba(0 0 0 / 0.1);} لون أسود شفاف إلى كل صف فردي في نص الجدول، ما يسمح بظهور أي تأثيرات للخلفية تم ضبطها في <colgroup>.

لا تستجيب الجداول بشكل تلقائي. بل يتم تحديد حجمها وفقًا للمحتوى الخاص بها بشكل افتراضي. هناك حاجة إلى إجراءات إضافية للحصول على تصميم تخطيط الجدول للعمل بشكل فعال عبر مجموعة متنوعة من الأجهزة. إذا أردت تغيير سمة عرض CSS لعناصر الجدول، أدرِج سمات ARIA role. على الرغم من أنّ هذا الإجراء قد يبدو مكررًا، إلا أنّ السمة display في خدمة مقارنة الأسعار (CSS) يمكن أن تؤثر في شجرة تسهيل الاستخدام في بعض المتصفّحات.

تقديم البيانات

عناصر الجدول لها معانٍ دلالية تستخدمها التكنولوجيا المساعِدة لإتاحة التنقّل بين الصفوف والأعمدة بدون "الضياع". يجب عدم استخدام العنصر <table> للعرض التقديمي. إذا كنت بحاجة إلى عنوان في القائمة، استخدِم عنوانًا وقائمة. إذا كنت تريد وضع المحتوى في العديد من الأعمدة، استخدِم تنسيقًا متعدّد الأعمدة. إذا كنت تريد وضع المحتوى في شبكة، استخدِم شبكة CSS. استخدِم جدولاً للبيانات فقط. يمكنك التفكير في الأمر على النحو التالي: إذا كانت بياناتك تتطلب جدول بيانات ليتم عرضها في اجتماع، استخدِم <table>. إذا كنت تريد استخدام الميزات المتوفرة في برنامج العروض التقديمية مثل Keynote أو Powerpoint، فقد تحتاج إلى قائمة وصف.

بينما فرز أعمدة الجدول هو نطاق JavaScript، فإن ترميز الرؤوس للسماح للمستخدمين بمعرفة أن العمود قابل للفرز هو نطاق HTML. اجعل المستخدمين يعرفون أن أعمدة الجدول قابلة للفرز باستخدام الأيقنة لإظهار تصاعدي أو تنازلي أو غير مصنف. يجب أن يتضمن العمود الذي تم ترتيبه حاليًا السمة aria-sort مع القيمة العددية لاتجاه الترتيب. يمكن لـ <caption> الإعلان بأدب عن إجراء تعديلات لترتيب النتائج من خلال aria-live والنطاق الذي يتم تعديله ديناميكيًا، والذي يظهر لمستخدمي برامج قراءة الشاشة. وبما أنّ العمود قابل للترتيب من خلال النقر على محتوى العنوان، يجب أن يكون محتوى العنوان <button>.

إذا كنت لا تشارك بيانات جدولية، لا تستخدم السمة <table>. إذا كنت تستخدم جدولاً للعرض التقديمي، اضبط role="none".

يستخدم العديد من المطورين الجداول لتخطيط النماذج ولكن ليست هناك حاجة إلى ذلك. ولكن عليك أن تعرف المزيد عن نماذج HTML، لذا سنتناولها في ما يلي.

التحقق من فهمك

اختبر معلوماتك عن الجداول.