Podczas pracy z językiem HTML, służącym do tworzenia struktury stron internetowych, oraz innymi językami znaczników, takimi jak XML, spotykamy się z różnorodnymi atrybutami i znacznikami. Szczególnie istotne w tym kontekście są tabele, które umożliwiają czytelne prezentowanie dużych zbiorów danych, ułatwiając użytkownikom ich przeglądanie, porównywanie i analizowanie.
Dzięki odpowiednio skonstruowanym tabelom, odbiorcy mogą szybko wyodrębnić najważniejsze informacje, wnioski czy rezultaty, bez konieczności zagłębiania się w cały tekst. Dodatkowo, wygląd tabel można modyfikować i ulepszać, wykorzystując arkusze stylów CSS.
Istnieje szereg powodów, dla których warto zadbać o odpowiednią stylistykę tabel w aplikacjach internetowych:
- Estetyka: Standardowe tabele często prezentują się monotonnie i surowo. Nadanie im atrakcyjnego wyglądu za pomocą CSS sprawia, że stają się bardziej przyjazne dla użytkownika.
- Dostępność: Poprzez odpowiednią stylizację, tabele mogą być bardziej przystępne również dla osób z niepełnosprawnościami.
- Czytelność: Zastosowanie różnorodnych technik stylizacji ułatwia użytkownikom nawigację po danych i ich zrozumienie.
- Branding: Spójna stylistyka tabel, z wykorzystaniem firmowej kolorystyki i czcionek, pomaga wzmocnić tożsamość marki w całej aplikacji.
- SEO: Umieszczanie danych w formie tabel poprawia widoczność strony w wyszukiwarkach internetowych.
Tworzenie podstawowej tabeli za pomocą HTML
Aby zademonstrować praktyczne zastosowanie tabel w HTML, stworzymy nowy folder projektu. Wewnątrz niego utworzymy dwa pliki: index.html, w którym umieścimy kod HTML, oraz styles.css, który posłuży do stylizacji tabeli za pomocą CSS.
Jeśli chcesz powtórzyć te kroki, wykonaj poniższe polecenia w wierszu poleceń:
mkdir Stylizacja-HTML-Tabele
cd Stylizacja-HTML-Tabele
touch index.html styles.css
Po wykonaniu tych kroków uzyskamy podstawowy folder projektu, który pozwoli na rozpoczęcie pracy z tabelami HTML. W dalszej części artykułu przedstawimy przykładowe języki programowania, ich zastosowania oraz firmy, które z nich korzystają, prezentując te dane w formie tabeli.
Każda tabela w HTML musi być umieszczona wewnątrz znacznika
.
W pliku index.html dodaj podstawową strukturę dokumentu HTML, a następnie umieść poniższy kod wewnątrz znacznika :
<table>
<tr>
<th>Język</th>
<th>Typowe zastosowania</th>
<th>Firmy używające</th>
</tr>
<tr>
<td>Java</td>
<td>Aplikacje internetowe, aplikacje Android, aplikacje korporacyjne</td>
<td>Google, Amazon, LinkedIn</td>
</tr>
<tr>
<td>Python</td>
<td>Analiza danych, tworzenie stron internetowych, automatyzacja</td>
<td>Google, Dropbox, Spotify</td>
</tr>
<tr>
<td>JavaScript</td>
<td>Tworzenie stron internetowych, front-end, skrypty przeglądarkowe</td>
<td>PayPal, Facebook, Netflix</td>
</tr>
<tr>
<td>C++</td>
<td>Tworzenie gier, programowanie systemowe, systemy wbudowane</td>
<td>Tesla, Microsoft, Adobe</td>
</tr>
<tr>
<td>Swift</td>
<td>Tworzenie aplikacji na iOS i macOS</td>
<td>Apple</td>
</tr>
<tr>
<td>PHP</td>
<td>Tworzenie stron internetowych, skrypty serwerowe, systemy CMS</td>
<td>WordPress, Wikipedia, Yahoo</td>
</tr>
</table>
Analizując powyższy kod, można zauważyć kilka dodatkowych znaczników umieszczonych wewnątrz znacznika
:
,
oraz
.
Ich funkcja jest następująca:
Po wyrenderowaniu powyższego kodu, w przeglądarce zobaczymy podstawową tabelę z danymi.
Właściwości CSS używane do stylizowania tabel
Stworzona powyżej tabela jest w pełni funkcjonalna, jednak jej wygląd pozostawia wiele do życzenia. Aby nadać jej estetyczny i atrakcyjny wygląd, posłużymy się arkuszem stylów CSS.
W tym celu, musimy najpierw zaimportować plik styles.css do pliku index.html. W sekcji <head> dokumentu HTML, należy dodać następującą linię:
<link rel=”stylesheet” href=”styles.css”>
Teraz możemy przystąpić do stylizacji tabeli, wykorzystując różne właściwości CSS.
#1. Obramowanie
Możemy dodać obramowanie wokół każdej komórki w tabeli. W tym celu, w pliku styles.css zdefiniujemy właściwość border dla elementów <th> i <td>, ustawiając jego grubość na 2 piksele:
th, td {
border: 2px solid orange;
}
Po dodaniu powyższego kodu, obramowanie komórek zostanie ustawione na 2 piksele, a jego kolor będzie pomarańczowy.
Po odświeżeniu strony w przeglądarce, zobaczymy tabelę z obramowanymi komórkami.
#2. Łączenie obramowań
Po przyjrzeniu się powyższemu zrzutowi ekranu, można zauważyć, że między krawędziami każdej komórki występują odstępy. Właściwość border-collapse decyduje o tym, czy sąsiadujące ze sobą komórki w tabeli powinny dzielić wspólne obramowanie.
Aby komórki miały wspólne obramowanie, dodaj do pliku CSS następujący kod:
table {
border-collapse: collapse;
}
Po odświeżeniu strony, zobaczymy, że komórki tabeli mają teraz wspólne obramowania.
Jeśli zależy nam na tym, aby komórki miały oddzielne obramowania, należy dodać do pliku CSS następujący kod:
table {
border-collapse: separate;
}
W takim przypadku, po odświeżeniu strony, komórki będą miały oddzielne obramowania.
#3. Odstępy między obramowaniami
Dzięki właściwości border-spacing możemy tworzyć małe odstępy między komórkami tabeli. Aby ta właściwość działała prawidłowo, musimy ustawić border-collapse na separate.
W pliku CSS, modyfikujemy klasę table, dodając do niej border-spacing:
table {
border-collapse: separate;
border-spacing: 3px;
}
Po wprowadzeniu powyższych zmian, obramowania komórek zostaną oddzielone odstępem o szerokości 3 pikseli.
Po odświeżeniu tabeli w przeglądarce, zauważymy wprowadzone zmiany.
#4. Układ tabeli
Właściwość table-layout pozwala nam określić sposób wyświetlania tabeli. Możemy zdefiniować tabele, w których szerokość kolumn jest stała lub takie, które dostosowują swoją szerokość do zawartości.
Aby kolumny tabeli miały stałą szerokość, ustawiamy właściwość table-layout na wartość fixed:
table-layout: fixed;
Kompletny kod klasy table w pliku CSS będzie wyglądał następująco:
table {
border-collapse: collapse;
border-spacing: 3px;
table-layout: fixed;
}
Jeśli chcemy, aby kolumny zmieniały swoją szerokość w zależności od zawartości, możemy ustawić wartość table-layout na auto:
table-layout: auto;
Ostatnia wersja klasy table w kodzie CSS wygląda tak:
Po sprawdzeniu tabeli, można zauważyć, że ostatnia komórka (w ostatnim wierszu) została rozszerzona, ponieważ dodałem tam dłuższy tekst: „MailChimp i wiele więcej”.
Widać wyraźnie, że w przypadku ustawienia table-layout na auto, szerokość kolumn dopasowuje się dynamicznie do zawartości.
Do tej pory zajmowaliśmy się stylizacją całej tabeli. Teraz możemy skupić się na poszczególnych wierszach, komórkach lub nagłówkach, zmieniając kolor tła, czcionkę oraz właściwości wyrównania tekstu.
Poszczególne elementy tabeli możemy stylizować w następujący sposób:
#5. Kolor tła
Możemy zmienić kolor tła górnego wiersza tabeli na żółto-zielony. W tym celu, wykorzystamy selektor pseudoklasy :first-child:
tr:first-child {
background-color: yellowgreen;
}
Po dodaniu powyższego kodu, górny wiersz tabeli będzie miał żółto-zielone tło.
#6. Czcionka
Możemy modyfikować styl i rozmiar czcionki dla poszczególnych wierszy, kolumn lub komórek.
Aby zmienić styl czcionki w ostatniej kolumnie tabeli („Firmy używające”), dodamy do pliku CSS następujący kod, używając selektora td:last-child:
td:last-child {
font-style: italic;
}
Po odświeżeniu strony, zawartość ostatniej kolumny zostanie wyświetlona kursywą.
Możemy również zmienić kolor i rozmiar czcionki w pierwszej kolumnie tabeli, aby ją wyróżnić. W tym celu, dodajemy do pliku CSS poniższy kod:
tr td:first-child {
color: red;
font-size: x-large;
font-weight: bolder;
}
Po odświeżeniu strony, zauważymy, że zawartość pierwszej kolumny (Język) ma większy rozmiar, jest czerwona i pogrubiona.
Jak sprawić, by tabela była responsywna
Stworzona przez nas tabela może nie wyświetlać się poprawnie na małych ekranach. Aby sprawdzić, czy kod jest responsywny, można skorzystać z narzędzi deweloperskich w przeglądarce Chrome lub z zewnętrznych narzędzi online.
Istnieje kilka sposobów, aby dostosować tabele do różnych rozmiarów ekranów, ale w tym artykule omówimy tylko jeden.
Wykonaj następujące kroki:
- Ustaw szerokość elementu
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
- Ustaw podział wyrazów na
break-worddla elementówtdith, aby długie słowa były poprawnie wyświetlane w komórkach:
th, td {
border: 2px solid orange;
word-break: break-word;
}
Najlepsze praktyki stylizowania tabel
CSS daje wiele możliwości, zwłaszcza jeśli jest dobrze poznany. Oto kilka najlepszych praktyk, które zapewnią optymalną stylizację tabel:
- Używaj zewnętrznych arkuszy stylów: w naszym przykładzie wybraliśmy zewnętrzny arkusz CSS. Dzięki temu możemy łatwo stosować te same style do różnych tabel, co przyspiesza proces projektowania.
- Zachowaj prostotę: łatwo jest przesadzić ze stylizacją tabel. Zawsze dąż do tego, aby projekt był prosty, a tabele łatwe do odczytania i zrozumienia.
- Dodawaj obramowania: obramowanie ułatwia wizualne oddzielenie danych w tabeli i sprawia, że jest ona bardziej czytelna.
- Stosuj spójne kolory: jeśli na stronie internetowej znajduje się kilka tabel, upewnij się, że używasz spójnych kolorów i czcionek. Zastosowanie firmowej palety barw wzmocni rozpoznawalność marki.
- Zadbaj o responsywność: pamiętaj, że użytkownicy mogą przeglądać Twoją stronę na urządzeniach o różnej wielkości ekranu.
- Używaj podpisów: krótki podpis umieszczony nad tabelą opisuje jej zawartość.
- Stosuj białe przestrzenie: jeśli kilka tabel występuje po sobie, oddziel je za pomocą białych przestrzeni i odpowiednio opisz.
Podsumowanie
Mam nadzieję, że po przeczytaniu tego artykułu jesteś w stanie samodzielnie tworzyć i stylizować podstawowe tabele HTML. Oczywiście, HTML i CSS to obszerne zagadnienia, dlatego omówiliśmy tylko podstawowe elementy. Możesz tworzyć mniejsze lub większe tabele, w zależności od potrzeb i rodzaju danych, które chcesz zaprezentować.
Jeśli chcesz dowiedzieć się więcej o CSS i jego zastosowaniach, zapraszam do przejrzenia ściągawki z podstawowymi właściwościami CSS, która pomoże Ci ulepszyć interfejs użytkownika.