إتاحة الجداول وخاصية scope للعناوين

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تحدد خاصية النطاق الدلالي scope العلاقة المباشرة بين خلية العنوان وبقية خلايا البيانات المرتبطة بها. يؤدي تعيين scope="col" إلى ربط العنوان بكافة خلايا العمود الرأسي، بينما يربط scope="row" العنوان بخلايا الصف الأفقي.

الصف 2 شرح توضيحي

يوضح الجدول التالي القيم المعيارية لخاصية النطاق الدلالي scope واستخدامها الصحيح في إتاحة الجداول:

الصف 3 شرح توضيحي

تصريح الخاصية scope	اتجاه الارتباط	خلايا البيانات المستهدفة
`scope="col"`	رأسي	كافة خلايا البيانات الواقعة في العمود أسفل العنوان
`scope="row"`	أفقي	كافة خلايا البيانات الواقعة في الصف بجانب العنوان
غياب `scope`	تخميني	يخمن المتصفح العلاقة تلقائياً مما قد يسبب التباساً في الجداول المركبة

الصف 4 كود برمجي

HTML

<table>
  <tr>
    <th scope="col">Plan</th>
    <th scope="col">Bandwidth</th>
  </tr>
  <tr>
    <th scope="row">Basic</th>
    <td>1 TB</td>
  </tr>
</table>

جرّب بنفسك

الصف 5 معاينة حية

الصف 6 ملاحظة هامة

Table Accessibility with scope إتاحة الجداول وخاصية scope للعناوين

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (الجداول في لغة HTML)