Dokumentacja HTML z przykładami: colspan i rowspan

Q: Do czego służy colspan w HTML?

colspan rozciąga lub na kilka kolumn: zajmuje w swoim wierszu miejsce trzech komórek. Ten wiersz potrzebuje wtedy o dwie komórki mniej niż pozostałe.

Q: Do czego służy rowspan w HTML?

rowspan rozciąga komórkę w dół na kilka wierszy: wypełnia swój wiersz i ten poniżej. Następny wiersz musi pominąć tę kolumnę, bo komórka powyżej już ją zajmuje.

Q: Czy komórka może mieć jednocześnie colspan i rowspan?

Tak. zajmuje blok dwóch kolumn na dwa wiersze. Każdy wiersz, przez który przechodzi, potrzebuje o dwie własne komórki mniej.

Q: Jaka jest maksymalna wartość colspan?

Przeglądarki ograniczają colspan do 1000, a rowspan do 65534. W przypadku colspan wartość 0 albo taka, która nie zaczyna się od cyfry, jest traktowana jak 1.

colspan: jedna komórka na kilka kolumn

colspan="n" sprawia, że komórka ma szerokość n kolumn. Jej wiersz ma wtedy o n - 1 komórek mniej. Tutaj suma zajmuje dwie pierwsze kolumny:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>colspan</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; }
    .span { background: #dbeafe; }
  </style>
</head>
<body>
  <table>
    <tr><th>Item</th><th>Qty</th><th>Price</th></tr>
    <tr><td>Pens</td><td>2</td><td>4.00</td></tr>
    <tr><td>Paper</td><td>1</td><td>6.50</td></tr>
    <tr><td class="span" colspan="2">Total</td><td>10.50</td></tr>
  </table>
</body>
</html>

Ostatni wiersz ma dwie komórki, ale pierwsza liczy się za dwie, więc wiersz nadal ma trzy kolumny jak pozostałe.

rowspan: jedna komórka na kilka wierszy

rowspan="n" sprawia, że komórka ma wysokość n wierszy. Wiersze poniżej pomijają tę kolumnę, bo wysoka komórka już ją wypełnia:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>rowspan</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; }
    .span { background: #dcfce7; }
  </style>
</head>
<body>
  <table>
    <tr><th>Team</th><th>Member</th></tr>
    <tr><td class="span" rowspan="3">Design</td><td>Ana</td></tr>
    <tr><td>Bob</td></tr>
    <tr><td>Cy</td></tr>
    <tr><td>Web</td><td>Dee</td></tr>
  </table>
</body>
</html>

Wiersze Boba i Cy mają tylko jedno <td>: kolumnę Team zajmuje już "Design". W HTML nic tego nie oznacza, więc tabelę z rowspan czytaj z góry na dół i licz, które kolumny są wciąż zajęte.

colspan i rowspan razem: plan zajęć

Jedna komórka może się rozciągać w obu kierunkach. Klasyczny przykład to plan zajęć, w którym niektóre lekcje trwają dwa bloki, a inne obejmują dwa dni:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Timetable</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; text-align: center; }
    th, td { border: 1px solid #6b7280; padding: 8px 14px; }
    thead th { background: #e5e7eb; }
    .html { background: #fde68a; }
    .css { background: #bfdbfe; }
    .lab { background: #bbf7d0; }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr><th scope="col">Time</th><th scope="col">Mon</th><th scope="col">Tue</th><th scope="col">Wed</th></tr>
    </thead>
    <tbody>
      <tr><th scope="row">9:00</th><td class="html" rowspan="2">HTML</td><td class="css">CSS</td><td>Free</td></tr>
      <tr><th scope="row">10:00</th><td class="lab" colspan="2" rowspan="2">Lab</td></tr>
      <tr><th scope="row">11:00</th><td>Free</td></tr>
    </tbody>
  </table>
</body>
</html>

Policz wiersz 10:00: nagłówek z godziną, potem Mon zajęty przez HTML z wiersza wyżej, potem Lab wypełniający Tue i Wed. O 11:00 Mon jest znowu wolny, a Lab nadal zajmuje Tue i Wed, więc wiersz ma jedną komórkę z danymi.

Liczenie komórek, żeby tabela się nie rozjechała

Każdy wiersz musi mieć tę samą liczbę kolumn, licząc colspan każdej komórki i kolumny zajęte przez komórki z rowspan z góry. Gdy wiersz ma o jedną komórkę za dużo, przeglądarka dodaje dla niej nową kolumnę i tabela ma poszarpaną krawędź:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Wrong count</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 24px; font-family: system-ui, sans-serif; }
    table { border-collapse: collapse; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; }
    .span { background: #dcfce7; }
    .extra { background: #fee2e2; }
  </style>
</head>
<body>
  <table>
    <caption>Wrong</caption>
    <tr><td class="span" rowspan="2">A</td><td>B</td></tr>
    <tr><td>C</td><td class="extra">D</td></tr>
  </table>
  <table>
    <caption>Right</caption>
    <tr><td class="span" rowspan="2">A</td><td>B</td></tr>
    <tr><td>C</td></tr>
  </table>
</body>
</html>

W błędnej tabeli drugi wiersz zapomina, że A zajmuje jego pierwszą kolumnę, więc D trafia do trzeciej kolumny, której nie ma żaden inny wiersz. Rozwiązanie to usunięcie jednej komórki. Ten sam błąd z colspan to zostawienie wszystkich pierwotnych komórek w wierszu, który ma szeroką komórkę.

Za mało komórek to odwrotny problem: wiersz kończy się za wcześnie i zostawia dziurę na końcu.

Grupowane nagłówki z colspan

Nagłówek może obejmować kolumny, które opisuje, nad wierszem bardziej szczegółowych nagłówków. Oznacz go scope="colgroup", żeby czytniki ekranu przypisały go do wszystkich kolumn pod nim:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Grouped headers</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; text-align: center; }
    thead th { background: #e5e7eb; }
  </style>
</head>
<body>
  <table>
    <colgroup><col></colgroup>
    <colgroup span="2"></colgroup>
    <colgroup span="2"></colgroup>
    <thead>
      <tr>
        <th rowspan="2" scope="col">City</th>
        <th colspan="2" scope="colgroup">January</th>
        <th colspan="2" scope="colgroup">July</th>
      </tr>
      <tr>
        <th scope="col">Low</th><th scope="col">High</th>
        <th scope="col">Low</th><th scope="col">High</th>
      </tr>
    </thead>
    <tbody>
      <tr><th scope="row">Oslo</th><td>-7</td><td>-1</td><td>13</td><td>22</td></tr>
      <tr><th scope="row">Rome</th><td>3</td><td>12</td><td>19</td><td>31</td></tr>
    </tbody>
  </table>
</body>
</html>

"City" obejmuje oba wiersze nagłówka dzięki rowspan="2", a każdy miesiąc obejmuje swoje dwie kolumny dzięki colspan="2". Elementy <colgroup> definiują grupy kolumn, do których odnosi się scope="colgroup". Czytnik ekranu na komórce Rzymu 31 może wtedy powiedzieć "Rome, July, High, 31". Resztę struktury tabeli opisuje strona tabele w HTML.

Scalaj tylko przy prawdziwej strukturze

Scalenia utrudniają czytanie tabeli czytnikiem ekranu oraz jej sortowanie, filtrowanie i kopiowanie do arkusza kalkulacyjnego. Używaj ich tam, gdzie dane naprawdę są pogrupowane (suma, nagłówek nad podkolumnami, zajęcia trwające dwie godziny). Jeśli tabela potrzebuje wielu scaleń, dwie prostsze tabele są często czytelniejsze.

Częste błędy

Pozostawienie zajętych komórek. Komórka z colspan="2" zastępuje dwie komórki; usuń jedną z pierwotnych.
Zapominanie o wierszach pod rowspan. Każdy z nich potrzebuje o jedną komórkę mniej.
Pisanie colspan na <tr>. Działa tylko na <td> i <th>.
Scalenia do układu wizualnego, np. wiersz z banerem w tabeli układającej stronę. Do układu używaj CSS grid.
colspan="100%" w znaczeniu "cała szerokość". Przeglądarka czyta tylko początkowe cyfry, więc ta komórka obejmuje 100 kolumn i dodaje do tabeli puste kolumny. Wartość to całkowita liczba kolumn.

Najczęściej zadawane pytania

Do czego służy colspan w HTML?

colspan rozciąga <td> lub <th> na kilka kolumn: <td colspan="3"> zajmuje w swoim wierszu miejsce trzech komórek. Ten wiersz potrzebuje wtedy o dwie komórki mniej niż pozostałe.

Do czego służy rowspan w HTML?

rowspan rozciąga komórkę w dół na kilka wierszy: <td rowspan="2"> wypełnia swój wiersz i ten poniżej. Następny wiersz musi pominąć tę kolumnę, bo komórka powyżej już ją zajmuje.

Czy komórka może mieć jednocześnie colspan i rowspan?

Tak. <td colspan="2" rowspan="2"> zajmuje blok dwóch kolumn na dwa wiersze. Każdy wiersz, przez który przechodzi, potrzebuje o dwie własne komórki mniej.

Dlaczego z mojej tabeli wystaje dodatkowa komórka?

Po uwzględnieniu scaleń jakiś wiersz ma więcej komórek niż pozostałe. Zwykle wiersz pod rowspan nadal zawiera komórkę dla zajętej kolumny albo wiersz z colspan zachował wszystkie pierwotne komórki. Usuń nadmiarowe <td>.

Jaka jest maksymalna wartość colspan?

Przeglądarki ograniczają colspan do 1000, a rowspan do 65534. W przypadku colspan wartość 0 albo taka, która nie zaczyna się od cyfry, jest traktowana jak 1.

Powiązane zagadnienia