الجداول في HTML: كيفية إنشاء الجداول وشرح وسوم table و tr و td و th
بعد التعرف على القوائم في HTML، ننتقل الآن إلى عنصر مهم يُستخدم لعرض البيانات بشكل منظم، وهو الجداول. تُستعمل الجداول لعرض المعلومات المرتبة مثل الأسعار، النتائج، المقارنات، والبيانات الإحصائية. في هذا الدرس سنتعرف على كيفية إنشاء الجداول في HTML خطوة بخطوة.
ما هي الجداول في HTML؟
الجداول في HTML تُستخدم لتنظيم البيانات في صفوف وأعمدة. تُساعد على عرض المعلومات بشكل واضح وسهل القراءة، خاصة عندما تكون البيانات كثيرة. لكن يُنصح بعدم استعمال الجداول لتصميم الصفحات، بل فقط لعرض البيانات.
وسم table
وسم table هو الوسم الأساسي لإنشاء أي جدول في HTML. يوضع داخله كل ما يخص الجدول من صفوف وخلايا. بدونه لا يمكن إنشاء جدول.
وسم tr (صف الجدول)
وسم tr هو اختصار لـ Table Row، ويُستخدم لإنشاء صف داخل الجدول. كل صف يمكن أن يحتوي على عدة خلايا. عدد الصفوف يحدد عدد الأسطر في الجدول.
وسم td (خلية البيانات)
وسم td هو اختصار لـ Table Data، ويُستخدم لإنشاء خلية داخل الصف. تحتوي هذه الخلايا على البيانات العادية مثل النصوص أو الأرقام.
وسم th (عنوان العمود)
وسم th يُستخدم لإنشاء خلايا العناوين داخل الجدول. غالبًا ما يكون النص داخله غامقًا ومتمركزًا تلقائيًا. يُستعمل في الصف الأول لشرح محتوى الأعمدة.
مثال على جدول HTML بسيط
<table>
<tr>
<th>اللغة</th>
<th>المستوى</th>
</tr>
<tr>
<td>HTML</td>
<td>مبتدئ</td>
</tr>
<tr>
<td>CSS</td>
<td>متوسط</td>
</tr>
</table>
في هذا المثال أنشأنا جدولًا يحتوي على صف للعناوين وصفوف أخرى لعرض البيانات. هذا هو الشكل الأساسي للجداول في HTML.
تنسيق الجداول باستخدام CSS
بشكل افتراضي تظهر الجداول بدون تنسيق جميل، ولهذا يتم استعمال CSS لإضافة الحدود، الألوان، وتباعد الخلايا. HTML تهتم بالبنية فقط، أما التصميم فهو دور CSS.
أخطاء شائعة عند استخدام الجداول
من الأخطاء الشائعة استعمال الجداول لتصميم الصفحة كاملة، وهو أمر غير مُستحسن. كما يجب تجنب نسيان وسم tr أو td، لأن ذلك يؤدي إلى ظهور الجدول بشكل غير منظم.
مصادر لتعلم الجداول في HTML
للمزيد من التعمق يمكنك الرجوع إلى MDN Web Docs أو موقع W3Schools .
خلاصة
الجداول عنصر مهم في HTML لعرض البيانات بشكل منظم. بفهم وسوم table و tr و td و th ستكون قادرًا على إنشاء جداول واضحة واحترافية، وهي خطوة أساسية قبل الانتقال إلى عناصر أكثر تقدمًا.