مقدمة عن الجداول في لغة HTML

أهلاً بك مجدداً أيها المبرمج الصغير في الدرس السادس من دورة تعلم لغة HTML للمستوى المبتدئ. في هذا الدرس، سنتعلم كيف نقوم بتنظيم وعرض البيانات بطريقة احترافية ومرتبة باستخدام الجداول (Tables).

الجداول في صفحات الويب تشبه تماماً الجداول الموجودة في برامج جداول البيانات مثل Excel؛ فهي تتكون من صفوف وأعمدة تتقاطع مع بعضها لتشكيل خلايا نعرض من خلالها النصوص، الصور، أو حتى روابط أخرى.

العناصر الأساسية لبناء الجدول

لبناء جدول بسيط في لغة HTML، نحن بحاجة إلى مجموعة من الوسوم (Tags) الأساسية التي تعمل معاً بتناغم تام. إليك أبرز هذه الوسوم:

• <table>: الوسم الرئيسي الذي يحيط بالجدول كله ويعرّفه للمتصفح.
• <tr>: يمثل (Table Row) أي صف جديد داخل الجدول.
• <th>: يمثل (Table Header) أي خلية مخصصة لعنوان العمود، وعادة ما يظهر النص فيها بخون عريض (Bold) وفي منتصف الخلية.
• <td>: يمثل (Table Data) أي خلية عادية تحتوي على البيانات أو المعلومات.

مثال عملي على إنشاء جدول بيانات

دعنا نطبق ما تعلمناه عملياً ونقوم بإنشاء جدول بسيط يعرض قائمة ببعض أسماء الطلاب وعلاماتهم في مادة البرمجة:

<table border="1">
    <tr>
        <th>اسم الطالب</th>
        <th>المادة</th>
        <th>النتيجة</th>
    </tr>
    <tr>
        <td>أحمد محمد</td>
        <td>HTML</td>
        <td>ممتاز</td>
    </tr>
    <tr>
        <td>فاطمة علي</td>
        <td>HTML</td>
        <td>جيد جداً</td>
    </tr>
</table>

في الكود أعلاه، استخدمنا السمة border="1" لنضيف إطاراً مرئياً حول خلايا الجدول لتسهيل القراءة، ولكن في المستقبل سنعتمد بشكل أساسي على لغة التنسيق CSS لتصميم الجداول بشكل أجمل بكثير.

المصادر والتوثيق الرسمي

لتعميق فهمك أكثر حول كيفية استخدام الجداول وخصائصها المتقدمة، يمكنك زيارة الموقع الرسمي والاطلاع على التوثيق عبر الرابط التالي: توثيق الجداول في MDN Web Docs.