الجداول — أساسيات HTML

الجداول

الجدول لعرض بيانات جدولية: صفوف وأعمدة لها معنى (جدول درجات، أسعار، مواعيد). كان يُستخدم قديماً لتخطيط الصفحات — هذا خطأ اليوم: يضر الوصولية والتجاوب. التخطيط من مسؤولية CSS (Flexbox و Grid).

البنية

<table>
    <caption>درجات الفصل الأول</caption>
    <thead>
        <tr>
            <th scope="col">الطالب</th>
            <th scope="col">الرياضيات</th>
            <th scope="col">العلوم</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">سارة</th>
            <td>95</td>
            <td>88</td>
        </tr>
        <tr>
            <th scope="row">عمر</th>
            <td>78</td>
            <td>91</td>
        </tr>
    </tbody>
</table>

| العنصر | الدور |

|---|---|

| <table> | الجدول |

| <caption> | عنوان الجدول (أول عنصر داخله) |

| <thead> / <tbody> / <tfoot> | الرأس / الجسم / الذيل (للمجاميع) |

| <tr> | صف |

| <th> | خلية عنوان |

| <td> | خلية بيانات |

لماذا th و scope؟

قارئ الشاشة يقرأ الخلية "88" مع عناوينها: "عمر، العلوم، 88". بدون <th> يسمع المستخدم أرقاماً بلا سياق. scope="col" تعني أن العنوان لعمود، و scope="row" لصف.

دمج الخلايا

<table>
    <caption>جدول الأسبوع</caption>
    <thead>
        <tr>
            <th scope="col">اليوم</th>
            <th scope="col" colspan="2">الحصص</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row" rowspan="2">الأحد</th>
            <td>HTML</td>
            <td>CSS</td>
        </tr>
        <tr>
            <td colspan="2">مشروع عملي</td>
        </tr>
    </tbody>
</table>

- colspan="2" الخلية تمتد عمودين.

- rowspan="2" الخلية تمتد صفين — فالصف التالي يحتوي خلايا أقل.

استخدم الدمج باعتدال؛ الجداول المعقدة صعبة على قارئات الشاشة. أحياناً جدولان بسيطان أفضل من جدول واحد معقد.

الذيل للمجاميع

<table>
    <caption>فاتورة</caption>
    <thead><tr><th scope="col">المنتج</th><th scope="col">السعر</th></tr></thead>
    <tbody>
        <tr><td>كتاب</td><td>15,000</td></tr>
        <tr><td>دفتر</td><td>3,000</td></tr>
    </tbody>
    <tfoot>
        <tr><th scope="row">المجموع</th><td>18,000</td></tr>
    </tfoot>
</table>

الشكل

الجدول الافتراضي بلا حدود. الحدود والألوان والمسافات من CSS (border، border-collapse، padding). لا تستخدم الخاصية القديمة border="1" في الكود الجديد.

الجداول على الجوال

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

تمرين

أنشئ جدول "مصاريف الشهر" بـ caption، وأعمدة (البند، التصنيف، المبلغ)، وخمسة صفوف، وذيل <tfoot> بالمجموع. استخدم th مع scope المناسب.

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>جدول الدرجات</title>
</head>
<body>
    <table>
        <caption>درجات الفصل الأول</caption>
        <thead>
            <tr>
                <th scope="col">الطالب</th>
                <th scope="col">الرياضيات</th>
                <th scope="col">العلوم</th>
                <th scope="col">المعدل</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">سارة</th>
                <td>95</td>
                <td>88</td>
                <td>91.5</td>
            </tr>
            <tr>
                <th scope="row">عمر</th>
                <td>78</td>
                <td>91</td>
                <td>84.5</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th scope="row">معدل الصف</th>
                <td>86.5</td>
                <td>89.5</td>
                <td>88</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>