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

HTMLالجداول

  • مفهوم الجدول
  • إضافة جدول في الصفحة
  • خصائص الجدول
  • دمج خانات الجدول
  • وضع عنوان خاص للجدول

مفهوم الجدول

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

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

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

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

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

إبتداءاً من الإصدار الخامس في HTML لم نعد نستخدم هذه الخصائص لأننا أصبحنا نعدّل تصاميم الجداول بواسطة CSS فهي توفر الكثير من الخصائص التي يمكننا استخدامها لأجل ذلك.

في هذا الدرس سنستخدم هذه الخصائص فقط ليكون الشرح أكثر وضوحاً. فعلياً، سنضيف الخاصية border="1" في جميع الأمثلة التي نضعها حتى تظهر خطوط الجدوال مما سيساعدك على فهم الأمثلة بشكل أدق.


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