Tabele <table>
Mirosław Zelent
Tabele (ang. table) nadają się fantastycznie do czytelnego, dwuwymiarowego przedstawiania danych. Cały obszar tabeli ograniczony jest – rzecz jasna – znacznikami <table></table>
. Pojedynczy wiersz tabeli tworzymy tagami <tr></tr>
(ang. table row), zaś wewnątrz wierszy definiować będziemy komórki tabeli <td></td>
(ang. table drawer). Jako przykład, przyjrzyjmy się tabeli zawierającej 3 wiersze, a w każdym z nich po 3 komórki:
<style> td { border: 1px solid black; } </style>
<!-- ustawienie czarnego obramowania komórek tabeli w CSS -->
<table>
<tr>
<td>1</td> <td>2</td> <td>3</td>
</tr>
<tr>
<td>4</td> <td>5</td> <td>6</td>
</tr>
<tr>
<td>7</td> <td>8</td> <td>9</td>
</tr>
</table>
Rezultat w przeglądarce:
1 | 2 | 3 |
4 | 5 | 6 |
7 | 8 | 9 |
Kolejna ważna umiejętność w kontekście budowania tabel to scalanie komórek. Scalanie to łączenie dwóch lub więcej komórek w jedną. Czasami trzeba wykonać takie złączenie w tabeli, chociażby dla przejrzystości pokazywania danych. Służą do tego dwa atrybuty: rowspan
, jeśli scalaniu ulegają wiersze oraz colspan
, jeżeli scalaniu ulegają kolumny. Zobaczmy to jednak na konkretnych przykładach!
Scalanie z użyciem atrybutu colspan
:
<style> td { border: 1px solid black; } </style>
<!-- ustawienie czarnego obramowania komórek tabeli w CSS -->
<table>
<tr>
<td colspan="2">1</td> <td>3</td>
</tr>
<tr>
<td>4</td> <td>5</td> <td>6</td>
</tr>
<tr>
<td>7</td> <td>8</td> <td>9</td>
</tr>
</table>
Rezultat w przeglądarce:
1 | 3 | |
4 | 5 | 6 |
7 | 8 | 9 |
Scalanie z użyciem atrybutu rowspan
:
<style> td { border: 1px solid black; } </style>
<!-- ustawienie czarnego obramowania komórek tabeli w CSS -->
<table>
<tr>
<td>1</td> <td>2</td> <td>3</td>
</tr>
<tr>
<td rowspan="2">4</td> <td>5</td> <td>6</td>
</tr>
<tr>
<td>7</td> <td>8</td>
</tr>
</table>
Rezultat w przeglądarce:
1 | 2 | 3 |
4 | 5 | 6 |
7 | 8 |
Możemy także rozbudować tabelę o znaczniki <thead>
(ang. table head), oraz <tbody>
(ang. table body). Tak samo jak dokument HTML posiada sekcję <head>
i <body>
, tak tabela posiada swoją głowę i ciało – jest to ta sama tradycja, wywodząca się z budowy funkcji w programowaniu. Oczywiście ktoś zapyta - a po co w ogóle określać ten podział na głowę i ciało tabeli? No, idea jest taka, że w tabelach często mamy do czynienia ze słownym opisem, co znajduje się w danych kolumnach – i do tego celu można wykorzystać głowę <thead>
. Do tworzenia takich "opisowych komórek nagłówkowych" stosujemy znacznik <th>
(ang. table header):
<style> td, th { border: 1px solid black; } </style>
<!-- ustawienie czarnego obramowania tabeli w CSS -->
<table>
<thead>
<tr>
<th>Przedmiot</th> <th>Nazwisko</th> <th>Ocena</th>
</tr>
</thead>
<tbody>
<tr>
<th>Historia</th> <td>Nowak</td> <td>4+</td>
</tr>
<tr>
<th>Historia</th> <td>Mazur</td> <td>3-</td>
</tr>
<tr>
<th>Fizyka</th> <td>Nowak</td> <td>2</td>
</tr>
<tr>
<th>Fizyka</th> <td>Mazur</td> <td>4</td>
</tr>
</tbody>
</table>
Rezultat w przeglądarce:
Przedmiot | Nazwisko | Ocena |
---|---|---|
Historia | Nowak | 4+ |
Historia | Mazur | 3- |
Fizyka | Nowak | 2 |
Fizyka | Mazur | 4 |
W uproszczeniu można powiedzieć, że takie komórki <th>
, zastępują nam klasyczne szufladki <td>
wszędzie tam, gdzie zamiast wartości komórki, mamy jej opis – logiczne. W praktyce znaczniki <th>
mogą pojawić się nie tylko w głowie tabeli <thead>
, ale także w sekcji <tbody>
, jako że opisy czasem znajdą się także w innym wierszu niż pierwszy – podział na głowę i ciało wykazuje więc charakter umowny.
I ostatnia, ważna sprawa przy tabelach - otóż dozwolone jest, w ściśle określonych przypadkach, pomijanie zamykających tagów. W HTML5 można je pominąć, co znacząco może odchudzić ilość kodu potrzebną do zapisania wielkich tabel:
<style> td, th { border: 1px solid black; } </style>
<!-- ustawienie czarnego obramowania tabeli w CSS -->
<table>
<thead>
<tr> <th> Przedmiot <th>Nazwisko <th> Ocena
<tbody>
<tr> <th> Historia <td> Nowak <td> 4+
<tr> <th> Historia <td> Mazur <td> 3-
<tr> <th> Fizyka <td> Nowak <td> 2
<tr> <th> Fizyka <td> Mazur <td> 4
</table>
Rezultat w przeglądarce jest identyczny:
Przedmiot | Nazwisko | Ocena |
---|---|---|
Historia | Nowak | 4+ |
Historia | Mazur | 3- |
Fizyka | Nowak | 2 |
Fizyka | Mazur | 4 |
Polecamy: Mega Sekurak Hacking Party
Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - wpiszcie go w koszyku, dzięki czemu otrzymacie 40% zniżki na bilet standard. Więcej szczegółów znajdziecie tutaj.
Książka: Wprowadzenie do bezpieczeństwa IT
Niedawno wystartował dodruk świetnej, rozchwytywanej książki pt. "Wprowadzenie do bezpieczeństwa IT, Tom I" (około 940 stron). Mamy dla Was kod: pasja (wpisz go w koszyku), dzięki któremu otrzymacie 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla naszych Widzów! Jest to pierwszy tom serii o ITsec, który wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!
Pomóż dzieciom
Polska Akcja Humanitarna od wielu lat dożywia dzieci. Prosimy, poświęć teraz dosłownie chwilę i pomóż klikając w oznaczony strzałką zielony brzuszek Pajacyka. Dziękujemy!
Komentarze
Czy macie jakieś pytania, sugestie, uwagi? A może zauważyliście literówkę albo błąd? Dajcie koniecznie znać: kontakt@pasja-informatyki.pl. Dziękujemy za poświęcony czas - to dzięki Wam serwis staje się coraz lepszy!