❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing
❯
الدرس التالي❯ ❮الدرس السابق

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>
<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>
<table border="1"> ... </table>

جرب الكود



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

المثال الثاني

<table border="1" width="100%" height="150">
...
</table>
<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> <!-- سيتم عرضها على خانتين وراء بعض '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> <!-- سيتم عرضها على خانتين تحت بعض '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>
<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>
<table> <caption>Final semester marks</caption> ... </table>

جرب الكود

الدرس التالي❯ ❮الدرس السابق