Elementul colgroup în tabele HTML

Colgroup Tabel HTML

Elementul <colgroup> stilizează coloane specifice ale unui tabel. Este un container pentru specificațiile coloanelor, iar fiecare grup este setat cu un element <col>. Pe un <col>, atributul span spune câte coloane să stilizeze, iar atributul style dă stilul.

Notă: Doar un set foarte limitat de proprietăți CSS funcționează pe colgroup-uri. <colgroup> trebuie să fie un copil al <table> și să vină înainte de orice rânduri sau celule, dar după un <caption> dacă există unul.

Exemplu

Primele două coloane ale unui calendar stilizate cu un colgroup.

Un tabel calendaristic (antete de la LUN la DUM, patru săptămâni de date) unde primele două coloane sunt stilizate cu un fundal albastru deschis folosind un colgroup ce conține un col cu span=2.

> Rezultat: pagină HTML completă

Prompt

Un tabel calendaristic (antete de la LUN la DUM, patru săptămâni de date) unde primele două coloane sunt stilizate cu un fundal albastru deschis folosind un colgroup ce conține un col cu span=2.

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colgroup Basic</title>
</head>
<body>

<table>
  <colgroup>
    <col span="2" style="background-color: #D6EEEE">
  </colgroup>
  <tr>
    <th>LUN</th>
    <th>MAR</th>
    <th>MIE</th>
    <th>JOI</th>
    <th>VIN</th>
    <th>SÂM</th>
    <th>DUM</th>
  </tr>
  <tr>
    <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
  </tr>
  <tr>
    <td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td>
  </tr>
  <tr>
    <td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td>
  </tr>
  <tr>
    <td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td>
  </tr>
</table>

</body>
</html>

Proprietăți CSS Permise

Doar câteva proprietăți CSS sunt permise pe un colgroup: proprietatea width, proprietatea visibility, proprietățile de fundal și proprietățile de chenar. Toate celelalte proprietăți CSS nu au niciun efect asupra tabelului.

Elemente Col Multiple

Pentru a stiliza mai multe coloane diferit, folosiți mai mult de un element <col> în interiorul <colgroup>.

Exemplu

Două grupuri de coloane cu culori de fundal diferite.

Un tabel calendaristic în care primele două coloane sunt albastru deschis, iar următoarele trei sunt roz, folosind un colgroup cu două elemente col (span=2 și span=3) cu culori de fundal diferite.

> Rezultat: pagină HTML completă

Prompt

Un tabel calendaristic în care primele două coloane sunt albastru deschis, iar următoarele trei sunt roz, folosind un colgroup cu două elemente col (span=2 și span=3) cu culori de fundal diferite.

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colgroup Multiple</title>
</head>
<body>

<table>
  <colgroup>
    <col span="2" style="background-color: #D6EEEE">
    <col span="3" style="background-color: pink">
  </colgroup>
  <tr>
    <th>LUN</th>
    <th>MAR</th>
    <th>MIE</th>
    <th>JOI</th>
    <th>VIN</th>
    <th>SÂM</th>
    <th>DUM</th>
  </tr>
  <tr>
    <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
  </tr>
  <tr>
    <td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td>
  </tr>
  <tr>
    <td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td>
  </tr>
  <tr>
    <td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td>
  </tr>
</table>

</body>
</html>

Colgroup-uri Goale

Pentru a stiliza coloane din mijlocul unui tabel, adăugați un element <col> gol (fără stil) pentru coloanele dinaintea lor.

Exemplu

Un col gol folosit pentru a sări peste primele coloane înainte de a le stiliza pe cele ulterioare.

Un tabel calendaristic unde coloanele din mijloc sunt stilizate adăugând mai întâi un col gol cu span=3 (fără stil), apoi un col cu span=2 și un fundal roz.

> Rezultat: pagină HTML completă

Prompt

Un tabel calendaristic unde coloanele din mijloc sunt stilizate adăugând mai întâi un col gol cu span=3 (fără stil), apoi un col cu span=2 și un fundal roz.

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colgroup Empty</title>
</head>
<body>

<table>
  <colgroup>
    <col span="3">
    <col span="2" style="background-color: pink">
  </colgroup>
  <tr>
    <th>LUN</th>
    <th>MAR</th>
    <th>MIE</th>
    <th>JOI</th>
    <th>VIN</th>
    <th>SÂM</th>
    <th>DUM</th>
  </tr>
  <tr>
    <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
  </tr>
  <tr>
    <td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td>
  </tr>
  <tr>
    <td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td>
  </tr>
  <tr>
    <td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td>
  </tr>
</table>

</body>
</html>

Ascunderea Coloanelor

Puteți ascunde coloane cu proprietatea visibility: collapse pe un <col>.

Exemplu

Ultimele trei coloane ascunse cu visibility: collapse.

Un tabel calendaristic unde ultimele trei coloane sunt ascunse folosind un col cu span=3 și visibility: collapse, după un col cu span=2.

> Rezultat: pagină HTML completă

Prompt

Un tabel calendaristic unde ultimele trei coloane sunt ascunse folosind un col cu span=3 și visibility: collapse, după un col cu span=2.

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colgroup Hide</title>
</head>
<body>

<table>
  <colgroup>
    <col span="2">
    <col span="3" style="visibility: collapse">
  </colgroup>
  <tr>
    <th>LUN</th>
    <th>MAR</th>
    <th>MIE</th>
    <th>JOI</th>
    <th>VIN</th>
    <th>SÂM</th>
    <th>DUM</th>
  </tr>
  <tr>
    <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
  </tr>
  <tr>
    <td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td>
  </tr>
  <tr>
    <td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td>
  </tr>
  <tr>
    <td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td>
  </tr>
</table>

</body>
</html>