كيفية تحسين الوصول إلى جدول HTML مع العلامات

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

هو عنصر HTML يستخدم على نطاق واسع لعرض البيانات بطريقة منظمة في صفحات الويب. يتراوح تصميمها من تلك البسيطة إلى تلك المعقدة ، كاملة مع رؤوس الصفوف ، الرؤوس المدمجة وغيرها.

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

السمة النطاق

حتى لطاولة بسيطة مع

العلامات مع نطاق = "عمود" يساعد التكنولوجيا المساعدة في تحديد أن الخلايا التي تتبع في نفس العمود هي أسماء الطلاب.

وبالمثل ، مثل الخلايا

تحتوي نطاق = "colgroup" يساعد المستخدمين على تحديد أن البيانات الموجودة في الخلايا التي تتبع في مجموعة الأعمدة التي يمتد عليها ترتبط بموضوع معين.

ثم هناك

العلامات مع نطاق = "الصف" الذي يحدد أن الخلايا التي تتبعه في نفس الصف ، تحتوي على “درجة” معلومات بخصوص اسم الطالب المحدد.

مجموعات الصف

الآن دعنا ننتقل إلى مثال آخر ، سيكون لهذا المثال نفس الجدول تقريبًا مثل الجدول أعلاه باستثناء أننا سنقوم بتبديل رؤوس الصفوف والأعمدة ، لذلك سنكون قادرين على العمل مع مجموعات الصفوف.

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

  اسم الموظف  رمز الموظف  رمز المشروع  تعيين الموظف  
  فلان الفلاني  32456  456789  مدير  
  ميريام لوثر  78902  456789  نائب المدير

ماذا السمة نطاق تفعل؟ وفقًا لـ W3C:

بمعنى آخر ، يساعدنا في ربط خلايا البيانات بخلايا الرأس المقابلة لها.

يرجى ملاحظة أنه في المثال أعلاه يمكنك التبديل

إلى عن على

. طالما لها نطاق لديه القيمة العقيد, سيتم تفسيره على أنه رأس العمود المقابل.

ال نطاق يمكن أن تحتوي السمة على أي من هذه القيم الأربعة ؛ العقيد, صف, rowgroup, colgroup للإشارة إلى رأس العمود ورأس الصف ومجموعة رؤوس الأعمدة ومجموعة رأس الصفوف على التوالي.

الجداول المعقدة

الآن ، دعنا ننتقل إلى طاولة أكثر تعقيدًا.

أعلاه جدول يسرد الطلاب في الفصل ودرجاتهم في النظرية العملية لثلاث مواد.

هنا هو رمز HTML لذلك. وقد استخدم الجدول روسبان و كولسبان لإنشاء رؤوس مدمجة لخلايا البيانات.

  أسم الطالب  مادة الاحياء  كيمياء  علوم فيزيائية  
  عملي  نظرية  عملي  نظرية  عملي  نظرية  
  فلان الفلاني  ا  ا+  ب  ا  ا  ا-  
  ميريام لوثر  ا  ا  C  C+  ا  ا-

في الجدول أعلاه ، كل خلية البيانات ، وهذا هو كل من خلايا الجدول عرض الصف, يرتبط بثلاثة أجزاء من المعلومات:

أي طالب ينتمي هذا الصف؟?
ما هو الموضوع الذي تنتمي إليه هذه الدرجة؟?
هل هذا الصف للقسم العملي أم النظري؟?

يتم تعريف هذه المعلومات الثلاثة في ثلاثة أنواع مختلفة من خلايا الرأس هيكلية وبصريا:

أسم الطالب
اسم الموضوع
عملية أو نظرية

دعنا نعرّف نفسه لإمكانية الوصول.

      أسم الطالب  مادة الاحياء  كيمياء  علوم فيزيائية  
  عملي  نظرية  عملي  نظرية  عملي  نظرية  
  فلان الفلاني  ا  ا+  ب  ا  ا  ا-  
  ميريام لوثر  ا  ا  C  C+  ا  ا-

في العلامات أعلاه أضفنا نطاق إلى الخلايا التي تحتوي على معلومات العنوان حول خلايا البيانات.

مجموعة العمود

ترتبط خلايا الأحياء والكيمياء والفيزياء بمجموعة من عمودين لكل منهما (النظرية والعملية). فقط مضيفا كولسبان = "2" لا تنشئ مجموعات الأعمدة ، فهي تشير فقط إلى أن الخلية المحددة تشغل مساحة خليتين.

لإنشاء مجموعة أعمدة يجب عليك استخدام colgroup ثم قم بإضافة امتداد السمة إليها تشير إلى عدد الأعمدة التي تتضمنها مجموعة الأعمدة.

ال

أسم الطالب

مادة الاحياء

فلان الفلاني

موضوع		فلان الفلاني	ميريام لوثر
مادة الاحياء	عملي	ا	ا
مادة الاحياء	نظرية	ا+	ا
كيمياء	عملي	ب	C
كيمياء	نظرية	ا	C+
علوم فيزيائية	عملي	ا	ا
علوم فيزيائية	نظرية	ا-	ا-

والآن بعد أن أصبح لدينا عينة للعمل معها ، فلنبدأ بإنشاء مجموعات صفوف كما فعلنا لمجموعات الأعمدة في المثال السابق.

ومع ذلك ، لا يمكن إنشاء مجموعات الصف باستخدام علامة مثل colgroup لأنه لا يوجد rowgroup جزء.

يتم تجميع صفوف HTML بشكل عام باستخدام , و عناصر. HTML واحد

عنصر يمكن أن يكون واحد , واحد ومتعددة . سوف نستخدم متعددة TBODY في جدولنا لإنشاء مجموعات الصف ، وإضافة النطاق المناسب لخلايا الرأس.

موضوع		فلان الفلاني	ميريام لوثر
مادة الاحياء	عملي	ا	ا
مادة الاحياء	نظرية	ا+	ا
كيمياء	عملي	ب	C
كيمياء	نظرية	ا	C+
علوم فيزيائية	عملي	ا	ا
علوم فيزيائية	نظرية	ا-	ا-

لقد أضفنا الصفوف “عملي” و “نظرية” في كل TBODY إنشاء مجموعات الصف مع صفين في كل. لقد أضفنا أيضا نطاق = "rowgroup" إلى الخلايا التي تحتوي على معلومات العنوان حول هذين الصفين (وهو اسم الموضوع الذي تنتمي إليه الدرجات في هذه الحالة).

اقرأ الآن: ارتفاع عمود متساوي مع CSS