5 elementów tabeli HTML, które decydują o jej działaniu

Tabela w HTML wygląda prosto tylko na pierwszy rzut oka. W praktyce jej poprawne zbudowanie wymaga zrozumienia relacji między trzema podstawowymi znacznikami: , i . Każdy wiersz to osobny , a komórki danych umieszcza się w . Przeglądarka sama nie zgadnie, gdzie kończy się jeden wiersz, a zaczyna drugi — musisz jej to powiedzieć jawnie. Najczęstszy błąd to wstawianie bezpośrednio do , z pominięciem . Taki kod może się wyświetlić, ale jego struktura jest nieprzewidywalna i psuje się przy sortowaniu czy kopiowaniu danych.

Liczba komórek w każdym wierszu musi się zgadzać. Jeśli w jednym wierszu masz cztery , a w kolejnym trzy, tabela się rozjedzie. Wyjątkiem są komórki łączone za pomocą colspan i rowspan. Colspan rozciąga komórkę w poziomie, rowspan w pionie. Wartości tych atrybutów to liczby całkowite większe od zera. Największy problem pojawia się, gdy łączysz komórki i jednocześnie chcesz zachować równą liczbę kolumn w każdym wierszu — wtedy trzeba ręcznie pilnować sumy colspanów. Błąd w jednym miejscu powoduje przesunięcie całej siatki.

Na koniec dwie praktyczne zasady. Po pierwsze, nie używaj tabel do budowania układu strony — kolory ścian do salonu tego służą inne narzędzia. Po drugie, sprawdzaj kod walidatorem, bo większość błędów w tabelach to literówki w zamykających znacznikach. Dobrze zbudowana tabela jest odporna na zmiany szerokości okna i czytelna dla każdego odbiorcy.

Jak dobierać poziomy w zagnieżdżonych sekcjach Nie zaczynaj numeracji od nowa w każdym
. To najczęstsza pułapka: autor widzi nową sekcję i od razu sięga po h2, choć w hierarchii dokumentu powinno być h3. Poziom nagłówka wynika z miejsca w całym dokumencie, a nie z tego, jak głęboko siedzi w kodzie. Jeśli sekcja jest częścią większego artykułu, jej nagłówek może być h2, a wewnętrzne podtytuły h3. Gdy sekcja to samodzielny blok obok innych, h2 również pasuje — ale wtedy nie mieszaj go z h4 wewnątrz.

Komórki nagłówkowe tworzy się znacznikiem , a zwykłe danymi — . Różnica nie jest tylko wizualna. niesie informację semantyczną: mówi czytnikom ekranu i wyszukiwarkom, że dana komórka opisuje kolumnę albo wiersz. Dlatego nagłówki kolumn umieszcza się w pierwszym wierszu, a nagłówki wierszy — w pierwszej kolumnie. Atrybut scope doprecyzowuje, czego dotyczy nagłówek: scope="col" dla kolumny, scope="row" dla wiersza. Bez niego tabela nadal się wyświetli, ale straci sens dla technologii asystujących.

Siatka kart, która sama się układa na każdej szerokości ekranu, nie wymaga ani jednego media query. Wystarczy połączyć trzy mechanizmy: repeat() z wartością auto-fill lub auto-fit, funkcję minmax() oraz jednostkę fr. Cała odpowiedzialność za układ przechodzi z zapytań o szerokość viewportu na sam kontener, który dopasowuje liczbę kolumn do dostępnego miejsca.

Nagłówki kolumn i wierszy mają osobne znaczniki Do nagłówków służy , a nie z pogrubieniem. Różnica nie jest kosmetyczna: informuje czytniki ekranu oraz wyszukiwarki, że dana komórka opisuje pozostałe. Nagłówek może dotyczyć kolumny albo wiersza — decyduje atrybut scope. Dla nagłówka kolumny ustaw scope="col", dla wiersza scope="row". Bez tego programy wspomagające nie wiedzą, oświetlenie w salonie czego dotyczy wartość w komórce. Pamiętaj też, że można umieścić zarówno w pierwszym wierszu, jak i w pierwszej kolumnie — czasem potrzebne są oba rodzaje jednocześnie.

Osobny temat to , i . Te znaczniki nie zmieniają wyglądu, When you loved this short article and you want to receive more information concerning https://lebenskunst.berlin/index.php?title=Flex_a_elementy_blokowe:_kiedy_Znika_nowa_linia_w_tekście assure visit our own web site. ale porządkują tabelę. obejmuje wiersze nagłówkowe, — właściwe dane, a — podsumowanie. Dzięki nim można np. powtarzać nagłówek na kolejnych stronach wydruku albo niezależnie przewijać treść. Przeglądarki i tak same tworzą , jeśli go pominiesz, ale jawne dodanie tych sekcji daje kontrolę nad strukturą. Warto też pamiętać, że musi występować po w kodzie, mimo że wizualnie pojawia się na dole.

Jak to wdrożyć bez przepisywania całego projek

Warto pamiętać o gap, bo odstępy liczą się do dostępnej szerokości i zmniejszają liczbę kolumn. Jeśli kontener ma padding, też zabiera miejsce i wpływa na wynik. Przy kartach o zmiennej treści dodaj grid-auto-rows: 1fr, żeby wiersze nie rozjeżdżały się na różne wysokości. Do tego min-width: 0 na samej karcie, inaczej długi tekst albo obrazek potrafi rozepchnąć tor i zepsuć cały układ.

Podstawowy zapis wygląda tak: grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));. Przeglądarka sprawdza, ile kolumn o minimalnej szerokości 240 px zmieści się w kontenerze, a resztę wolnego miejsca rozdziela po równo między nie dzięki 1fr. Gdy kontener ma 1000 px, powstaną cztery kolumny po 250 px. Gdy zwęzi się do 700 px, zostaną dwie. Żadnego progu nie trzeba wpisywać ręcznie.

Najczęstsze błędy to pominięcie rodzaju ogólnego, wpisanie go na początku listy oraz używanie nazw, które nie są rodzajami ogólnymi. Zapis font-family: sans-serif, Arial; sprawia, że Arial nigdy nie zostanie użyty, bo przeglądarka zatrzyma się już na pierwszym poprawnym wpisie. Podobnie zapis font-family: Arial, sans-serif, serif; jest nieszkodliwy, ale drugi rodzaj ogólny nigdy nie zadziała — liczy się tylko pierwszy napotkany.