الجداول

تُستخدم جداول 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>.

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

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

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

تحمل خلية <th> معنى دلالي، وتتضمّن أدوار ARIA ضمنية عنوان العمود أو rowheader. وهي تُعرّف الخلية كرأس لعمود أو صف خلايا الجدول، بناءً على قيمة سمة scope العددية. سيتم ضبط المتصفِّح تلقائيًا على col أو row إذا لم يتم ضبط السياسة scope بشكل صريح. بما أننا قد استخدمنا الترميز الدلالي، تحتوي خلية 1956 على عنوانين: السنة ولو مينيوس. تخبرنا هذه الرابطة أن "1956" هل "السنة" تخرّجت من حفل "Lou Minious". في هذا المثال، كما نرى الجدول بأكمله، يكون الارتباط واضحًا مرئيًا. ويؤدي استخدام <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، لذلك سنتناول ذلك بعد ذلك.

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

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