الجداول

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

في هذا القسم، سنتناول جميع العناصر التي يتكوّن منها الجدول، بالإضافة إلى بعض ميزات تسهيل الاستخدام وقابلية الاستخدام التي يجب مراعاتها عند عرض البيانات الجدولية. على الرغم من أنّ دورة "تعلم HTML" لا تركّز على CSS، سنتناول بعض خصائص 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> على أي سمات خاصة بالعناصر.

يظهر العنوان خارج الجدول. يمكن ضبط موضع الترجمة والشرح باستخدام السمة caption-side في CSS، وهي طريقة أفضل من استخدام السمة 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>.

كانت هناك سمات لإضافة مساحة متروكة بين الخلايا وداخلها، وللحدود، ولمحاذاة النص. يجب ضبط مساحة padding ومساحة spacing، اللتين تحدّدان المسافة بين محتوى الخلية وحدودها وبين حدود الخلايا المتجاورة، باستخدام السمتَين 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 على عنوانَين: السنة وLou Minious. تشير هذه الرابطة إلى أنّ "1956" هي "سنة" تخرّج "لو مينيوس". في هذا المثال، بما أنّه يمكننا رؤية الجدول بأكمله، يكون الاقتران واضحًا بصريًا. يوفّر استخدام <th> الربط حتى عندما يتم التمرير سريعًا لعمود الرأس أو الصف خارج نطاق العرض. كان بإمكاننا ضبط <th scope="col">Year</th> و<th scope="row">Lou Minious</th> بشكل صريح، ولكن مع جدول كهذا، تعمل القيم التلقائية المُعدودة. تشمل القيم الأخرى لـ scope القيمتَين rowgroup وcolgroup، وهما مفيدتان مع الجداول المعقّدة.

دمج الخلايا

كما هو الحال في MS Excel و"جداول بيانات Google" وNumbers، يمكن دمج خلايا متعددة في خلية واحدة. يمكن إجراء ذلك باستخدام السمتَين colspan وrowspan في 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، مثل ضبط العرض.

تتجاوز الأنماط ذات الصلة <td> و<th> أنماط <col>. في CodePen، ضبطنا colspan لدمج بعض صفوف الجدول، وليس كلها. في حال تطبيق محدّد CSS nth-child على <tr>، قد يؤثر ذلك في النمط، وذلك حسب الصف أو العمود الذي تم دمجهما.

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

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

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

اختبِر معلوماتك

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