Tabulka HTML Colgroup
Prvek <colgroup>
se používá ke stylování konkrétních sloupců tabulky.
Tabulka HTML Colgroup
Pokud chcete upravit styl prvních dvou sloupců tabulky, použijte
prvky
<colgroup>
a .<col>
PO | ÚT | ST | SBÍRAT | PÁ | SAT | SLUNCE |
---|---|---|---|---|---|---|
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 |
Prvek <colgroup>
by měl být použit jako kontejner pro specifikace sloupců.
Každá skupina je specifikována <col>
prvkem.
Atribut span
určuje, kolik sloupců získá styl.
Atribut style
určuje styl, který má sloupcům poskytnout.
Poznámka: Existuje velmi omezený výběr zákonných vlastností CSS pro colgroups .
Příklad
<table>
<colgroup>
<col span="2"
style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Poznámka: Značka <colgroup>
musí být potomkem <table>
prvku a měla by být umístěna před jakékoli jiné prvky tabulky, jako <thead>
jsou ,
<tr>
, <td>
atd., ale za <caption>
prvkem, pokud je přítomen.
Právní vlastnosti CSS
Existuje pouze velmi omezený výběr vlastností CSS, které lze použít v colgroup:
width
vlastnost
visibility
vlastnost
background
vlastnosti
border
vlastnosti
Všechny ostatní vlastnosti CSS nebudou mít na vaše tabulky žádný vliv.
Více Col Elements
Pokud chcete stylovat více sloupců s různými styly, použijte více
<col>
prvků uvnitř
<colgroup>
:
Příklad
<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>
...
Prázdné Colgroups
Pokud chcete stylizovat sloupce uprostřed tabulky, vložte „prázdný“
<col>
prvek (bez stylů) pro sloupce před:
Příklad
<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>
...
Skrýt sloupce
Sloupce můžete skrýt pomocí visibility: collapse
vlastnosti:
Příklad
<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>
...