Lekcja 11: Więcej na temat tabel

Tytuł "Więcej na temat tabel" może brzmieć trochę nudno. Ale popatrz na pozytywną stronę, kiedy opanujesz tabele, nie będzie już nic dotyczącego HTML czego nie będziesz potrafił zrozumieć.

Co więc zostało?

Dwa atrybuty colspan i rowspan są używane kiedy chcesz stworzyć zaawansowane tabele.

Colspan jest skrótem od "column span" (rozciągnięcie kolumny). Colspan jest używany w znaczniku <td> do określania na ile kolumn ma się rozciągnąć komórka:

Przykład 1:

<table border="1">
  <tr>
    <td colspan="3">Komórka 1</td>
  </tr>
  <tr>
    <td>Komórka 2</td>
    <td>Komórka 3</td>
    <td>Komórka 4</td>
  </tr>
</table>

Będzie tak wyglądał w przeglądarce:

Poprzez ustawienie colspan na "3", komórka w pierwszym wierszu rozciągnie się na trzy kolumny. Jeżeli zamiast tego ustawili byśmy colspan na "2", komórka rozciągnęła by się tylko na dwie kolumny i było by konieczne umieszczenie dodatkowej komórki w pierwszym wierszu tak by liczba kolumn była jednakowa w obu wierszach.

Przykład 2:

<table border="1">
  <tr>
    <td colspan="2">Komórka 1</td>
    <td>Komórka 2</td>
  </tr>
  <tr>
    <td>Komórka 3</td>
    <td>Komórka 4</td>
    <td>Komórka 5</td>
  </tr>
</table>

Będzie tak wyglądał w przeglądarce:

Co z rowspan?

Jak już pewnie zgadłeś, rowspan określa na ile wierszy ma zostać komórka rozciągnięta:

Przykład 3:

<table border="1">
  <tr>
    <td rowspan="3">Komórka 1</td>
    <td>Komórka 2</td>
  </tr>
  <tr>
    <td>Komórka 3</td>
  </tr>
  <tr>
    <td>Komórka 4</td>
  </tr>
</table>

Będzie tak wyglądał w przeglądarce:

W powyższym przykładzie rowspan jest ustawiony na "3" w komórce Komórka 1. To określa nachodzenie komórki na 3 wiersze (własny wiersz plus dodatkowe dwa). Komórka 1 oraz Komórka 2 są więc w jednym wierszu, podczas gdy Komórka 3 i Komórka 4 formują dwa niezależne wiersze.

Zdziwiony? Więc, nie jest to zbyt skomplikowane i trudne do analizy. Może łatwiej będzie ci zrozumieć to jak narysujesz sobie tabelę na kartce papieru zanim zaczniesz tworzyć ją w HTMLu.

Nie zdziwiony? Więc podążaj dalej i spróbuj samemu zrobić parę tabel wykorzystując atrybuty colspan oraz rowspa.