NahdaAIنهضة
HTML & CSS • المستوى الأول • الدرس 4

القوائم والجداول البسيطة (Lists & Tables)

العودة لفهرس المستوى

أهداف الدرس العلمية

  • إنشاء القوائم غير المرتبة <ul> والمرتبة <ol> مع <li>.
  • بناء الجداول باستخدام <table> و <tr> و <td>.
  • تمييز رؤوس الجداول باستخدام الوسم <th>.
  • تنسيق الجداول بـ CSS الحديثة بدلاً من الخصائص المهجورة.

1. أنواع القوائم في HTML

القوائم غير المرتبة <ul>

تُستخدم عندما لا يكون للترتيب أهمية (نقاط دائرية).

html
<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>

القوائم المرقمة <ol>

تُستخدم عندما تتطلب العناصر تسلسلاً (1، 2، 3...).

html
<ol>
  <li>الخطوة الأولى</li>
  <li>الخطوة الثانية</li>
</ol>

2. بناء الجداول + تنسيق CSS الحديث

⚠️ ملاحظة مهمة: خاصية border="1" في HTML مهجورة (Deprecated) منذ HTML5، ويجب استبدالها بـ CSS.

❌ الطريقة القديمة (مهجورة)
html
<table border="1">
  ...
</table>
✅ الطريقة الحديثة (CSS)
css
<style>
  table { border-collapse: collapse; }
  th, td { border: 1px solid #475569; }
</style>

مثال كامل:

html
<table>
  <tr>
    <th>الاسم</th>
    <th>المجال</th>
  </tr>
  <tr>
    <td>أحمد</td>
    <td>تطوير الويب</td>
  </tr>
</table>
التطبيق العملي المباشر

تحدي الدرس الرابع: إنشاء القوائم والجداول

  1. إنشاء قائمة غير مرتبة <ul> تحتوي على عنصرين <li>: HTML5 و CSS3.
  2. إنشاء جدول <table> يحتوي على صفّين:
    • الصف الأول: خليتا رأس <th> هما: اللغة و المستوى.
    • الصف الثاني: خليتا بيانات <td> هما: HTML و مبتدئ.
  3. أضف تنسيق CSS داخل <head> لجعل حدود الجدول واضحة (بدلاً من border="1").
محرر الأكواد — HTML
14px
جارٍ تهيئة البيئة...
المخرجات — المخرجات
الكونسول (Console)
13px
nahda@runner — html
0 lines
(لا يوجد إخراج)
HTMLLn 12, Col 1UTF-8Spaces: 2
186 chars
الدرس السابقالانتقال للمستوى الثاني