الجداول في لغة البرمجة HTML

مفهوم الجدول في لغة البرمجة HTML:

الجدول (Table) في لغة البرمجة (HTML) هي عبارة عن أداة تسمح للمستخدم بعرض المعلومات بشكل مرتب ومقسم لأعمدة وأسطر، وفيما يلي طرق التعامل مع الجداول في لغة (HTML).

طرق التعامل مع الجداول في لغة البرمجة HTML:

كيفية إضافة جدول في الصفحة:

لعرض جدول في الصفحة نستخدم الوسوم التالية لبنائه بالشكل الذي نريده وهي:

• (<table></table>) هو الوسم الأساسي الذي يجب أن يضعه المستخدم لإعلام المتصفح أنك تريد عرض البيانات بداخل جدول.

• (<tr></tr>) يتم استخدامه لإضافة سطر في الجدول.

• (<th></th>) تستخدمه لإضافة خانة في السطر تمثل عنوان، أي النص الذي تضعه فيها يظهر بخط عريض و في المنتصف.

• (<td></td>) تستخدمه لإضافة خانة في السطر تمثل معلومة عادية، أي أن النص الذي يتم إضافته فيها يظهر كنص عادي.

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

خصائص الجداول في لغة البرمجة HTML:

هناك ثلاث خصائص يمكنك إضافتها للجدول لجعله يظهر بشكل أفضل، وهي التالية:

• (border): يتم استخدامها لإظهار خطوط الجداول في لغة (HTML)، والرقم الذي نعطيه لها يمثل حجم الخطوط التي سيتم وضعها بين الأسطر و الأعمدة.

• (width): من الممكن استخدامها لتحديد عرض الجدول والرقم الذي نعطيه لها يمثل عرض الجدول.

• (height): من الممكن استخدامها لتحديد طول الجدول، والرقم الذي نعطيه لها يمثل طول الجدول.

دمج خانات الجداول في لغة البرمجة HTML:

في حال أردت دمج خانات الجدول فهناك خاصيتين يمكنك استخدامهما لأجل ذلك:

• (colspan): يتم استخدامها لدمج الخانات الموجودة على نفس السطر.

• (rowspan): يتم استخدامها لدمج الخانات الموجودة على أكثر من سطر.

وضع عنوان خاص للجداول في لغة HTML:

إذا أردت وضع عنوان خاص للجدول يمكنك كتابة العنوان بداخل الوسم (<caption></caption>) مع الإشارة إلى أنه يجب وضع هذا الوسم كأول وسم في الجدول.