HTMLالجداول
- مفهوم الجدول
- إضافة جدول في الصفحة
- خصائص الجدول
- دمج خانات الجدول
- وضع عنوان خاص للجدول
مفهوم الجدول
الجدول ( Table ) يسمح لك بعرض المعلومات بشكل مرتب و مقسم لأعمدة و أسطر.
في هذا الدرس ستتعلم كيف تنشئ جدول, كيف تضيف فيه أسطر, كيف تضيف فيه أعمدة و كيف تدمج الأعمدة و الأسطر مع بعضها.
إضافة جدول في الصفحة
لعرض جدول في الصفحة نستخدم الوسوم التالية لبنائه بالشكل الذي نريده:
- <table> </table> هو الوسم الأساسي الذي يجب أن تضعه لإعلام المتصفح أنك تريد عرض البيانات بداخل جدول.
- <tr> </tr> تستخدمه لإضافة سطر في الجدول.
- <th> </th> تستخدمه لإضافة خانة في السطر تمثل عنوان, أي النص الذي تضعه فيها يظهر بخط عريض و في المنتصف.
- <td> </td> تستخدمه لإضافة خانة في السطر تمثل معلومة عادية, أي النص الذي تضعه فيها يظهر كنصر عادي.
معلومة تقنية
بشكل عام, الوسوم التي ذكرناها هي التي تحتاجها لبناء الجدول و لكن عليك معرفة أن استخدامها لوحدها لا يجعل الجدول يظهر بشكل جيد في المتصفح و سبب ذلك أن المتصفح لا يظهر أي خطوط بين أسطر و أعمدة الجدول من تلقاء نفسه و إنما أنت من يمكنه فعل ذلك سواء بإضافة بعض خصائص HTML للجدول أو بواسطة كود CSS الذي يمكن استخدامه مع الجدول.
بالتأكيد CSS توفر لك إمكانيات هائلة لتصميم الجدول و لكن بما أننا ندرس و نركز على ما توفره لنا لغة HTML فقط, سنتطرق للخصائص التي توفرها لنا هي فقط.
في المثال التالي قمنا بإضافة جدول يتألف من 4 أسطر و كل سطر فيه 3 خانات.
مثال
خصائص الجدول
هناك ثلاث خصائص يمكنك إضافتها للعمود لجعله يظهر بشكل أفضل و هي التالية:
border
يمكنك استخدامها لإظهار خطوط الجدول, الرقم الذي نعطيه لها يمثل حجم الخطوط التي سيتم وضعها بين الأسطر و الأعمدة.width
يمكنك استخدامها لتحديد عرض الجدول بنفسك بدل جعل المتصفح يفعل ذلك, الرقم الذي نعطيه لها يمثل عرض الجدول.height
يمكنك استخدامها لتحديد طول الجدول بنفسك بدل جعل المتصفح يفعل ذلك, الرقم الذي نعطيه لها يمثل طول الجدول.
سنضيف الخاصية border="1"
في جميع الأمثلة التي نضعها حتى تظهر خطوط الجدول.
إبتداءاً من الإصدار الخامس في HTML لم نعد نستخدم هذه الخصائص ابتداءاً لأننا أصبحنا نعدّل تصاميم الجداول بواسطة CSS و هي توفر الكثير من الخصائص التي يمكننا استخدامها لأجل ذلك. في هذا الدرس سنستخدم هذه الخصائص فقط ليكون الشرح أكثر وضوحاً.
في المثال التالي قمنا بإظهار خطوط الجدول حجمها 1
بيكسل.
المثال الأول
في المثال التالي قمنا بجعل عرض الجدول 100%
و طوله 150
بيكسل.
المثال الثاني
دمج خانات الجدول
في حال أردت دمج خانات الجدول فهناك خاصيّتين يمكنك استخدامهما لأجل ذلك:
- colspan نستخدمها لدمج الخانات الموجودة على نفس السطر.
- rowspan نستخدمها لدمج الخانات الموجودة على أكثر من سطر.
ملاحظة: colspan و rowspan يمكن استخدامهما مع الوسم <th> و الوسم <td> فقط.
في المثال التالي قمنا بدمج الخانة الأولى و الثانية الموجودتين في السطر الأول.
المثال الأول
في المثال التالي قمنا بدمج الخانة الثانية في السطر الأول مع الخانة الثانية الموجودة تحتها في السطر الثاني.
المثال الثاني
في المثال التالي قمنا بدمج الخانة الثانية و الثالثة في السطر الثاني مع الخانة الثانية و الثالثة الموجودة تحتها في السطر الثالث.
المثال الثالث
وضع عنوان خاص للجدول
إذا أردت وضع عنوان خاص للجدول, يمكنك كتابة العنوان بداخل الوسم <caption> </caption> مع الإشارة إلى أنه يجب وضع هذا الوسم كأول وسم في الجدول.
في المثال التالي قمنا بوضع عنوان للجدول بواسطة الوسم <caption>.