Tabele

Tabele są podstawowym elementem struktur stron internetowych, służącym do prezentacji danych w formie siatki, składającej się z wierszy i kolumn. CSS3 oferuje szerokie możliwości stylizacji tabel, pozwalając na tworzenie zarówno prostych, jak i zaawansowanych layoutów tabel z użyciem różnorodnych właściwości CSS. W tej lekcji przyjrzymy się, jak można zastosować CSS do stylizacji tabel, w tym zarządzania obramowaniami, tłem, tekstem i układem tabel.

Przykład stylizacji tabeli

Poniżej znajduje się kompletny przykład stylizacji tabeli przy użyciu CSS. Przykład ilustruje, jak można zastosować różne style do tabeli, wierszy, komórek oraz nagłówków tabeli.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stylizacja tabeli w CSS3</title>
    <style>
        /* Stylizacja całej tabeli */
        table {
            width: 100%;
            border-collapse: collapse; /* Usunięcie podwójnych obramowań */
            margin: 20px 0;
        }

        /* Stylizacja nagłówków tabeli */
        th {
            background-color: #f2f2f2; /* Kolor tła nagłówków */
            text-align: left; /* Wyrównanie tekstu nagłówków */
            padding: 8px; /* Odstępy wewnątrz komórek */
        }

        /* Stylizacja komórek tabeli */
        td {
            border: 1px solid #ddd; /* Obramowanie komórek */
            padding: 8px; /* Odstępy wewnątrz komórek */
        }

        /* Stylizacja wierszy tabeli przy najechaniu myszką */
        tr:hover {
            background-color: #ddd; /* Kolor tła wiersza przy najechaniu */
        }

        /* Stylizacja wierszy nagłówków, aby były wyśrodkowane */
        .text-center {
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr class="text-center">
                <th>Nagłówek 1</th>
                <th>Nagłówek 2</th>
                <th>Nagłówek 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Dane 1</td>
                <td>Dane 2</td>
                <td>Dane 3</td>
            </tr>
            <tr>
                <td>Dane 4</td>
                <td>Dane 5</td>
                <td>Dane 6</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Opis stylów

  • border-collapse: Usuwa podwójne obramowania między komórkami tabeli, tworząc pojedynczą, spójną linię.
  • text-align: Określa wyrównanie tekstu wewnątrz komórek; można stosować wartości left, center, right.
  • padding: Ustawia odstępy wewnątrz komórek tabeli, dodając przestrzeń między krawędziami komórki a jej zawartością.
  • background-color: Definiuje kolor tła komórek, nagłówków lub całych wierszy.
  • border: Umożliwia stylizację obramowania komórek, w tym grubość, styl (np. solid, dotted, dashed) i kolor.

Podsumowanie

Stylizacja tabel przy użyciu CSS3 to potężne narzędzie, które pozwala na tworzenie czytelnych i estetycznie przyjemnych tabel. Dzięki różnorodności właściwości CSS, takich jak obramowania, tło, wyrównanie tekstu i odstępy, deweloperzy mogą dostosować wygląd tabel do potrzeb swoich aplikacji webowych. Pamiętając o odpowiednim użyciu tych właściwości, można stworzyć tabele, które nie tylko dobrze wyglądają, ale są również funkcjonalne i poprawiają ogólną użyteczność strony.

Oprócz podstawowych stylów omówionych w przykładzie, CSS3 oferuje jeszcze szereg innych możliwości, które mogą być użyte do dalszej personalizacji tabel. Oto kilka dodatkowych wskazówek:

  • nth-child(): Selektor ten pozwala na stylizację poszczególnych wierszy tabeli w cykliczny sposób, np. zmiana koloru tła co drugiego wiersza dla lepszej czytelności.
  • overflow: W połączeniu z ustawieniem szerokości i wysokości komórek, właściwość ta pozwala na kontrolę sposobu wyświetlania treści przekraczających rozmiary komórki, np. przez dodanie paska przewijania.
  • text-overflow: Pozwala na określenie, jak tekst ma być obcinany w komórkach tabeli, gdy nie mieści się w dostępnym miejscu, np. poprzez wyświetlenie trzech kropek (ellipsis).

Wykorzystując te i inne właściwości CSS, można tworzyć tabele, które są nie tylko estetycznie dopracowane, ale również zapewniają lepsze doświadczenia użytkownika dzięki poprawie czytelności i dostępności treści.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs WebDevelopera od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Poprzedni
Następny
Scroll to Top