HTML | الجدول

الجدول

الجدول أو Table هو مجموعة من الاعمدة المنتظمة تسمح لك بتنظيم البيانات والمعلومات في مقالك أو موقعك على الويب.

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

HTML

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

الاوسمة المستخدمة لبناء الجدول كما تريده، سوف أقوم بتعريفها لك كي تعرف كيف تستخدمها:

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

إفتح أحد برامج أكواد HTML أو مشاركة جديدة في الموقع الخاص بك وجرب الكود لتعرف كيفية ظهوره كي تفهم

خصائص الجدول

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

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

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

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

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

في المثال التالي قمنا بإظهار خطوط الجدول حجمها 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>

جرب الكود