انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 21
دورة لغة HTML

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

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

ابدأ التعلّم استكشف الأمثلة
THE BUILDING BLOCKS OF THE WEBHTML
index.html
1<h1>Hello, web.</h1>
وسم الفتحالمحتوىوسم الإغلاق
النتيجة في المتصفح Hello, web.
كل صفحة رائعة تبدأ بعنصر.
أقسام الدرس
3
الأمثلة
6
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
4,169
محتوى الدرس
في هذا الدرس 3تصفّح المواضيع

The Element Colgroup Within the Table Element in HTML عنصر Colgroup داخل عنصر Table في HTML

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


  • يوضع col داخل colgroup لوصف عمود أو أكثر. ويمكن بدلًا من أبناء col استعمال span على colgroup نفسه لوصف مجموعة أعمدة.

  • تُستخدم خاصية span مع عنصر <col> لتحديد عدد الأعمدة التي سيتم تطبيق التنسيق عليها، مثل: ⁦<col span="2">⁩.

  • لتلوين خلفية الأعمدة استخدم CSS، مثل ⁦style="background-color:yellow"⁩. كانت bgcolor مستخدمة في شفرة قديمة.
عنصر Colgroup داخل عنصر Table في HTML

Table Colgroup Element

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

HTML 
<colgroup>
  <col span="3" style="background-color:yellow">
</colgroup>
جرّب بنفسك
جرّب بنفسك

Using <colgroup> to Apply Different Colors to Table Columns

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

Using colgroup to Apply Different Colors to Table Columns

HTML 
<colgroup>
  <col style="background-color:yellow">
  <col style="background-color:lightblue">
  <col style="background-color:red">
  <col style="background-color:palegreen">
  <col style="background-color:pink">
</colgroup>
جرّب بنفسك
جرّب بنفسك

Customizing Specific Column Colors in a Table with colgroup

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

HTML 
<colgroup>
  <col style="background-color:yellow">
  <col style="background-color:lightblue">
  <col style="background-color:red">
  <col style="background-color:palegreen">
</colgroup>
جرّب بنفسك
جرّب بنفسك

The Element Caption Within the Table Element in HTML عنصر Caption داخل عنصر Table في HTML

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

  • يجب وضع عنصر <caption> مباشرة بعد علامة الفتح لعنصر <table>.

  • يظهر نص caption في الوسط افتراضيًا، ويمكن تغيير محاذاته وموضعه باستخدام CSS.
جرّب بنفسك

Incorporating the Caption Element in HTML Tables

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

HTML 
<caption>Our Users</caption>
جرّب بنفسك

Nested Tables in HTML الجداول المتداخلة في HTML

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

HTML Table Row With Multiple Data Cells

صف جدول بلغة HTML يحتوي على ثلاث خلايا بيانات.

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

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

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>
جرّب بنفسك
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…