Łączenie komórek w poziomie: colspan

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

Atrybut colspan rozciąga komórkę na kilka kolumn. Komórka z colspan="2" zajmuje miejsce dwóch, więc w tym wierszu piszesz o jedną komórkę mniej. Policz zawsze kolumny: tutaj każdy wiersz ma razem trzy kolumny. Łączenie komórek to jedno z najczęstszych poleceń na egzaminie INF.03, więc dobrze je przećwicz, zmieniając liczby w colspan.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>colspan</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 colspan="3">Dane kontaktowe</th>
    </tr>
    <tr>
      <th>Imię</th>
      <th>Nazwisko</th>
      <th>Telefon</th>
    </tr>
    <tr>
      <td>Jan</td>
      <td>Kowalski</td>
      <td>123 456 789</td>
    </tr>
    <tr>
      <td colspan="2">Brak drugiej osoby</td>
      <td>-</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.