Atrybut colspan

Atrybut colspan kontroluje scalanie kolumn tabeli HTML. Stosowany do tagów th i td.

Akceptowana wartość: liczba całkowita zaczynając od 1.

Jak używać: dodajemy ten atrybut do dowolnej komórki td lub th. Jeśli, na przykład, ustawimy colspan na wartość 2 - to komórka, której to ustawiliśmy, zajmie dwie kolumny tabeli. Jednak sąsiednie komórki po prawej stronie nie znikną, nasza rozszerzona komórka je wypchnie i tabela się rozpadnie. Aby do tego nie doszło, należy usunąć jedną z komórek po prawej stronie. Spójrz na przykłady dla lepszego zrozumienia.

Przykład . Tabela bez scalania

Spójrzmy na tabelę bez scalania, z którą będziemy pracować dalej:

html<table>
  <tr>
    <td>cell1</td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell5</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell8</td>
    <td>cell9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

Przykład . Rozszerzmy komórkę na dwie kolumny

Spróbujmy rozszerzyć komórkę 1 na dwie kolumny, ustawiając jej atrybut colspan na wartość 2. Spowoduje to wypchnięcie komórek po prawej stronie i tabela się rozpadnie:

html<table>
  <tr>
    <td colspan="2">cell1</td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell5</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell8</td>
    <td>cell9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

Przykład . Rozszerzmy komórkę bez rozpadania tabeli

A teraz spróbujmy naprawić problem z rozpadem tabeli z poprzedniego przykładu, usuwając jedną z komórek po prawej stronie od naszej (to komórka 2 lub 3 - bez różnicy):

html<table>
  <tr>
    <td colspan="2">cell1</td>
    <td>cell2</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell5</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell8</td>
    <td>cell9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

Przykład . Rozszerzmy komórkę na trzy kolumny

Rozszerzmy komórkę 1 na 3 kolumny i ustawmy jej atrybut colspan na wartość 3. Usuńmy przy tym jeszcze jedną komórkę po prawej stronie, aby tabela się nie rozpadła:

html<table>
  <tr>
    <td colspan="3">cell1</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell5</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell8</td>
    <td>cell9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

Przykład . Jednocześnie colspan i rowspan

Spróbujmy połączyć komórki o numerach 4, 5, 7 i 8, korzystając z atrybutów colspan i rowspan (poprzednie scalenia usuniemy z tabeli):

html<table>
  <tr>
    <td colspan="3">cell1</td>
  </tr>
  <tr>
    <td colspan="2" rowspan="2">cell4</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

Zobacz też