<colgroup> și <col> în HTML

<colgroup>
  <col>
  <col span="2" class="preturi">
</colgroup>

Ce face <colgroup> și <col>

<colgroup> grupează una sau mai multe coloane, iar <col> reprezintă o coloană (sau mai multe, cu atributul span). <col> este un element gol, fără tag de închidere.

<colgroup> stă după <caption> (dacă există) și înainte de <thead>, <tbody> sau primul <tr>. Coloanele se numără de la stânga la dreapta.

Pe coloane funcționează doar câteva proprietăți CSS: background, width, border (doar cu border-collapse: collapse pe tabel) și visibility: collapse. Proprietăți ca color, text-align, padding sau font-weight nu au efect pe <col>; pentru ele stilizezi celulele.

Atribute

Atribut	Descriere
span	Pe <col> sau pe un <colgroup> fără copii: câte coloane consecutive acoperă (implicit 1).
class	Clasă CSS pentru coloana sau grupul de coloane.

Exemple

Exemplul 1: Evidențierea coloanelor de preț

Primul <col> acoperă coloana Produs, al doilea (cu span="2") cele două coloane de preț.

<style>
  .preturi { background: #fef3c7; }
</style>
<table>
  <colgroup>
    <col>
    <col span="2" class="preturi">
  </colgroup>
  <tr><th>Produs</th><th>Preț vechi</th><th>Preț nou</th></tr>
  <tr><td>Căști</td><td>199 lei</td><td>149 lei</td></tr>
  <tr><td>Mouse</td><td>89 lei</td><td>69 lei</td></tr>
</table>

Ce afișează browserul

Produs | Preț vechi | Preț nou
Căști  | 199 lei    | 149 lei
Mouse  | 89 lei     | 69 lei
(coloanele „Preț vechi” și „Preț nou” au fundal galben deschis)

Exemplul 2: Lățimi fixe pentru coloane

Cu table-layout: fixed, lățimile din <col> sunt respectate exact.

<style>
  table { table-layout: fixed; width: 400px; border-collapse: collapse; }
</style>
<table>
  <colgroup>
    <col style="width: 60%">
    <col style="width: 20%; border-left: 2px solid #333">
    <col style="width: 20%">
  </colgroup>
  <tr><th>Elev</th><th>Nota</th><th>Absențe</th></tr>
  <tr><td>Ana Popescu</td><td>10</td><td>2</td></tr>
</table>

Ce afișează browserul

Elev (240px)     ┃ Nota (80px) | Absențe (80px)
Ana Popescu      ┃ 10          | 2
(bordură groasă la stânga coloanei Nota)

Greșeli frecvente

• Încercarea de a alinia textul sau de a-l colora prin <col> (text-align, color): nu funcționează; aplică stilul pe celule, de exemplu cu td:nth-child(2).
• Așezarea lui <colgroup> după <thead> sau după rânduri: trebuie să fie înaintea lor (doar <caption> poate sta înainte).
• Folosirea simultană a lui span pe <colgroup> și a copiilor <col>: dacă grupul are copii, atributul span al grupului nu este permis.

Comenzi înrudite

• <table>: Containerul principal pentru afișarea datelor tabelare structurate pe rânduri și coloane.
• <caption>: Dă un titlu vizibil unui tabel; cititoarele de ecran îl anunță înainte de date, ca utilizatorul să știe ce conține tabelul.
• <th>: Celulă de antet într-un tabel: textul este afișat implicit îngroșat și centrat.
• <td>: Celulă standard de date (table data) într-un tabel HTML.