الجداول في لغة الترميز HTML5

تعلم كيفية إنشاء جدول table بإستخدام لغة الترميز HTML و HTML5، الجداول البسيطة وحتى الجداول المركبة (المعقدة)، والفرق بين تنسيق الجداول في لغة الترميز HTML و HTML5، ما هي العناصر الأساسية المكونة لـ الجدول في HTML5؟و شرح مبسط للعناصر thead, tbody, tfoot, caption, colgroup, col، وإستخدامات الوصف rowspan, colspan

يستخدم العنصر <table> في لغة الترميز HTML5 لعرض البيانات المجدولة، أو بمعنى آخر لعرض البيانات التي تحتوي على صفوف وأعمدة، في السابق كان العنصر <table> يستخدم في تنسيق صفحات الويب، ولكن مع تطور لغة الـ CSS لم يعد الوضع كذلك.

ماهي الوسوم الأساسية لإنشاء الجدول؟

يتكون الجدول في لغة الترميز HTML5 من العنصر <table> و واحد أو أكثر من العناصر <th> أو <tr> أو <td>. وتعتبر هذه العناصر هي العناصر الأساسية (الإجبارية) لتكوين الجدول.

العنصر <table>: وهو الوسم (العنصر) الأساسي لإنشاء الجدول، ويحتوي بداخله على باقي مكونات الجدول من صفوف وأعمدة وعناويين.

العنصر <tr>: وهو إختصار لكلمة table row أي أنه المكون الأساسي لإنشاء صف (سطر) بداخل الجدول، ويحتوي هذا العنصر بداخله على أي عدد من الخلايا (الأعمدة) داخل الصف في الجدول.

العنصر <th>: وهو إختصار لكلمة table header، ويستخدم لتمييز أي خلية بإعتبارها خلية للعنوان.

العنصر <td>: وهو إختصار لكلمة table data، وهو المكون الأساسي للخلية في الجدول، ويمكن أن يحتوي هذا العنصر على أي عنصر من عناصر لغة الترميز HTML، حيث يمكن أن يحتوي هذا العنصر على صور أو نصوص أو حتى على جدول آخر.

أمثلة:

HTML5

<!-- جدول يحتوي على عنوان -->
<table>
  <th>خلية عنوان</th>
</table>

<!-- جدول يحتوي على صف/سطر -->
<table>
  <tr>محتويات الصف في الجدول</tr>
</table>

<!-- جدول يحتوي على خلية واحدة -->
<table>
  <td>محتويات الخلية</td>
</table>

الأمثلة من الأكواد السابقة تمثل إستخدام الحد الأدنى من العناصر لتكوين جدول في لغة الترميز HTML5، ولكن بطبيعة الحال فإن الجدول يستخدم لعرض بيانات أكثر من ذلك وأيضا يتم إستخدام أكثر من عنصر لتكوين الجدول، فعلى سبيل المثال إذا أردنا أن ننشيء جدول يحتوي على بيانات الطلاب (الإسم، العمر، الدرجات)، في هذا المثال سوف نقوم بإنشاء جدول يحتوي على ثلاثة صفوف وثلاثة أعمدة، وسوف نبدأ الأكواد كالتالي:

HTML5

<table> <!-- العنصر الأساسي للجدول -->
  <tr> <!-- بداية الصف/السطر الأول -->
    <th>الإسم</th> <!-- العنصر المستخدم لعنوان الجدول -->
    <th>العمر</th>
    <th>الدرجات</th>
  </tr>
  <tr> <!-- بداية الصف/السطر الثاني -->
    <td>أحمد</td> <!-- العنصر المستخدم في تكوين الخلية -->
    <td>17</td>
    <td>90</td>
  </tr>
  <tr> <!-- بداية الصف/السطر الثالث -->
    <td>يوسف</td>
    <td>16</td> <!-- خلية -->
    <td>92</td>
  </tr>
</table>

نتيجة الأكواد السابقة، هي عرض الجدول التالي:

تلاحظ من الجدول السابق، أن البيانات الموجودة في (الخلية) العنصر <th> قد تم عرضها بخط ثقيل، بخلاف باقي الخلايا التي توجد داخل العنصر <td>، وتلاحظ أيضا أنه لا توجد أي تنسيقات للجدول، فعلى سبيل المثال لا توجد حدود للجدول ولا توجد مسافات بين خلايا الجدول، في السابق (في لغة الترميز HTML4) كان يتم تخصيص التنسيقات من خلال إضافة وصف للوسم (العنصر) <table> فعلى سبيل المثال كنا نستخدم الوصف border لإضافة حدود للجدول، فكان العنصر يكتب كالتالي <table border="1">، أما في لغة الترميز HTML5 فإننا نستخدم لغة CSS لإضافة أي تنسيقات للجدول، ويمكنك إضافة التنسيقات بإستخدام أي طريقة لإضافة أكواد الـ CSS، والمثال التالي يوضح ذلك

CSS

table {
  width: 80%;
}
th, td {
  border: 1px solid #1565c0;
  padding: 3px;
}

وبعد تطبيق التنسيقات السابقة نحصل على الجدول التالي

