يجب استخدام عنصر <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>

جربها بنفسك

معلومات تهمك

لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.

عدد المشاركات

التالى

CLOSETAG

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

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

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

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