جدول HTML Colgroup
يتم <colgroup>
استخدام العنصر لتصميم أعمدة معينة في الجدول.
جدول HTML Colgroup
إذا كنت تريد تصميم العمودين الأولين من الجدول ، فاستخدم العناصر <colgroup>
و <col>
.
MON | الثلاثاء | تزوج | تجميع | جمهورية مقدونيا | جلس | الشمس |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
يجب <colgroup>
استخدام العنصر كحاوية لمواصفات العمود.
يتم تحديد كل مجموعة <col>
بعنصر.
تحدد السمة span
عدد الأعمدة التي تحصل على النمط.
تحدد السمة style
نمط إعطاء الأعمدة.
ملاحظة: هناك مجموعة محدودة للغاية من خصائص CSS القانونية لمجموعات colgroups .
مثال
<table>
<colgroup>
<col span="2"
style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
ملاحظة: يجب <colgroup>
أن تكون العلامة <table>
عنصرًا فرعيًا ويجب وضعها قبل أي عناصر جدول أخرى ، مثل <thead>
،
وما إلى ذلك <tr>
، <td>
ولكن بعد <caption>
العنصر ، إذا كان موجودًا.
خصائص CSS القانونية
لا يوجد سوى مجموعة محدودة جدًا من خصائص CSS المسموح باستخدامها في مجموعة colgroup:
width
خصائص الملكية خصائص
visibility
الممتلكات
background
border
لن يكون لجميع خصائص CSS الأخرى أي تأثير على جداولك.
عناصر العمود المتعددة
إذا كنت تريد تصميم المزيد من الأعمدة بأنماط مختلفة ، فاستخدم المزيد من
<col>
العناصر داخل
<colgroup>
:
مثال
<table>
<colgroup>
<col span="2"
style="background-color: #D6EEEE">
<col span="3"
style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
مجموعات Colgroups فارغة
إذا كنت تريد نمط الأعمدة في منتصف الجدول ، فقم بإدراج عنصر "فارغ"
<col>
(بدون أنماط) للأعمدة قبل:
مثال
<table>
<colgroup>
<col span="3">
<col
span="2"
style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
إخفاء الأعمدة
يمكنك إخفاء الأعمدة مع visibility: collapse
الخاصية:
مثال
<table>
<colgroup>
<col span="2">
<col span="3"
style="visibility: collapse">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...