Lekcje >> Podstawy HTML 5
Polimax

Drukarnia w Warszawie realizująca druk wizytówek, plakatów jak również fotoksiążki, fotoobrazy i fotokalendarze - z wysyłką na terenie całego kraju.

Scalanie komórek tabeli

Scalanie komórek, to nic innego jak łączenie kilku komórek w jedną. Wytłumaczę to na na podstawie rysunku.

Scalanie komórek tabeli
Rysunek 2_5_1_3. Scalanie komórek tabeli

W tabeli po prawej, scalono komórki zaznaczone kolorem zielonym. Jak tego dokonać? Sprawa jest bardzo prosta. Wystarczy znajmość dwóch atrybutów:

  • colspan="x", gdzie x "mówi" ile scalić kolumn, mówiąc inaczej - ile scalić komórek w poziomie, licząc od danej komórki,
  • rowspan="y", gdzie y "mówi" ile scalić wierszy, mówiąc inaczej - ile scalić komórek w pionie, licząc od danej komórki.

Jeżeli chcemy jakiś zakres komórek scalić, to najpierw musimy się "ustawić" w lewym górnym rogu scalanego obszaru. Dla pokazanych na rysunku scaleń lewy górny róg będzie:

  • komórką b dla scalenia b, c,
  • komórką j dla scalnenia j, o,
  • komórką p dla scalenia p, q, r, u, v, w.

Tworząc kod tabeli, piszemy znaczniki kolejnych wierszy, a w nich znaczniki kolejnych komórek. W związku z tym zawsze pierwszą opisywaną w kodzie komórką grupy scalanych komórek jest lewa, górna komórka tej grupy. Obszar scalony definiujemy dodając odpowiedni atrybut tylko w znaczniku tej komórki. Ponownie "stańmy" więc w pierwszych komórkach scalanych grup i określmy atrybuty:

  • dla komórki b: <td colspan="2">b, c</td> - scalamy tylko w wierszu zliczając kolumny,
  • dla komórki j: <td rowspan="2">j, o</td> - scalamy tylko w kolumnie zliczając wiersze,
  • dla komórki p: <td cospan="3" rowspan="2">p, q, r, u, v, w</td> - scalamy w wieszu i w kolumnie.

Ćwiczenie 2_5_3_1

Wykonaj stronę wyświetlającą tabelę ze scalonymi komórkami, tak jak na omawianym rysunku. Pamiętaj o wklejeniu fragmentu kodu zapewniającego minimalne formatowanie tabeli. Kod tworzący tabelę wygląda następująco:

<table>
  <tr>
    <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> <th>6</th>
  </tr>
  <tr>
    <th>2</th> <td>a</td> <td colspan="2">b, c</td> <td>d</td> <td>e</td>
  </tr>
  <tr>
    <th>3</th> <td>f</td> <td>g</td> <td>h</td> <td>i</td> <td rowspan="2">j, o</td>
  </tr>
  <tr>
    <th>4</th> <td>k</td> <td>l</td> <td>m</td> <td>n</td>
  </tr>
  <tr>
    <th>5</th> <td colspan="3" rowspan="2">p, q, r, u, v, w</td> <td>s</td> <td>t</td> 
  </tr>
  <tr>
    <th>6</th> <td>y</td> <td>z</td>
  </tr>
</table>

Zwróć uwagę na to, że komórki uwzględnione jako scalone nie mają potem swoich znaczników, są to takie komórki jak:

  • w wierszu 1 komórka c,
  • w wierszu 4 komórka o,
  • w wierszu 5 komórki q oraz r,
  • w wierszu 6 komórki u, v oraz w.

Tak powinna wyglądać wykonana strona:

Oczywiście tabela nie wygląda tak samo jak na rysunku, bo brak jej odpowiedniego formatowania, ale zachowuje układ komórek zgodny z rysunkiem.

Praca domowa

Zaprojektuj tabelę zestawiającą elementy użyte podczas montażu komputera. Tabela powinna posiadać przynajmniej jedną grupę komórek scalonych. Tabelę zaprezentuj na stronie WWW.


Jeżeli nie jesteś pewny, jak wykonane zadania zapisać na pendriwie, to zajrzyj do pierwszego ćwiczenia, w którym zostało to dokładnie wytłumaczone.