الدرس 5: تنظيم البيانات.. القوائم (Lists) والجداول (Tables) في HTML
تعلم كيفية تنظيم بيانات موقعك باحترافية باستخدام القوائم المرتبة وغير المرتبة، واتقن هيكلة الجداول (table, tr, td) لعرض البيانات التقنية بوضوح وسهولة.
لا يمكن بناء موقع احترافي بدون ترتيب البيانات. القوائم تُستخدم في كل شيء (من قوائم التنقل "Navbar" إلى تعليمات الدروس)، والجداول هي الطريقة المثلى لعرض البيانات المقارنة والتقنية.
1. القوائم في HTML (Lists)
تنقسم القوائم إلى نوعين أساسيين، وكلاهما يعتمد على وسم "عنصر القائمة" <li> (List Item):
القوائم غير المرتبة (Unordered Lists - <ul>)
تُستخدم عندما لا يكون ترتيب العناصر مهماً، وتظهر عادةً على شكل نقاط (Bullets).
الوسم: <ul>
الاستخدام الشائع: قوائم الروابط في أعلى الموقع.
القوائم المرتبة (Ordered Lists - <ol>)
تُستخدم عندما يكون الترتيب مهماً (مثل خطوات خوارزمية أو ترتيب دروس). وتظهر على شكل أرقام أو حروف.
الوسم: <ol>
2. الجداول في HTML (Tables)
تُستخدم الجداول لعرض البيانات المجدولة (Tabular Data). يتكون الجدول من هيكل متداخل يجب فهمه بدقة:
<table>: الحاوية الأساسية للجدول.
<tr> (Table Row): لإنشاء سطر جديد في الجدول.
<th> (Table Header): لإنشاء خلية "عنوان" في رأس الجدول (تكون عريضة وموسطة تلقائياً).
<td> (Table Data): لإنشاء خلية بيانات عادية.
3. تطبيق عملي لـ "الشيفرة"
لنجرب دمج القوائم والجداول في كود واحد لبناء "جدول محتويات" و"جدول أسعار":
مثال برمجى
4. قواعد احترافية لـ SEO وتجربة المستخدم
لا تستخدم الجداول للتنسيق: قديماً كان المبرمجون يستخدمون الجداول لتقسيم شكل الصفحة، وهذا خطأ فادح حالياً. الجداول للبيانات فقط، والتنسيق وظيفة CSS.
استخدم القوائم في الـ Navbar: محركات البحث تفهم أن القائمة <ul> الموجودة في أعلى الصفحة هي روابط التنقل الأساسية للموقع، مما يحسن أرشفة موقعك.
وسم <caption>: يمكنك إضافة عنوان للجدول باستخدام وسم <caption> داخل وسم الـ <table> مباشرة لزيادة وضوح البيانات.
تحدي "الشيفرة" (5)
قم ببناء "جدول مواعيدك البرمجية". اجعل العمود الأول لليوم، والثاني للغة التي ستتعلمها، والثالث للوقت. ثم أضف قائمة مرتبة <ol> بأسفل الجدول تحتوي على أهم 3 أهداف تريد تحقيقها هذا الأسبوع.
هل تمكنت من محاذاة البيانات في الجدول؟ شاركنا "جدولك" في التعليقات!