فهم الجداول في HTML

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

إنشاء جدول بسيط

لبدء إنشاء جدول في HTML، نستخدم العنصر <table>، والذي يعتبر العنصر الرئيسي الذي يحتوي على الهيكل العام للجدول. ثم نقوم بإضافة الصفوف باستخدام عنصر <tr> (اختصار لـ table row)، وداخل كل صف نستخدم عنصر <td> (اختصار لـ table data) لتمثيل الخلايا. إليك مثال على كيفية إنشاء جدول بسيط يحتوي على صفين وثلاثة أعمدة:

<table border=\"1\">
        <tr>
            <td>البيان 1</td>
            <td>البيان 2</td>
            <td>البيان 3</td>
        </tr>
        <tr>
            <td>البيان 4</td>
            <td>البيان 5</td>
            <td>البيان 6</td>
        </tr>
    </table>

في هذا المثال، استخدمنا خاصية border لإضافة حدود للخلايا لتكون أكثر وضوحًا. يمكنك تعديل عدد الصفوف والأعمدة وفقًا لاحتياجاتك.

إضافة رؤوس للجداول

لتوضيح معنى البيانات الموجودة في الجدول، من الجيد إضافة رؤوس للأعمدة. يتم ذلك باستخدام عنصر <th> (اختصار لـ table header) بدلاً من <td> في الصف الأول. يضيف هذا العنصر تنسيقًا افتراضيًا مختلفًا للخلايا، مما يجعلها تبرز كرؤوس. إليك كيفية إضافة رؤوس إلى الجدول السابق:

<table border=\"1\">
        <tr>
            <th>العنوان 1</th>
            <th>العنوان 2</th>
            <th>العنوان 3</th>
        </tr>
        <tr>
            <td>البيان 1</td>
            <td>البيان 2</td>
            <td>البيان 3</td>
        </tr>
        <tr>
            <td>البيان 4</td>
            <td>البيان 5</td>
            <td>البيان 6</td>
        </tr>
    </table>

في هذا المثال، قمنا باستبدال <td> بـ <th> في الصف الأول لإضافة رؤوس للأعمدة. يمكن تخصيص تنسيق الجدول بشكل أكبر باستخدام CSS لإضافة ألوان أو تغيير الخطوط.