Kurs HTML

Strukturalne i stylistyczne grupowanie kolumn

Podobnie jak wiersze można grupować za pomocą <thead>, <tbody> i <tfoot>, HTML pozwala również na grupowanie kolumn tabeli. Służą do tego znaczniki <colgroup> i <col>.

Głównym celem grupowania kolumn jest możliwość zdefiniowania wspólnych atrybutów lub stylów dla jednej lub więcej kolumn bez konieczności dodawania ich do każdej komórki w tych kolumnach. Upraszcza to kod i ułatwia zarządzanie stylami.

Znacznik <colgroup>

• Znacznik <colgroup> służy do grupowania jednej lub więcej kolumn w tabeli w celu ich formatowania.
• Musi być umieszczony wewnątrz znacznika <table>, po znaczniku <caption> (jeśli istnieje), a przed znacznikami <thead>, <tbody>, <tfoot> i <tr>.
• Może zawierać jeden lub więcej znaczników <col> lub może sam definiować właściwości dla grupy kolumn za pomocą atrybutu span.

Znacznik <col>

• Znacznik <col> (od "column") jest znacznikiem pustym i służy do definiowania właściwości dla jednej lub więcej kolumn w obrębie <colgroup>.
• Najczęściej używany jest do stosowania stylów CSS (np. szerokości, tła) do całych kolumn.
• Może posiadać atrybut span, który określa, ilu kolejnych kolumn dotyczy dany znacznik <col>. Domyślnie span="1".

Sposoby użycia <colgroup> i <col>

1. Użycie <colgroup> z atrybutem `span` (bez <col>)

Można zdefiniować style dla grupy kolumn bezpośrednio w <colgroup>, używając atrybutu span do określenia liczby kolumn w grupie.

<table class="basic-table">
  <caption>Stylizacja za pomocą colgroup</caption>
  <colgroup span="2" style="background-color: #f0f8ff;"></colgroup> <!-- Pierwsze dwie kolumny -->
  <colgroup style="background-color: #fff0f5;"></colgroup> <!-- Trzecia kolumna -->
  <thead>
    <tr><th>A</th><th>B</th><th>C</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>4</td><td>5</td><td>6</td></tr>
  </tbody>
</table>Kopiuj

W tym przykładzie pierwszy <colgroup> z span="2" stosuje tło do pierwszych dwóch kolumn, a drugi <colgroup> (domyślnie span="1") stosuje inne tło do trzeciej kolumny.

2. Użycie <colgroup> zawierającego znaczniki <col>

Jest to bardziej elastyczne podejście, pozwalające definiować style lub atrybuty dla poszczególnych kolumn lub mniejszych grup kolumn wewnątrz <colgroup>.

<table class="basic-table">
  <caption>Stylizacja za pomocą col</caption>
  <colgroup>
    <col style="background-color: #f0f8ff; width: 100px;"> <!-- Pierwsza kolumna -->
    <col span="2" style="background-color: #fff0f5;"> <!-- Druga i trzecia kolumna -->
  </colgroup>
  <thead>
    <tr><th>Produkt</th><th>Cena Netto</th><th>Cena Brutto</th></tr>
  </thead>
  <tbody>
    <tr><td>A</td><td>100</td><td>123</td></tr>
    <tr><td>B</td><td>200</td><td>246</td></tr>
  </tbody>
</table>Kopiuj

Tutaj pierwszy <col> definiuje styl i szerokość dla pierwszej kolumny, a drugi <col> z span="2" definiuje styl dla drugiej i trzeciej kolumny.

Jakie style można stosować?

Znaczniki <colgroup> i <col> pozwalają na efektywne stosowanie tylko ograniczonego zestawu właściwości CSS do kolumn. Najważniejsze z nich to:

• width: Szerokość kolumny.
• background-color (i inne właściwości tła): Tło kolumny.
• border: Obramowanie kolumny (działa w niektórych trybach border-collapse).
• visibility: Widoczność kolumny.

Inne właściwości CSS, takie jak color, font-weight, text-align, nie mogą być stosowane bezpośrednio do <col> lub <colgroup>. Aby je zastosować do komórek w danej kolumnie, należy użyć bardziej zaawansowanych selektorów CSS (np. selektora N-tej kolumny) lub nadać klasy komórkom w tej kolumnie.

<colgroup> a dostępność (scope="colgroup")

Znacznik <colgroup> może być również używany w kontekście dostępności. Jeśli nagłówek <th> opisuje całą grupę kolumn zdefiniowaną przez <colgroup>, można użyć scope="colgroup" w tym nagłówku.

<table class="basic-table">
  <colgroup span="2"></colgroup>
  <colgroup span="2"></colgroup>
  <thead>
    <tr>
      <th colspan="2" scope="colgroup">Dane Osobowe</th>
      <th colspan="2" scope="colgroup">Dane Kontaktowe</th>
    </tr>
    <tr>
      <th scope="col">Imię</th><th scope="col">Nazwisko</th>
      <th scope="col">Email</th><th scope="col">Telefon</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jan</td><td>Kowalski</td>
      <td>j.k@example.com</td><td>123-456-789</td>
    </tr>
  </tbody>
</table>Kopiuj

Zadanie praktyczne (z rozwiązaniem)

Zadanie: Stwórz tabelę 3x3. Użyj <colgroup> i <col>, aby nadać pierwszej kolumnie tło jasnoniebieskie, a pozostałym dwóm kolumnom tło jasnozielone. Ustaw szerokość pierwszej kolumny na 150px.

Rozwiązanie:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Grupowanie Kolumn - Zadanie</title>
    <style>
        table, th, td {
            border: 1px solid #ccc;
            border-collapse: collapse;
            padding: 8px;
            text-align: center;
        }
        caption {
            margin-bottom: 10px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Tabela z grupowaniem kolumn</h1>
    <table>
        <caption>Przykład stylizacji kolumn</caption>
        <colgroup>
            <col style="background-color: lightblue; width: 150px;"> <!-- Pierwsza kolumna -->
            <col span="2" style="background-color: lightgreen;"> <!-- Druga i trzecia kolumna -->
        </colgroup>
        <thead>
            <tr>
                <th>Kolumna 1</th>
                <th>Kolumna 2</th>
                <th>Kolumna 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>A1</td><td>A2</td><td>A3</td>
            </tr>
            <tr>
                <td>B1</td><td>B2</td><td>B3</td>
            </tr>
            <tr>
                <td>C1</td><td>C2</td><td>C3</td>
            </tr>
        </tbody>
    </table>
</body>
</html>Kopiuj