Tabele można dowolnie stylizować za pomocą stylów CSS. W tej lekcji dowiesz się, jak dodać obramowanie tabeli i do czego służy właściwość border-collapse
Obramowanie tabeli w CSS
Aby dodać obramowanie do tabeli HTML, należy wykorzystać właściwość border.
Poniższy przykład, ustawia obramowanie dla elementów <table>, <th> i <td>.
Tabela z pojedyńczym obramowaniem
Jak widać w powyższym przykładzie, dając obramowanie na elementy, table, th i td obramowanie jest podwójne. Aby uzyskać pojedyńcze obramowanie, wystarczy ustawić właściwość border-collapse: collapse. Dzięki niej, podwójne obramowanie zostanie scalone w obramowanie pojedyńcze.
Ustawianie wymiarów tabeli HTML
Poniżej dowiesz się, jak zmienić szerokość tabeli w poziomie i w pionie.
Tabela na całą szerokość strony.
Poniższy przykład pokazuje, jak rozciągnąć tabelę HTML na całą szerokość strony. Do tego celu, wystaryczy wykorzystać właściowość CSS width i ustawić ją na 100%.
Zmiana wysokości komórki tabeli
Aby zmienić wysokość komórki tabeli, wystarczy skorzystać z właściwości height. W poniższym przykładzie zwiększymy wysokość nagłówka tabeli.
Wyrównanie elementów tabeli
Poniżej znajdziesz informację, jak wyrównać elementy tabeli w poziomie i w pionie.
Wyrównanie wierszy tabeli w poziomie
Aby wyrównać, komórkę tabeli wystarczy ustawić właściwość text-align:center. W poniższym przykładzie wyrównamy nagłówki th oraz pozostałe wiersze td
Wyrównanie wierszy tabeli w pionie
W tym przykładzie pokażemy jak wyrównać wiersz tabeli w poziomie. Do tego celu, wykorzystamy właściwość vertical-align. Poniżej ustawimy, aby komórki były wyrównane do dołu, za pomocom wartości bottom. Możesz również wykorzystać wartość top lub middle.
Dodanie odstępów do komórek
Odstępy do komórek, można również dodać za pomocą właściwości padding.
Kolorowanie tabel
Za pomocą CSS, można nadać niemal dowolny wygląd tabelą. Gdy starannie dobierzesz style, to tabele HTML mogą się prezentować znakomicie. Oczywiście nie będziemy tu pokazywać wszystkich możliwości, a jedynie nakreślimy temat.
Kolorowanie wierszy parzystych
Poniższy przykład pokazuje, jak kolorować co drugi wiersz tabeli. Oczywiście można to zrealizować na kilka sposobów. Jedną z możliwości, jest dodanie do co drugiego wiersza, specjalnej klasy, które zmienia kolor. My jednak w tym ćwiczeniu, wykorzystamy pseudoklasy - jest to rozwiązanie bardziej nowoczesne, bo nie musimy pilnować, aby ręcznie dodawać klasę, w co drugim wierszu.
Podświetlanie wiersza po najechaniu myszką
Za pomocą CSS, można podświetlić wiersz tabeli po najechaniu kursorem myszy. Aby uzyskać efekt podświetlenia, należy wykorzystać pseudoklasę :hover
Responsywne tabele
Tabele bardzo dobrze sprawdzają się na komputerach. Gdy tabela, ma dużo kolumn to na urządzeniach mobilnych może się nie mieścić. Jak sobie z tym poradzić?
Rozwiązanie jest bardzo proste. Aby tabela była responsywna, wystarczy w strukturze HTML, dodać element nadrzędny div.
Element ten musi, mieć nadany styl overflow-x: auto. Dzięki temu, tabela będzie można scrollować tabelę,
i nie będzie ona szersza niż ekran.
Podsumowanie
W powyższej lekcji dowiedziałeś się jak nadawać style CSS tabelą HTML. Zapiętej, że za pomocą stylów, możesz manipulować obramowaniem, odstępami między komórkami, jak również wyrównaniem tekstu, czy kolorami.
Temat stylizowania tabel, nie został w stu procentach wyczerpany, a jedynie nakreślony. W razie wątpliwości zachęcam do zadawania pytań w komentarzach. Będę wtedy starał się rozwiać wątpliwości i zaktualizować lekcję.
Na koniec jeszcze jeden, przykład który łączy w sobie kilka poprzednich ćwiczeń.