HTML الجداول
مفهوم الجدول
الجدول ( Table ) يسمح لك بعرض المعلومات بشكل مرتب و مقسم لأعمدة و أسطر.
في هذا الدرس ستتعلم كيف تنشئ جدول, كيف تضيف فيه أسطر, كيف تضيف فيه أعمدة و كيف تدمج الأعمدة و الأسطر مع بعضها.
إضافة جدول في الصفحة
لعرض جدول في الصفحة نستخدم الوسوم التالية لبنائه بالشكل الذي نريده:
<table> </table>
هو الوسم الأساسي الذي يجب أن تضعه لإعلام المتصفح أنك تريد عرض البيانات بداخل جدول.<tr> </tr>
تستخدمه لإضافة سطر في الجدول.<th> </th>
تستخدمه لإضافة خانة في السطر تمثل عنوان, أي النص الذي تضعه فيها يظهر بخط عريض و في المنتصف.<td> </td>
تستخدمه لإضافة خانة في السطر تمثل معلومة عادية, أي النص الذي تضعه فيها يظهر كنصر عادي.
معلومة تقنية
بشكل عام, الوسوم التي ذكرناها هي التي تحتاجها لبناء الجدول و لكن عليك معرفة أن استخدامها لوحدها لا يجعل الجدول يظهر بشكل جيد في المتصفح و سبب ذلك أن المتصفح لا يظهر أي خطوط بين أسطر و أعمدة الجدول من تلقاء نفسه و إنما أنت من يمكنه فعل ذلك سواء بإضافة بعض خصائص HTML للجدول أو بواسطة كود CSS الذي يمكن استخدامه مع الجدول.
بالتأكيد CSS توفر لك إمكانيات هائلة لتصميم الجدول و لكن بما أننا ندرس و نركز على ما توفره لنا لغة HTML فقط, سنتطرق للخصائص التي توفرها لنا هي فقط.
في المثال التالي قمنا بإضافة جدول يتألف من 4 أسطر و كل سطر فيه 3 خانات.
مثال
<table> <!-- هنا قمنا بتعريف السطر الأول في الجدول و بداخله وضعنا 3 خانات عبارة عن عناوين --> <tr> <th>ID</th> <th>Name</th> <th>Mark</th> </tr> <!-- هنا قمنا بتعريف السطر الثاني في الجدول و بداخله وضعنا 3 خانات عادية --> <tr> <td>1</td> <td>Mhamad Harmush</td> <td>A</td> </tr> <!-- هنا قمنا بتعريف السطر الثالث في الجدول و بداخله وضعنا 3 خانات عادية --> <tr> <td>2</td> <td>Rima Houssayni</td> <td>C</td> </tr> <!-- هنا قمنا بتعريف السطر الرابع في الجدول و بداخله وضعنا 3 خانات عادية --> <tr> <td>3</td> <td>Youssef Jabber</td> <td>B</td> </tr> </table>
خصائص الجدول
هناك ثلاث خصائص يمكنك إضافتها للعمود لجعله يظهر بشكل أفضل و هي التالية:
border
يمكنك استخدامها لإظهار خطوط الجدول, الرقم الذي نعطيه لها يمثل حجم الخطوط التي سيتم وضعها بين الأسطر و الأعمدة.width
يمكنك استخدامها لتحديد عرض الجدول بنفسك بدل جعل المتصفح يفعل ذلك, الرقم الذي نعطيه لها يمثل عرض الجدول.height
يمكنك استخدامها لتحديد طول الجدول بنفسك بدل جعل المتصفح يفعل ذلك, الرقم الذي نعطيه لها يمثل طول الجدول.
سنضيف الخاصية border="1"
في جميع الأمثلة التي نضعها حتى تظهر خطوط الجدول.
إبتداءاً من الإصدار الخامس في HTML لم نعد نستخدم هذه الخصائص ابتداءاً لأننا أصبحنا نعدّل تصاميم الجداول بواسطة CSS و هي توفر الكثير من الخصائص التي يمكننا استخدامها لأجل ذلك. في هذا الدرس سنستخدم هذه الخصائص فقط ليكون الشرح أكثر وضوحاً.
في المثال التالي قمنا بإظهار خطوط الجدول حجمها 1
بيكسل.
المثال الأول
<table border="1"> ... </table>
في المثال التالي قمنا بجعل عرض الجدول 100%
و طوله 150
بيكسل.
المثال الثاني
<table border="1" width="100%" height="150"> ... </table>
دمج خانات الجدول
في حال أردت دمج خانات الجدول فهناك خاصيّتين يمكنك استخدامهما لأجل ذلك:
colspan
نستخدمها لدمج الخانات الموجودة على نفس السطر.rowspan
نستخدمها لدمج الخانات الموجودة على أكثر من سطر.
ملاحظة: colspan
و rowspan
يمكن استخدامهما مع الوسم <th>
و الوسم <td>
فقط.
في المثال التالي قمنا بدمج الخانة الأولى و الثانية الموجودتين في السطر الأول.
المثال الأول
<table> <tr> <!-- سيتم عرضها على خانتين وراء بعض 'A' هنا قلنا أن الخانة التي يوجد فيها الحرف --> <td colspan="2">A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> <td>E</td> </tr> </table>
في المثال التالي قمنا بدمج الخانة الثانية في السطر الأول مع الخانة الثانية الموجودة تحتها في السطر الثاني.
المثال الثاني
<table> <tr> <!-- سيتم عرضها على خانتين تحت بعض 'B' هنا قلنا أن الخانة التي يوجد فيها الحرف --> <td>A</td> <td rowspan="2">B</td> <td>C</td> </tr> <tr> <td>D</td> <td>E</td> </tr> </table>
في المثال التالي قمنا بدمج الخانة الثانية و الثالثة في السطر الثاني مع الخانة الثانية و الثالثة الموجودة تحتها في السطر الثالث.
المثال الثالث
<table> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <!-- سيتم عرضها على خانتين في نفس السطر و خانتين تحتهما مباشرةً 'E' هنا قلنا أن الخانة التي يوجد فيها الحرف --> <td>D</td> <td colspan="2" rowspan="2">E</td> </tr> <tr> <td>F</td> </tr> </table>
وضع عنوان خاص للجدول
إذا أردت وضع عنوان خاص للجدول, يمكنك كتابة العنوان بداخل الوسم <caption> </caption>
مع الإشارة إلى أنه يجب وضع هذا الوسم كأول وسم في الجدول.
في المثال التالي قمنا بوضع عنوان للجدول بواسطة الوسم <caption>
.
مثال
<table> <caption>Final semester marks</caption> ... </table>