• Artykuł

          

Samouczek: Scalanie wierszy i komórek w tabelach HTML - Kurs HTML i CSS  Udostępnij na: Facebook

Autor: Witold Lasik

Opublikowano: 2011-09-30

Bardzo często zdarza się, że prezentowane przez nas dane tabelaryczne wymuszają zgrupowanie pewnej liczby wierszy lub kolumn w celu lepszego wyróżnienia wizualnego na tle pozostałych informacji. Do tej pory mieliśmy do czynienia jedynie z tabelami o stałej konstrukcji poszczególnych wierszy (zawierały stałą liczbę komórek). W tym artykule dowiemy się, jak tworzyć tabele o zróżnicowanej strukturze, gdzie wiersze i kolumny będą dowolnie łączone w celu lepszego dopasowania tabeli do charakteru informacji, które ona przechowuje.

Przed wykonaniem zadań powinieneś wiedzieć:

Po wykonaniu zadań nauczysz się:

  • scalać wiersze i komórki w tabelach HTML,
  • dopasowywać strukturę tabel do indywidualnych potrzeb.

Implementacja

W poniższych zadaniach przedstawione zostaną metody scalania wierszy i komórek, umożliwiające szersze dostosowanie struktury tabeli do charakteru prezentowanych w niej informacji.

Pobierz archiwum Samouczek-HTML-CSS--Tabele.zip i je rozpakuj. Otwórz plik-HTML\Scalanie-wierszy-i-komorek-w-tabelach-HTML\Zadanie1\index.html w dowolnym edytorze tekstowym (np. Notatnik) oraz wywołaj go w przeglądarce internetowej.

Podstawy scalania poziomego (scalanie kolumn)

  1. Plik index.html z archiwum tabela_wzor_3.rar (Rys. 1.) zawiera tabelę, składającą się z trzech wierszy i czterech kolumn (po cztery komórki w każdym wierszu).

Rys. 1. Zadanie 1. Tabela wejściowa.

  1. Scalimy ze sobą trzy pierwsze komórki pierwszego wiersza. Zostały one zaznaczone kolorem zielonym na Rys. 2.

Rys. 2. Zadanie 1. Scalanie komórek w poziomie (scalanie kolumn).

  1. Do pierwszego znacznika <td> dodamy atrybut

colspan="3"

Informacja
Za scalanie w poziomie odpowiedzialny jest atrybut colspan="colspan_value", który jest dodawany do znacznika <td> (znacznik komórek). Wartość colspan_value jest liczbą, która określa ilość scalanych komórek.
  1. Od tej pory komórka <td colspan="3"> pełni rolę trzech komórek, dlatego też usuwamy dwie zbędne komórki z pierwszego wiersza tak, aby miał on postać:
<tr>
        <td colspan="3">&nbsp;</td>
        <td>&nbsp;</td>
</tr>
  1. Porównaj kod wynikowy z kodem zamieszczonym na Rys. 3.

Rys. 3. Kod wynikowy scalenia 3 komórek w poziomie.

  1. Odśwież stronę w przeglądarce i sprawdź, czy wygląda tak, jak na Rys. 4.

Rys. 4. Zadanie 1. Wynik scalania komórek w poziomie (scalanie kolumn).

Podstawy scalania pionowego (scalanie wierszy)

  1. Naszym zadaniem będzie scalenie ostatniej komórki drugiego wiersza z ostatnią komórką trzeciego wiersza. Obszar scalania został zaznaczony kolorem zielonym na poniższym rysunku (Rys. 5.).

Rys. 5. Zadanie 2. Scalanie komórek w pionie (scalanie wierszy).

Informacja
Scalanie pionowe możliwe jest dzięki atrybutowi rowspan="rowspan_value", który jest dodawany do znaczników komórek (<td>). Wartość rowspan_value jest liczbą określającą ilość scalanych komórek. Dodajemy zatem do ostatniej komórki drugiego wiersza następujący atrybut rowspan="2".
  1. Tak zmodyfikowana komórka (<td rowspan="2">) pełni teraz rolę dwóch komórek (jednej z drugiego i jednej z trzeciego wiersza). W związku z tym musimy usunąć jedną nadmiarową komórkę z trzeciego wiersza tak, aby miał on postać:
<tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
</tr>
  1. Porównaj kod wynikowy z kodem zamieszczonym na Rys. 6. Kod wynikowy możesz również zobaczyć w pliku HTML\Scalanie-wierszy-i-komorek-w-tabelach-HTML\Zadanie1\wynik.html.

Rys. 6. Kod index.html po scaleniu dwóch wierszy czwartej kolumny.

  1. Odśwież stronę w przeglądarce i sprawdź, czy wygląda tak, jak na Rys. 7.

Rys. 7. Zadanie 2. Wynik scalania komórek w pionie (scalanie wierszy).

Praktyczne zastosowanie scalania poziomego i pionowego

W poniższym zadaniu przećwiczymy scalanie wierszy i komórek oraz dostosowywanie tabeli do indywidualnych potrzeb.

  1. Z pobranego archiwum Samouczek-HTML-CSS--Tabele.zip otwórz w dowolnym edytorze plik HTML\Scalanie-wierszy-i-komorek-w-tabelach-HTML\Zadanie2\index.html.
  2. Otwierając plik index.html w przeglądarce zobaczysz poniższą tabelę (Rys. 8.) Tabela zawiera 7 wierszy (nagłówek i 6 pracowników).

Rys. 8. Tabela zawierająca podstawowe informacje o pracownikach firmy.

  1. Trzech ostatnich pracowników to kadra menedżerska, dlatego też utwórz dodatkowy wiersz, w formie nagłówka, który wyróżni ich od reszty zatrudnionych. Dodaj poniższy kod HTML pomiędzy znacznikami <!-- Kadra Menedżerska Nagłówek --> i <!-- /Kadra Menedżerska Nagłówek -->:
<tr class="employee_header">
    <td colspan="4">Kadra menedżerska:</td>
</tr>
  1. Kolejną modyfikacją będzie dodanie drugiej funkcji pracownikowi Markowi Markowskiemu, który oprócz roli informatyka pełni również funkcję grafika w firmie. Zmień kod znajdujący się między znacznikami <!-- Pracownik Marek Markowski --> i <!-- /Pracownik Marek Markowski --> na:
<tr class="employee">
    <td rowspan="2">Marek Markowski</td>
    <td rowspan="2">4000</td>
    <td>Informatyk</td>
    <td rowspan="2">1997-08-23</td>
</tr>
  1. Następnie utwórz wiersz z dodatkową funkcją pracownika przez dodanie poniższego kodu pomiędzy znacznikami <!-- Dodatkowa Funkcja --> i <!-- /Dodatkowa Funkcja -->:
<tr class="employee">
    <td>Grafik</td>
</tr>
  1. Porównaj kod wynikowy z kodem zamieszczonym na Rys. 9. Kod wynikowy możesz również zobaczyć w pliku HTML\Scalanie-wierszy-i-komorek-w-tabelach-HTML\Zadanie2\wynik.html.

Rys. 9. Wynik końcowy zadania.

  1. Odśwież stronę w przeglądarce i sprawdź, czy wygląda tak, jak na Rys.10.

Rys. 10. Tabela z poprawnie zmodyfikowaną strukturą.

Podsumowanie

W tym artykule nauczyliśmy się, w jaki sposób scalać komórki zarówno w poziomie, w obrębie jednego wiersza, jak i w pionie, w obrębie wielu wierszy. Zapoznaliśmy się z zasadami dostosowywania struktury tabeli do scalonych komórek oraz z praktycznym wykorzystaniem umiejętności scalania. Poznane wiadomości wykorzystaliśmy w przykładowym zadaniu, w którym zawarte zostały oba typy scalania, a powstała struktura tabeli została w pełni dostosowana do nowego charakteru zawartości, jaki w niej umieściliśmy.

W kolejnym artykule nauczymy się, w jaki sposób tworzyć i osadzać w dokumentach HTML pływające ramki.

Dodatkowo zobacz: