HTMLالجداول

مفهوم الجدول

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

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

لعرض جدول في الصفحة نستخدم الوسوم التالية:

• <table> </table> هو الوسم الأساسي الذي يجب أن تضعه لإعلام المتصفح أنك تريد عرض البيانات بداخل جدول.
• <tr> </tr> تستخدمه لإضافة سطر في الجدول.
• <th> </th> تستخدمه لإضافة خانة في السطر تمثل عنوان، أي النص الذي تضعه فيها يظهر بخط عريض و في المنتصف.
• <td> </td> تستخدمه لإضافة خانة في السطر تمثل معلومة عادية، أي النص الذي تضعه فيها يظهر كنصر عادي.

في المثال التالي قمنا بإضافة جدول يتألف من 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 يمكنك استخدامها لتحديد طول الجدول بدل جعل المتصفح يفعل ذلك، الرقم الذي تعطيه لها يمثل طول الجدول.

في المثال التالي قمنا بإظهار خطوط الجدول حجمها 1 بيكسل.

<table border="1">
    ...
</table>

في المثال التالي قمنا بجعل عرض الجدول 100% و طوله 150 بيكسل.

<table border="1" width="100%" height="150">
    ...
</table>

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

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

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

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

<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>