القوائم والجداول في HTML: شرح ul وol وdl وtable وth وcaption وscope

ثلاثة أنواع من القوائم

القائمة غير المرتبة <ul> للعناصر التي لا يغيّر ترتيبها المعنى، مثل الميزات أو المكونات. والقائمة المرتبة <ol> للخطوات أو التصنيفات أو أي شيء يهم فيه الموضع، والمتصفح يرقّمها لك. وكل عنصر في أي منهما هو <li>، ولا يمكن أن يكون الأبناء المباشرون لـ ul وol إلا عناصر <li>.

وللعنصر <ol> سمات مفيدة: start="5" يبدأ العدّ من 5، وreversed يعدّ تنازلياً، وtype="a" أو type="i" يستخدم الأحرف أو الأرقام الرومانية. ويمكن تداخل القوائم: ضع <ul> جديدة كاملة داخل <li>، وليس مباشرة داخل القائمة الأم.

وقائمة الوصف <dl> تقرن المصطلحات بأوصافها: <dt> هو المصطلح و<dd> وصفه. وهي مناسبة لمسارد المصطلحات والأسئلة الشائعة وتفاصيل المفتاح والقيمة مثل "ساعات العمل: من 9 إلى 5".

بناء جدول بيانات

يُبنى الجدول من صفوف (<tr>) من الخلايا. خلايا البيانات <td>، وخلايا العناوين <th>. اجمع صف العناوين في <thead> وصفوف البيانات في <tbody>، وأضف <tfoot> للمجاميع. وتساعد هذه المجموعات قارئات الشاشة والطباعة (تتكرر العناوين في كل صفحة) والتنسيق.

يجب أن يكون <caption> أول شيء داخل <table>، فهو عنوان الجدول، وتعلنه قارئات الشاشة عندما يصل المستخدم إلى الجدول. وتعني scope="col" على th أنه يعنون عموداً، وscope="row" أنه يعنون صفاً. وبهما تستطيع قارئة الشاشة أن تقول "السعر، 25 درهماً" أثناء تنقل المستخدم بين الخلايا.

ويمكن للخلية أن تمتد على عدة أعمدة باستخدام colspan="2" أو عدة صفوف باستخدام rowspan="2". استخدم الامتداد بحذر، فالجداول المعقدة ذات الخلايا المدمجة صعبة القراءة على الجميع، وغالباً ما يكون تقسيمها إلى جدولين بسيطين أفضل.

متى لا تستخدم الجدول

قبل سنوات كانت تخطيطات الصفحات كاملة تُبنى بالجداول. لا تفعل ذلك، فقارئات الشاشة تعلن كل صف وعمود، والتخطيط لا يتكيف مع الهواتف، والشيفرة صعبة التعديل. استخدم CSS Grid أو Flexbox للتخطيط، وستتعلمهما في دورة CSS. فالجداول للبيانات التي قد تضعها في جدول بيانات إلكتروني.

والجداول العريضة تتجاوز الشاشات الصغيرة. والحل البسيط أن تضع الجدول داخل حاوية تتمرر أفقياً (overflow-x: auto في CSS) حتى لا تتمرر الصفحة نفسها أفقياً.

أخطاء شائعة

• نص مباشر داخل ul أو ol

  <ul>Item</ul> أو وضع <ul> متداخلة مباشرة داخل <ul> غير صحيح. كل شيء يجب أن يكون داخل عناصر <li>.

• خلية td عريضة بدلاً من th

  جعل الصف الأول عريضاً بـ CSS لا يجعله عنواناً. استخدم <th> مع scope لتعرف التقنيات المساعدة أي الخلايا عناوين.

• ترقيم الخطوات يدوياً

  كتابة "1." و"2." في الفقرات تعني إعادة الترقيم يدوياً كلما تغيّرت خطوة. أما <ol> فيرقّم تلقائياً ويخبر قارئات الشاشة بعدد الخطوات.

تمرين

ابنِ جدولاً أسبوعياً: table فيه caption، وصف عناوين داخل thead فيه خليتان th scope="col" على الأقل، وصفان على الأقل داخل tbody. وتحته أضف قائمة مرتبة من ثلاث خطوات دراسية على الأقل.

<table>
  <caption>My study week</caption>
  <thead>
    <tr>
      <th scope="col">Day</th>
      <th scope="col">Subject</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Sunday</td>
      <td>HTML</td>
    </tr>
    <tr>
      <td>Monday</td>
      <td>CSS</td>
    </tr>
  </tbody>
</table>

<ol>
  <li>Read the lesson</li>
  <li>Do the exercise</li>
  <li>Take the quiz</li>
</ol>

اختبار سريع

أسئلة يطرحها الناس

المصادر

روجعت المعلومات في هذا الدرس وفق هذه الصفحات الرسمية بتاريخ 20 أكتوبر 2026.

• MDN: Lists
• MDN: HTML table basics
• W3C WAI: Tables tutorial
• WHATWG HTML: Tabular data

تبقى أمثلة الشيفرة بالإنجليزية وتعمل في بيئة معزولة على جهازك. والنص العربي بانتظار المراجعة من متحدث أصلي. وإذا لاحظت خطأ فأخبرنا عبر صفحة التواصل.