شرح اداة SOLMAP واستغلالINJ ECTION

 الجداول في لغة HTMLوكيف يتم انشائها

مفهوم الجدول

الجدول ( Table ) يسمح لك بعرض المعلومات بشكل مرتب و مقسم لأعمدة و أسطر.
في هذا الدرس ستتعلم كيف تنشئ جدول, كيف تضيف فيه أسطر, كيف تضيف فيه أعمدة و كيف تدمج الأعمدة و الأسطر مع بعضها.

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

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

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

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

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

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

معلومة تقنية

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

بالتأكيد CSS توفر لك إمكانيات هائلة لتصميم الجدول و لكن بما أننا ندرس و نركز على ما توفره لنا لغة HTML فقط, سنتطرق للخصائص التي توفرها لنا هي فقط.

في المثال التالي قمنا بإضافة جدول يتألف من 4 أسطر و كل سطر فيه 3 خانات.

مثال

• <table>
• <tr>
• <th>ID</th>
• <th>Name</th>
• <th>Mark</th>
• </tr>
• <tr>
• <td>1</td>
• <td> TAHNOON Mhamad </td>
• <td>A</td>
• </tr>
• <tr>
• <td>2</td>
• <td>Rima MILY</td>
• <td>C</td>
• </tr>
• <tr>
• <td>3</td>
• <td>Youssef NOON </td>
• <td>B</td>
• </tr>
• </table>

خصائص الجدول

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

• border يمكنك استخدامها لإظهار خطوط الجدول, الرقم الذي نعطيه لها يمثل حجم الخطوط التي سيتم وضعها بين الأسطر و الأعمدة.

• width يمكنك استخدامها لتحديد عرض الجدول بنفسك بدل جعل المتصفح يفعل ذلك, الرقم الذي نعطيه لها يمثل عرض الجدول.

• height يمكنك استخدامها لتحديد طول الجدول بنفسك بدل جعل المتصفح يفعل ذلك, الرقم الذي نعطيه لها يمثل طول الجدول.

سنضيف الخاصية border="1" في جميع الأمثلة التي نضعها حتى تظهر خطوط الجدول.

دمج خانات الجدول

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

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

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

ملاحظة: colspan و rowspan يمكن استخدامهما مع الوسم <th> و الوسم <td> فقط.

في المثال التالي قمنا بدمج الخانة الأولى و الثانية الموجودتين في السطر الأول.

المثال الأول

• <table>
• <tr>
• <td colspan="2">A</td>
• <td>B</td>
• </tr>
• <tr>
• <td>C</td>
• <td>D</td>
• <td>E</td>
• </tr>
• </table>/table>
  

وضع عنوان خاص للجدول

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

في المثال التالي قمنا بوضع عنوان للجدول بواسطة الوسم <caption>.

مثال

• <table>
• <caption>M.S tahnoon </caption>
• ...
• </table>