Formatowanie tabel
Łączenie komórek oraz formatowanie tabel pozwala na tworzenie bardziej złożonych i estetycznych struktur danych. Tabele HTML mogą dzięki temu zyskać bardziej złożone struktury i prezentować dokładniejsze dane.
W pierwszej kolejności warto zapoznać się co odpowiada za łączenie komórek w pionie i poziomie, są to atrybuty rowspan i colspan, które tworzą komórki o większych rozmiarach.
rowspan— Określa, ile wierszy powinna obejmować komórka.colspan— Określa, ile kolumn powinna obejmować komórka.
Przykład użycia łączenia komórek:
<table border="1" cellspacing="0" cellpadding="5" style="border-collapse: collapse;">
<tr>
<th>Nagłówek 1</th>
<th>Nagłówek 2</th>
<th>Nagłówek 3</th>
</tr>
<tr>
<td rowspan="2">Komórka 1.1 (łączy 2 wiersze)</td>
<td>Komórka 1.2</td>
<td>Komórka 1.3</td>
</tr>
<tr>
<td colspan="2">Komórka 2.2 (łączy 2 kolumny)</td>
</tr>
</table>Powyższa przykład przedstawia tabelę składającą się z trzech nagłówków oraz dwóch wierszy, z których jeden ma komórkę łączącą dwa wiersze, a drugi ma komórkę łączącą dwie kolumny.
Wygląd gotowej tabeli:
| Nagłówek 1 | Nagłówek 2 | Nagłówek 3 |
|---|---|---|
| Komórka 1.1 (łączy 2 wiersze) | Komórka 1.2 | Komórka 1.3 |
| Komórka 2.2 (łączy 2 kolumny) | ||
Jednak warto zwrócić uwagę, na formatowanie tabel z użyciem CSS. Stylowanie tabel za pomocą arkuszy stylów CSS pozwala na większą kontrolę nad ich wyglądem i zachowaniem.
Stylowanie ramki tabeli — Można zastosować styl CSS do elementu <table> w celu zmiany ramki i jej właściwości.
table {
border-collapse: collapse;
border: 1px solid #ccc;
}Stylowanie nagłówków — Stylowanie nagłówków za pomocą CSS pozwala na ujednolicenie wyglądu dla wszystkich komórek nagłówkowych.
th {
background-color: #f2f2f2;
font-weight: bold;
text-align: left;
}Stylowanie komórek — Można zastosować style CSS do komórek danych w celu zmiany ich wyglądu, w tym tła, tekstu, marginesów itp.
td {
border: 1px solid #ccc;
padding: 5px;
}Stylowanie wierszy — Można zastosować style CSS do wierszy tabeli, aby uzyskać zmienny kolor tła lub inne efekty.
tr:nth-child(even) {
background-color: #f2f2f2;
}Łącząc powyższe style, można uzyskać estetycznie wyglądającą i czytelną tabelę.
Przykład użycia powyższych styli:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ccc;
padding: 5px;
text-align: left;
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<tr>
<th>Nagłówek 1</th>
<th>Nagłówek 2</th>
<th>Nagłówek 3</th>
</tr>
<tr>
<td rowspan="2">Komórka 1.1 (łączy 2 wiersze)</td>
<td>Komórka 1.2</td>
<td>Komórka 1.3</td>
</tr>
<tr>
<td colspan="2">Komórka 2.2 (łączy 2 kolumny)</td>
</tr>
<tr>
<td>Komórka 3.1</td>
<td>Komórka 3.2</td>
<td>Komórka 3.3</td>
</tr>
</table>
</body>
</html>
Powyższy przykład przedstawia połączenie CSS dla tabeli, komórek, nagłówków oraz wierszy, tworząc czytelną i estetycznie prezentującą się tabelę. Tabela zawiera również łączone komórki, dzięki atrybutom rowspan i colspan.
Wygląd gotowej tabeli:
| Nagłówek 1 | Nagłówek 2 | Nagłówek 3 |
|---|---|---|
| Komórka 1.1 (łączy 2 wiersze) | Komórka 1.2 | Komórka 1.3 |
| Komórka 2.2 (łączy 2 kolumny) | ||
| Komórka 3.1 | Komórka 3.2 | Komórka 3.3 |
Warto również pamiętać, że stylowanie tabeli można dodatkowo dostosować, aby spełniało konkretne wymagania projektu. Można na przykład dodać efekty hover, czyli zmienić kolor tła lub tekstu po najechaniu myszką, lub też stylować tabelę w odpowiedzi na zdarzenia np. kliknięcie komórki.
Przykład użycia efektu hover:
tr:hover {
background-color: #ddd;
}Dodając powyższy styl CSS, wiersze tabeli zmienią kolor tła na jasnoszary (#ddd) po najechaniu na nie myszką.
Warto zapamiętać
Zaawansowane techniki stylowania i interakcji z tabelami można osiągnąć również za pomocą języka JavaScript, co pozwala na dynamiczne zmiany treści tabeli, filtrowanie danych, sortowanie czy paginację.
Jednak niezależnie od użytej techniki, zdecydowanie warto tworzyć atrakcyjne i funkcjonalne tabele, które ułatwiają prezentację danych w przystępny sposób, zwiększając wartość użytkową strony internetowej.
Czy ten poradnik był pomocny?
Mateusz Turek
Swoją przygodę z projektowaniem stron internetowych rozpocząłem z kursem od Komputer Świat wydanym w marcu 2003 roku w formie małej książeczki. Na przestrzeni 20 lat zaprojektowałem niezliczoną ilość witryn i aplikacji internetowych. Projektowałem dla małych i dużych firm takich jak Oriflame, Top Market, Bezpieczna Rodzina czy Helping Hand.
