تُستخدم جداول HTML لعرض البيانات الجدولية (الصفوف والأعمدة من البيانات ذات الصلة) — وليس للتخطيط. يستخدم الجدول الذي يمكن الوصول إليه البنية الصحيحة بحيث يمكن لقارئات الشاشة الإعلان عن الرؤوس مع كل خلية.
Q2 Sales by Region
Region
Revenue
North
$12,000
South
$9,500
Total$21,500
<th> مع scope — تحدد خلايا الرأس. استخدم scope="col" لرؤوس الأعمدة، و scope="row" لرؤوس الصفوف. بعد ذلك، تعلن قارئات الشاشة "North, Revenue: $12,000" بدلاً من قراءة الخلايا بدون سياق.<caption> — عنوان للجدول بأكمله، وهو أول فرع من <table>؛ يُقرأ لتوجيه المستخدمين.<thead>/<tbody>/<tfoot> — تجميع الرؤوس والصفوف الأساسية والملخصة؛ تساعد على التنقل وتسمح بتكرار الرأس عند الطباعة.<!-- ❌ this was 1990s practice — use CSS grid/flexbox instead -->
<table><tr><td>sidebar</td><td>content</td></tr></table>
جداول التخطيط تربك قارئات الشاشة (تعلن دلالات جدول البيانات) وتفتقر المرونة. استخدم CSS Grid/Flexbox لتخطيط الصفحة.
الدلالات الصحيحة للجدول (<th scope>، <caption>، التقسيم) هي ما يجعل جداول البيانات قابلة للاستخدام من قبل مستخدمي قارئات الشاشة — فهي تربط كل قيمة برؤوس الصفوف والأعمدة الخاصة بها.
احتفظ بـ <table> حصراً للبيانات الجدولية الحقيقية.