Łączenie komórek w pionie: rowspan

Tabele - HTML i CSS: pierwsze strony (HTML/CSS/JS)

Atrybut rowspan rozciąga komórkę w dół, na kilka wierszy. Komórka z rowspan="3" zajmuje miejsce w swoim wierszu i w dwóch kolejnych, dlatego w tych dwóch następnych wierszach pomijasz pierwszą komórkę. To najczęstsze źródło błędów: jeśli tabela się rozjeżdża, policz komórki w każdym wierszu, uwzględniając te zajęte przez rowspan z góry.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>rowspan</title>
  <style>
    table {
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid #888;
      padding: 6px 10px;
    }
    th {
      background: #e8e4ff;
    }
    caption {
      font-weight: bold;
      margin-bottom: 6px;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Dział</th>
      <th>Produkt</th>
      <th>Cena</th>
    </tr>
    <tr>
      <th rowspan="3">Owoce</th>
      <td>Jabłka</td>
      <td>4 zł</td>
    </tr>
    <tr>
      <td>Gruszki</td>
      <td>6 zł</td>
    </tr>
    <tr>
      <td>Śliwki</td>
      <td>5 zł</td>
    </tr>
    <tr>
      <th rowspan="2">Warzywa</th>
      <td>Marchew</td>
      <td>3 zł</td>
    </tr>
    <tr>
      <td>Ogórki</td>
      <td>7 zł</td>
    </tr>
  </table>
</body>
</html>

Ładowanie interaktywnego edytora... Jeśli się nie pojawi, włącz JavaScript.

Wszystkie lekcje kursu HTML i CSS: pierwsze strony · Zaloguj się, aby zapisać postęp na koncie.