<colgroup> و<col> يتيحان تطبيق تنسيق على أعمدة كاملة بدلاً من كل خلية على حدة:
• <colgroup>: مجموعة من الأعمدة — يحتوي عناصر <col> • <col>: عمود واحد أو أكثر — عنصر فارغ
خصائص col: • span: عدد الأعمدة التي يمثلها هذا col • style: تنسيق CSS مباشر • class: لتطبيق CSS خارجي
يجب وضعهم مباشرةً بعد <caption> وقبل <thead>.
التنسيقات المقبولة في col (محدودة جداً بسبب CSS): - background-color - border - visibility - width
| 1 | <table> |
| 2 | <colgroup> |
| 3 | <!-- العمود الأول بعرض 200px --> |
| 4 | <col style="width: 200px;"> |
| 5 | <!-- عمودان بخلفية صفراء --> |
| 6 | <col span="2" style="background-color: #fffacd;"> |
| 7 | <!-- العمود الأخير بخلفية مختلفة --> |
| 8 | <col style="background-color: #d4edda;"> |
| 9 | </colgroup> |
| 10 | |
| 11 | <thead> |
| 12 | <tr> |
| 13 | <th>الاسم</th> |
| 14 | <th>HTML</th> |
| 15 | <th>CSS</th> |
| 16 | <th>الإجمالي</th> |
| 17 | </tr> |
| 18 | </thead> |
| 19 | <tbody> |
| 20 | <tr> |
| 21 | <td>أحمد</td> |
| 22 | <td>90</td> |
| 23 | <td>85</td> |
| 24 | <td>175</td> |
| 25 | </tr> |
| 26 | </tbody> |
| 27 | </table> |
مثال 1: جدول مع تنسيق أعمدة
| 1 | <style> |
| 2 | .col-name { width: 150px; font-weight: bold; } |
| 3 | .col-number { width: 100px; text-align: center; } |
| 4 | .col-total { background-color: #e8f5e9; width: 120px; } |
| 5 | </style> |
| 6 | |
| 7 | <table> |
| 8 | <colgroup> |
| 9 | <col class="col-name"> |
| 10 | <col class="col-number" span="3"> |
| 11 | <col class="col-total"> |
| 12 | </colgroup> |
| 13 | <thead> |
| 14 | <tr> |
| 15 | <th>الطالب</th> |
| 16 | <th>رياضيات</th> |
| 17 | <th>علوم</th> |
| 18 | <th>لغة</th> |
| 19 | <th>المجموع</th> |
| 20 | </tr> |
| 21 | </thead> |
| 22 | <tbody> |
| 23 | <tr> |
| 24 | <td>محمد أحمد</td> |
| 25 | <td>88</td> |
| 26 | <td>92</td> |
| 27 | <td>79</td> |
| 28 | <td>259</td> |
| 29 | </tr> |
| 30 | </tbody> |
| 31 | </table> |