HTML

HTML Table Nested Elements
العناصر الداخلية لعنصر table في لغة HTML

سوف تتعلم في هذا الدرس العناصر التي تُستخدم داخل tables الجداول في لغة HTML، مثل عنصر caption وعنصر colgroup.

التاريخ

29 يناير 2022

الدروس

48

المستوى

مبتدئ

اللغة

عربي

المشاهدات

1770

المواضيع

12
الشروحات chevron_left HTML Table Nested Elements chevron_left HTML

HTML Table Nested Elements
العناصر الداخلية لعنصر table في لغة HTML

</> HTML table colgroup element
عنصر colgroup داخل عنصر table في لغة HTML

يستخدم عنصر <colgroup> لعمل تنسيقات لأعمدة محدّدة، مثل: عمل ألوان لخلفيات بعض الأعمدة، مع عنصر <col> في لغة HTML.

  • يجب استخدام عنصر <col> بداخل عنصر <colgroup> لتحديد لون الخلفية لهذا العمود.
  • تُستخدم خاصية span مع عنصر <col> لتحدد عدد الأعمدة التي سوف يتم تطبيق التنسيق عليها  <"col span="2>.
  • عن طريق خاصية bgcolor يمكننا تلوين خلفية الأعمدة "bgcolor="yellow.
Table colgroup element

استخدام الخاصية bgcolor والخاصية span مع عنصر <col> وذلك ضمن عنصر <colgroup>، حيث تكون قيم الخاصية bgcolor عبارة عن ألوان، بينما تكون قيم الخاصية span عبارة عن عدد الأعمدة التي سنطبق عليها التنسيق.

<colgroup>
  <col span="3" bgcolor="yellow">
</colgroup>
Table colgroup multi col

استخدام خاصية bgcolor لإضافة لون لخلفية كل عمود في الجدول بشكل منفرد.

<colgroup>
  <col bgcolor="yellow">
  <col bgcolor="blue">
  <col bgcolor="red">
  <col bgcolor="green">
  <col bgcolor="pink">
</colgroup>
Table colgroup skip col

استخدام خاصية bgcolor لتطبيق لون على خلفية كل عمود من الجدول إلا العمود الأخير.

<colgroup>
  <col bgcolor="yellow">
  <col bgcolor="blue">
  <col bgcolor="red">
  <col bgcolor="green">
</colgroup>
ملاحظة
خاصية span غير مدعومة في الإصدار الأخير من لغة HTML الذي هو HTML5.

</> HTML table caption element
عنصر caption داخل عنصر table في لغة HTML

يُستخدم عنصر <caption> لإضافة شرح وتوضيح حول HTML table الجدول.

  • يجب وضع عنصر <caption> مباشرة بعد علامة البداية لعنصر <table>.
  • سوف يتم تلقائياً توسيط النصوص الموجودة داخل عنصر <caption> داخل HTML table.
HTML table caption Element

يجب إضافة عنصر caption داخل الجدول مباشرة بعد علامة البداية لعنصر table.

<caption>Our Users</caption>

</> HTML nested tables
الجداول المتداخلة في لغة HTML

يمكن عمل جداول متداخلة في لغة HTML، -أي جدول بداخل جدول آخر- عن طريق إنشاء جدول جديد داخل أي خلية من خلايا الجدول الرئيسي والأساسي.

HTML nested table

الجداول المُتداخلة في لغة HTML.

<tr>
  <td>Nested Table Data 1</td>
  <td>Nested Table Data 2</td>
  <td>Nested Table Data 3</td>
</tr>
Another elements inside table

يمكن إضافة صور و links روابط أو إي عنصر من عناصر HTML داخل الجدول.

<tr>
      <td>Table Data 1</td>
      <td>
        <a href="#">Table Data 2</a>
      </td>
      <td><img src="https://www.closetag.com/images/photo6.jpg" alt="Natural" width="100"></td>
      <td>Table Data 4</td>
</tr>
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.