قد تختلف طريقة عرض الجدول من المثال السابق، وذلك لأننا نستخدم ملف لإعادة ضبط التنسيقات الإفتراضية للمتصفح، ولتحصل على النتيجة الأساسية بدون أي تعديلات يمكنك إنشاء ملف HTML ونسخ الأكواد السابقة ومشاهدة النتيجة في المتصفح. تلاحظ من التنسيقات السابقة أن كل خلية تظهر بحدود مستقلة عن باقي الخلايا، وحتى تقوم بلصق الخلايا مع بعضها البعض (حتى لا يظهر إزدواج في الحدود بين الخلايا) يمكنك إستخدام الخاصية border-collapse والتي تستخدم مع العنصر <table> وهذه الخاصية يمكن أن تكون قيمتها collapse وذلك للصق الخلايا سوية أو تكون قيمتها separate وذلك لتفريق الخلايا عن بعضها (وهذه هي القيمة الإفتراضية)، وفي حالة إستخدامك للقيمة separate فيمكنك أيضا أن تستخدم الخاصية border-spacing لتحديد مقدار المسافة (الهوامش) بين الخلايا. وبالتالي تصبح أكواد الـ CSS

CSS

table {
  width: 80%;
  border-collapse: collapse; /* ويمكن أن تكون separate */
}
/* أو يمكنك إستخدام الخيار الآخر */
table {
  width: 80%;
  border-collapse: separate;
  border-spacing: 5px;
}

والآن وبعد أن تعلمنا المكونات الأساسية للجدول في لغة الترميز HTML5، سوف نتعرف على بعض العناصر الإضافية التي يمكن أن نستخدمها لإنشاء الجدول

العنصر <caption>

وهو الوسم المستخدم لإضافة عنوان للجدول، حيث في المثال السابق يمكن إضافة الوسم <caption> لوصف محتويات الجدول

HTML5

<table>
  <caption>بيان بدرجات الطلاب للصف الدراسي</caption>
  <tr>...</tr>
  ........
</table>

وبإستخدام الـ CSS يمكنك تنسيق عنوان الجدول بإضافة لون للخلفية أو لون مختلف للحدود أو أي تنسيقات تود أن تميز بها عنوان الجدول، ويمكنك أيضا إستخدام الخاصية caption-side وهي الخاصية المسئولة عن تحديد مكان ظهور العنوان نسبة إلى الجدول ويمكن لهذه الخاصية أن تحمل أي من القيم top أو right أو left أو bottom.

العنصر <thead> و <tbody> و <tfoot>

هذه العناصر لا تؤثر على طريقة عرض الجدول من تلقاء نفسها، أو بمعنى آخر، إستخدام هذه العناصر دون إضافة تنسيقات الـ CSS لا تؤثر على طريقة عرض الجدول، وهنا يتوجب علينا طرح السؤال، لماذا أستخدم هذه العناصر إذا كانت لا تؤثر على طريقة عرض الجدول؟ إجابة هذا السؤال في نقطتين

• حينما تقوم بتصميم صفحة ويب بإستخدام لغة الترميز HTML، فإنك تقوم بالتصميم لعرض محتوى الصفحة للمستخدم أولا، وثانيا تأخذ في الإعتبار إضافة بعض العناصر لتساعد محركات البحث على فهم محتوى الصفحة، ففي المثال السابق للجدول الخاص بالطلاب تجد أن أول صف/سطر في الجدول هو عبارة عن عناويين للأعمدة (الخانات) الخاصة بالجدول، ثم من أول الصف الثاني تبدأ القيم الفعلية لمحتوى الجدول من بيانات، وبالتالي يمكن أن تضيف العنصر <thead> لتعلم محركات البحث أن هذا الصف/السطر هو عبارة عن عناويين للخانات الموجودة بالجدول، ثم بإستخدام العنصر <tbody> تحدد محتويات الجدول الفعلية (البيانات).
• هذه العناصر تحدد كيفية طباعة الجدول، فعلى سبيل المثال أننا نريد طباعة صفحة ويب بها جدول يحتوي على الكثير من البيانات والتي تتطلب تقسيمها على أكثر من صفحة أثناء الطباعة، ففي هذه الحالة إذا إستخدمنا هذه العناصر فسوف يتم طباعة رأس (عناويين الخانات) في كل صفحة، وإذا وجد تذييل (footer) للجدول فإنه أيضا سوف يتم طباعته في كل صفحة، وبالتالي نكون قد سهلنا على مستخدم الجدول العثور على أي بيانات ومعرفة إلى أي خانة تنتمي هذه البيانات.

وبتطبيق هذه العناصر على المثال السابق، تصبح أكواد الجدول كالتالي

HTML5

<style type="text/css">
  table {
    width: 80%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #1565c0;
    padding: 3px;
  }
  th {
    background: #f3f3f3;
  }
  caption {
    padding: 7px;
    background: #fafafa;
    caption-side: top;
  }
</style>
<table>
  <caption>بيان بدرجات الطلاب للصف الدراسي</caption>
  <thead>
    <tr>
      <th>الإسم</th>
      <th>العمر</th>
      <th>الدرجات</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>أحمد</td>
      <td>17</td>
      <td>90</td>
    </tr>
    <tr>
      <td>يوسف</td>
      <td>16</td>
      <td>92</td>
    </tr>
  </tbody>
</table>

ويعرض الجدول كالتالي

العنصر <col> و <colgroup>

وتستخدم هذه العناصر لتطبيق التنسيقات للجدول، وأيضا لمساعدة محركات البحث على فهم تكوين الجدول، فعلى سبيل المثال لتغيير لون الخلفية للعمود (الخانة) الإسم يمكنك إضافتها كالتالي

HTML5

<table>
  <colgroup>
    <col style="background-color: #0ff;">
    <col span="2">
  </colgroup>
  <caption>بيان بدرجات الطلاب للصف الدراسي</caption>
  <thead>
      ..........
</table>

سوف تلاحظ أننا أضفنا العنصر <colgroup> ضمن مكونات الجدول وبداخله أضفنا العنصر <col> وهذا العنصر لا يتم إغلاقه كباقي العناصر (يتكون من وسم للبداية فقط)، ثم من خلال إستخدام الوصف style أضفنا الخاصية background-color ويمكنك هنا تحديد أي خاصية تريد تطبيقها على مستوى هذه الخانة (الصف الرأسي)، وسوف تلاحظ أيضا أننا إستخدمنا الوصف span وهو الوصف الذي يمكنك من خلاله تحديد أي عمود تريد تنسيقه، ففي المثال السابق، الجدول يحتوي على ثلاثة أعمدة، ونحن نريد تغيير الخلفية للعمود الأول وبالتالي قمنا بتحديد العنصر <col> وإستخدمنا معه الوصف style وبعد ذلك إستخدمنا الوصف span مع العنصر الثاني، أما إذا أردنا مثلا تغيير الخلفية للعمود في المنتصف (عمود العمر) فيمكنك إعادة كتابة الكود كالتالي

HTML5

<table>
  <colgroup>
    <col span="1">
    <col style="background-color: #0ff;">
    <col span="1">
  </colgroup>
  <caption>بيان بدرجات الطلاب للصف الدراسي</caption>
  <thead>
      ..........
</table>

وبذلك نكون قد تناولنا كل العناصر التي بواسطتها يمكنك إنشاء أي جدول بسيط أو مركب ويتبقى شيء واحد وأخير حتى تكون قد تعلمت كل شيء عن الجداول في لغة الترميز HTML5

الوصف span و colspan و rowspan

قد تناولنا إستخدام الوصف span في الجزء الخاص بالعنصر <col>، ويتبقى الوصفين colspan و rowspan فوظيفتهم هي دمج خليتين أو أكثر مع بعضهم، فعلى سبيل المثال إذا كان عندنا جدول يتكون من خانتين الإسم و رقم الهاتف، وكما تعلم قد يملك نفس الشخص أكثر من رقم للهاتف، فسوف أستخدم هذه المثال لإنشاء جدول يعرض البيانات بشكل أفقي، وجدول آخر يعرض البيانات بشكل رأسي

HTML5

<style type="text/css">
  table {
    width: 80%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #1565c0;
    padding: 3px;
  }
</style>
<!-- خانات الجدول بشكل رأسي -->
<table>
  <thead>
    <tr>
      <th>الإسم</th>
      <th colspan="2">رقم الهاتف</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>أحمد</td>
      <td>0100000000</td>
      <td>0111111111</td>
    </tr>
  </tbody>
</table>

<hr /> <!-- وسم لطباعة خط فاصل بين الجدولين -->
<!-- خانات الجدول بشكل أفقي -->
<table>
  <tr>
    <th>الإسم</th>
    <td>أحمد</td>
  </tr>
  <tr>
    <th rowspan="2">رقم الهاتف</th>
    <td>0100000000</td>
  </tr>
  <tr>
    <td>0111111111</td>
  </tr>
</table>

بعد تطبيق الأكواد السابقة سوف يتم عرض جدولين الأول يقوم بعرض البيانات بشكل رأسي (العناوين تكون في الصف الأول) والآخر يعرض البيانات بشكل أفقي (البيانات تكون في العمود الأول)

وبذلك نكون قد تعرفنا على مكونات الجداول في لغة الترميز HTML5، وكل ما يلزم لإنشاء جدول سواء كان جدول بسيط أو جدول مركب (يحتوي على العديد من البيانات والتنسيقات).

يمكنك تجربة مولد جداول الـ HTML، وهو عبارة عن برنامج يعمل من خلال موقعنا، لإنشاء الجداول البسيطة، كل ما عليك فعله هو إختيار عدد الصفوف والأعمدة ويقوم البرنامج بإنشاء الأكواد اللازمة لإنشاء الجدول، ويمكنك إستخدامه للتعلم من خلال الأكواد.

وفي النهاية أتمنى أن أكون قد تمكنت من توصيل المعلومة بطريقة بسيطة، ولا تتردد في السؤال عن أي جزء غير مفهوم أو تقديم أي إقتراح أو تعديل على المحتوى من خلال التعليقات.