الفصل الرابع: الجداول والقوائم في HTML

1. الجداول (Tables)

الجداول تُستخدم لتنظيم البيانات في صفوف وأعمدة. يتم إنشاؤها باستخدام العنصر <table>.

هيكل الجدول:

• <table>: العنصر الرئيسي للجداول.
• <tr>: يُمثل صفًا في الجدول.
• <th>: يُستخدم لإنشاء رأس الجدول.
• <td>: يُستخدم لإضافة بيانات داخل الصفوف.

مثال بسيط:

<table border="1">
    <tr>
        <th>الاسم</th>
        <th>العمر</th>
        <th>المدينة</th>
    </tr>
    <tr>
        <td>أحمد</td>
        <td>25</td>
        <td>القاهرة</td>
    </tr>
    <tr>
        <td>منى</td>
        <td>30</td>
        <td>الإسكندرية</td>
    </tr>
</table>

السمات الشائعة للجداول:

• border: لتحديد عرض حدود الجدول.
• cellpadding: لتحديد المسافة داخل الخلايا.
• cellspacing: لتحديد المسافة بين الخلايا.

2. دمج الخلايا

يمكن دمج الخلايا أفقيًا أو عموديًا باستخدام السمات colspan و rowspan.

مثال:

<table border="1">
    <tr>
        <th colspan="2">معلومات شخصية</th>
    </tr>
    <tr>
        <td>الاسم</td>
        <td>أحمد</td>
    </tr>
    <tr>
        <td rowspan="2">العنوان</td>
        <td>القاهرة</td>
    </tr>
    <tr>
        <td>الإسكندرية</td>
    </tr>
</table>

3. القوائم (Lists)

القوائم المرتبة (Ordered Lists):

تُستخدم لإنشاء قوائم مرقمة.

مثال:

<ol>
    <li>العنصر الأول</li>
    <li>العنصر الثاني</li>
    <li>العنصر الثالث</li>
</ol>

القوائم غير المرتبة (Unordered Lists):

تُستخدم لإنشاء قوائم بعلامات ترقيم (نقاط).

مثال:

<ul>
    <li>العنصر الأول</li>
    <li>العنصر الثاني</li>
    <li>العنصر الثالث</li>
</ul>

القوائم الوصفية (Description Lists):

تُستخدم لتعريف المصطلحات أو العناصر.

مثال:

<dl>
    <dt>HTML</dt>
    <dd>لغة ترميز النصوص التشعبية</dd>
    <dt>CSS</dt>
    <dd>لغة تنسيق صفحات الويب</dd>
</dl>

4. تنسيق الجداول والقوائم باستخدام CSS

تنسيق الجداول:

<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }
    th, td {
        border: 1px solid black;
        padding: 8px;
        text-align: left;
    }
    th {
        background-color: #f2f2f2;
    }
</style>

تنسيق القوائم:

<style>
    ul {
        list-style-type: square;
    }
    ol {
        list-style-type: upper-roman;
    }
</style>

تمارين تطبيقية:

1. قم بإنشاء جدول يحتوي على:
   • 3 أعمدة: الاسم، الوظيفة، والراتب.
   • 4 صفوف.
2. أنشئ قائمة مرتبة تحتوي على 5 عناصر.
3. أضف قائمة وصفية تُعرف 3 مصطلحات تقنية.

بهذا الفصل، تعلمنا كيفية إنشاء الجداول والقوائم بطرق متنوعة. في الفصل الخامس سنتحدث عن النماذج (Forms) وكيفية التفاعل مع المستخدمين.