الجداول في HTML
عندما تكون للبيانات صفوف وأعمدة واضحة — جداول زمنية، أوراق نتائج، مقارنات أسعار، مخططات مقاعد — استخدم table في HTML، لا كومة مسافات أو شبكة مزيفة من القوائم. علّمتك القوائم المجموعات والتسلسلات على محور رئيسي واحد. الجداول تعلّمك بيانات ثنائية الأبعاد: كل خلية عند تقاطع صف–عمود بتسمية يمكنك تسميتها. إذا سأل أحد «ماذا في الصف الثاني، عمود Score؟»، فالجدول هو الجواب الصادق.
لماذا يُستخدم الجدول
يعبّر الجدول عن علاقات عبر شبكة. ينظر القرّاء إلى أسفل عمود أو عبر صف لمقارنة القيم بسرعة. يمكن لتقنيات المساعدة أن تعلن العناوين مع خلايا البيانات عندما تُعلّم العناوين بـ th بدلاً من تنسيق نص td عادي ليبدو عريضاً. لذلك تنتمي الجداول للمعلومات الجدولية — لا لبناء شريط ولا شريط جانبي وذيل لموقع كامل بوسوم table متداخلة كما فعلت دروس التخطيط القديمة. عندما يكون المحتوى حقاً شبكة حقائق قابلة للمقارنة، يستحق ترميز الجدول تعقيده.
الإجابة المباشرة
table— الجدول كلهtr— صف جدولth— خلية عنوان (تسمية عمود أو صف)td— خلية بيانات
ضع تسميات العناوين فيthحتى يتضح المعنى للناس وأدوات المساعدة. حافظ على عدد الخلايا متسقاً عبر الصفوف إلا إذا تعلّمت لاحقاً سمات الامتداد المتقدمة مثلcolspan. استخدم الجداول لشبكات البيانات؛ واستخدم CSS والأقسام الدلالية لتخطيط الصفحة. يسمّيcaptionقصير (في العرض الثاني) مجموعة البيانات لكل من يصل إلى الشبكة.
جدول بيانات بسيط
ابدأ بصف عناوين من خلايا th، ثم صفوف بيانات من خلايا td. يغطي هذا الشكل كثيراً من لوحات النتائج وأوراق المقارنة للمبتدئين.
Simple data table
html<table>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
<tr>
<td>Ada</td>
<td>98</td>
</tr>
<tr>
<td>Lin</td>
<td>91</td>
</tr>
</table>قراءة العينة البسيطة
tableيلف الشبكة كلها- كل
trصف أفقي واحد - الصف الأول يستخدم
thلتسميات الأعمدة («Name»، «Score») - الصفوف التالية تستخدم
tdللقيم العادية - قد يُظهر تنسيق المتصفح الافتراضي حدوداً خفيفة أو لا — دروس لاحقة تغطي الحدود؛ البنية أولاً
- عُدّ الخلايا لكل صف: صفّا البيانات كلاهما خليتان، مطابقتان للعناوين
Caption وتسميات الصفوف
يسمّي caption الجدول للجميع. استخدام th في العمود الأول يمكن أن يسمّي كل صف عندما تهم عناوين الصفوف بقدر عناوين الأعمدة. اجعل الـ caption قصيراً ومحدداً.
Table with caption and row headers
html<table>
<caption>Practice quiz scores</caption>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
<tr>
<th>Ada</th>
<td>98</td>
</tr>
<tr>
<th>Lin</th>
<td>91</td>
</tr>
</table>قراءة عينة الـ caption
- يجب أن يكون
captionأول ابن داخلtableفي أنماط المبتدئين الشائعة - تبقى عناوين الأعمدة في الصف العلوي كـ
th - أسماء الصفوف في العمود الأول يمكن أن تكون أيضاً
thحتى تكون «Ada» تسمية لا مجرد خلية شبيهة برقم - تبقى الخلايا المتبقية
tdللدرجات الفعلية - ما زلت لا تبني تخطيط صفحة — بل تصف مجموعة بيانات صغيرة
الجداول مقابل القوائم مقابل التخطيط
- عناصر مرتبطة أو خطوات بمحور رئيسي واحد → قوائم (
ul/olمن الدرس السابق) - قيم تُقارن عبر صفوف وأعمدة → جداول
- مناطق الصفحة كاملة (شريط، أعمدة، ذيل) → هيكل دلالي + CSS لاحقاً، لا جداول تخطيط متداخلة ضخمة
عادات «تخطيط الجدول» القديمة تكسر الاستجابة على الشاشات الصغيرة وتصعّب إمكانية الوصول. إذا وجدت نفسك تتداخل جداول فقط لوضع شعار بجانب قائمة، توقف وانتظر دروس التخطيط. السؤال: «هل أقارن خلايا في شبكة، أم أحاول فقط رسم صناديق على الصفحة؟»
عادات إمكانية الوصول للشبكات
فضّل عناوين th الحقيقية على نص td عريض يبدو عنواناً بصرياً فقط. يوضح caption واضح (أو عنوان قريب) موضوع الشبكة قبل الدخول إليها. حافظ على محاذاة أعداد خلايا الصفوف لتبقى الأعمدة صادقة عند التبويب أو السحب. سمات متقدمة مثل scope تحسّن ارتباط العناوين للجداول المعقدة — أتقن أولاً تقسيم th/td الأساسي ثم حسّن. لا تعتمد على اللون وحده لتمييز التسميات.
تمرّن في المحرر
- أنشئ
tableبخليتي عنوان (th) في الصف الأول. - أضف ثلاثة صفوف بيانات بعدد
tdمتطابق. - اعرضها في المتصفح وتأكد أن الشبكة تُقرأ من اليسار لليمين ومن الأعلى للأسفل كما تتوقع.
- اختيارياً أضف
captionوحوّل العمود الأول إلى خلاياthلتسمية الصفوف كما في العينة الثانية. - اكسر عمداً صفاً بخلية ناقصة، لاحظ الشكل الغريب، ثم أصلحه.
- اكتب جملة فوق الجدول أو داخل الـ caption توضّح ما تقيسه البيانات.
- اسأل زميلاً أي عمود هو أيٌّ — باستخدام عناوينك فقط؛ إن أخطأ غيّر نص
th.
أخطاء سهلة
- بناء مواقع كاملة كجداول متداخلة ضخمة (عادة تخطيط قديمة)
- استخدام
tdفقط عندما تكون الخلايا عناوين حقاً - أعداد خلايا غير متطابقة لكل صف
- استخدام جدول حيث يعبّر
ul/olبسيط عن قائمة أحادية المحور بشكل أفضل - ترك الجدول بلا عنوان مقروء للإنسان (caption أو عنوان)
- نسخ مقتطفات «جدول تخطيط» قديمة إلى صفحات تمرين حديثة
مكان هذا الدرس بعد القوائم
تنظّم القوائم مجموعات أحادية البعد. تنظّم الجداول الشبكات. ستُنسّق قريباً الحدود والمسافات؛ هذا الدرس يثبّت الهيكل: table وtr وth وtd بعناوين صادقة. أبقِ البيانات جدولية والتخطيط في مكان آخر، وسيزيّن عملك اللاحق في CSS هيكلاً ذا معنى مسبقاً.
ملخص
- تستخدم الجداول
table+tr+th/td - للبيانات الجدولية الشبكية، لا لتخطيط صفحة حديثة كاملة
- فضّل
thلتسميات العناوين (الأعمدة، وعند الحاجة الصفوف) - يساعد
captionعلى تسمية مجموعة البيانات - حافظ على أعداد الخلايا متسقة عبر الصفوف
- تبقى القوائم أفضل للمجموعات والخطوات البسيطة بلا محور ثانٍ
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى