الجداول

تُستخدَم جداول 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 بشكل كامل بعد. Top هو عرض المتصفّح التلقائي.

من الأفضل أن تحتوي جداول البيانات على رؤوس واضحة وتعليق توضيحي، وأن تكون بسيطة بما يكفي لتوضيح نفسها تقريبًا. ضَع في اعتبارك أنّه ليس لدى جميع المستخدمين القدرات المعرفية نفسها. عندما يهدف الجدول إلى "تقديم نقطة" أو يحتاج إلى تفسير، قدِّم ملخّصًا موجزًا للنقطة الرئيسية أو وظيفة الجدول. يعتمد موضع هذا الملخّص على طوله وتعقيده. إذا كان النص موجزًا، استخدِمه كنص داخلي للترجمة. إذا كان النص أطول، يمكنك تلخيصه في العنوان، وتقديم الملخّص في الفقرة التي تسبق الجدول، مع ربط الاثنين باستخدام سمة 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>.

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

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

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

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

دمج الخلايا

على غرار MS Excel و"جداول بيانات Google" و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. قد يبدو ذلك زائدًا، ولكن يمكن أن تؤثّر سمة CSS display في شجرة تسهيل الاستخدام في بعض المتصفحات.

عرض البيانات

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

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

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

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

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