الفصل الثامن: الجداول (Tables) في HTML

1. مقدمة إلى الجداول في HTML

الجداول (Tables) تُستخدم لتنظيم البيانات في صفوف وأعمدة. عنصر الجداول في HTML يساعد على تقديم البيانات بشكل منظم وسهل القراءة.

2. إنشاء جدول أساسي

الصيغة الأساسية:

<table>
    <tr>
        <th>رأس العمود 1</th>
        <th>رأس العمود 2</th>
    </tr>
    <tr>
        <td>بيانات الصف 1، العمود 1</td>
        <td>بيانات الصف 1، العمود 2</td>
    </tr>
</table>

الشرح:

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

مثال:

<table border="1">
    <tr>
        <th>الاسم</th>
        <th>العمر</th>
    </tr>
    <tr>
        <td>أحمد</td>
        <td>25</td>
    </tr>
    <tr>
        <td>مريم</td>
        <td>22</td>
    </tr>
</table>

3. إضافة رؤوس وأقدام للجداول

استخدام <thead> و <tfoot> و <tbody>:

<table border="1">
    <thead>
        <tr>
            <th>الاسم</th>
            <th>العمر</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>أحمد</td>
            <td>25</td>
        </tr>
        <tr>
            <td>مريم</td>
            <td>22</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">إجمالي البيانات: 2</td>
        </tr>
    </tfoot>
</table>

الشرح:

• <thead>: يُحدد رأس الجدول.
• <tbody>: يُحدد جسم الجدول.
• <tfoot>: يُحدد ذيل الجدول.

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

دمج الأعمدة باستخدام colspan:

<td colspan="2">دمج خليتين</td>

دمج الصفوف باستخدام rowspan:

<td rowspan="2">دمج صفين</td>

مثال:

<table border="1">
    <tr>
        <th>الاسم</th>
        <th colspan="2">التفاصيل</th>
    </tr>
    <tr>
        <td>أحمد</td>
        <td>25</td>
        <td>مهندس</td>
    </tr>
    <tr>
        <td rowspan="2">مريم</td>
        <td>22</td>
        <td>طبيبة</td>
    </tr>
</table>

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

تغيير نمط الجدول:

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

مثال مع التنسيق:

<table>
    <thead>
        <tr>
            <th>الاسم</th>
            <th>العمر</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>أحمد</td>
            <td>25</td>
        </tr>
        <tr>
            <td>مريم</td>
            <td>22</td>
        </tr>
    </tbody>
</table>

6. تمارين تطبيقية

1. قم بإنشاء جدول يعرض قائمة طلاب مع أسمائهم وأعمارهم وتخصصاتهم.
2. أضف رأس وذيل للجدول يعرض العناوين والإجمالي.
3. استخدم خاصيتي colspan و rowspan لدمج الخلايا في جدول.
4. طبّق تنسيق CSS لتغيير ألوان الجدول وتحسين مظهره.

بهذا الفصل، تعلمنا كيفية إنشاء الجداول وتنظيم البيانات داخلها. في الفصل القادم، سنتعلم كيفية تحسين نمط صفحات الويب باستخدام HTML وCSS معًا.