تعلّم كيفية إنشاء جداول واضحة، سهلة الوصول، وصديقة لمحركات البحث باستخدام العناصر
<table>، <thead>،
<tbody>، <th> و<td>.
يغطي هذا الدرس البنية، وأساسيات التنسيق، وسهولة الوصول، وأمثلة حقيقية في الأعمال
(فواتير، جداول أسعار، وقوائم موظفين) مع أكواد جاهزة للنسخ والاستخدام.
الجداول المنظمة بشكل صحيح أسهل في الفهم للبشر، ومحركات البحث، وتقنيات المساعدة.
استخدم <thead> لعناوين الأعمدة،
و<tbody> لصفوف البيانات، و<tfoot> للملخصات (اختياري).
البنية الدلالية تحسن:
الوسوم الأساسية ووظائف كل منها:
<table> — حاوية الجدول.<caption> — وصف قصير (اختياري لكنه مفيد لسهولة الوصول).<thead> — يجمع صفوف العناوين.<tbody> — يجمع صفوف البيانات.<tfoot> — يجمع صفوف التذييل (المجاميع أو الملخصات).<tr> — صف الجدول.<th> — خلية عنوان (استخدم السمة scope).<td> — خلية بيانات.<colgroup> / <col> — لتحديد تنسيقات أو عرض الأعمدة.فيما يلي ثلاث حالات واقعية لأعمال تجارية مع أكواد نظيفة وقابلة للنسخ. كل مثال يستخدم بنية جدول دلالية، مما يجعلها سهلة القراءة لمحركات البحث وسهلة الوصول.
استخدم الجداول للفواتير وملخصات الطلبات. أضف <caption> و<tfoot> لعرض الإجماليات.
... نفس كود الفاتورة الأصلي بدون ترجمة عناصر الكود ...نصيحة: استخدم colspan في صفوف التذييل لدمج الأعمدة الخاصة بالإجماليات للحفاظ على بساطة الكود وسهولة قراءته.
تُعد الجداول مثالية للمقارنات وخطط الأسعار. استخدم <th scope="col"> لعناوين الأعمدة وأضف <caption> توضيحي.
... كود الجدول الأصلي ...فكرة لتحسين SEO: جداول الأسعار غالبًا ما تظهر في نتائج البحث لعبارات مثل “أفضل خطة كذا”. استخدم تسميات وعناوين وصفية لمساعدة محركات البحث.
احرص على إبقاء قوائم التواصل على شكل جداول لسهولة القراءة. استخدم scope="row" في صفوف العناوين لتحسين سهولة الوصول.
... كود جدول الموظفين الأصلي ...اتبع هذه القواعد البسيطة في قوالب إدارة المحتوى (CMS):
border-collapse: collapse; وpadding متناسق للخلايا.overflow:auto) للجوال.table { width:100%; border-collapse:collapse; }
th, td { border:1px solid #ddd; padding:8px; text-align:left; }
thead th { background:#f6f9fc; font-weight:600; }
tbody tr:nth-child(odd) { background:#fff; }
tbody tr:nth-child(even) { background:#fbfdff; }نصيحة للجوال: ضع الجدول داخل عنصر بحالة تمرير (overflow:auto) للحفاظ على المظهر في الشاشات الصغيرة دون كسر التخطيط.
تأكد من أن مستخدمي لوحات المفاتيح وبرامج القراءة يمكنهم التنقل بسهولة في الجدول:
<caption> لوصف الغرض من الجدول.scope="col" لعناوين الأعمدة وscope="row" لعناوين الصفوف.id للعناوين وheaders للخلايا عند الحاجة.مستخدمي قارئات الشاشة يستفيدون من استخدام scope والعناوين الواضحة — لا تهملها.
colspan وrowspan إلا عند الضرورة.فيما يلي مثال صغير يمكنك نسخه إلى محرر HTML في نظامك:
... كود المثال الأصلي ...<caption> يحتوي على كلمات مفتاحية.
الجداول المبنية بشكل صحيح تساعد المستخدمين ومحركات البحث على فهم البيانات بسهولة.
استخدم الوسوم الدلالية (<thead>، <tbody>، <tfoot>)
ونسّقها ببساطة، مع مراعاة التجاوب مع الشاشات الصغيرة.
✅ انسخ أحد الأمثلة إلى محررك وخصص الأعمدة — هذا وحده سيحل معظم مشاكل الجداول.
