Nauka pisania CSS Układy mogą być trudne, zwłaszcza jeśli znasz się na używaniu tabel do tworzenia fantazyjnych układów stron internetowych. Ale kiedy HTML5 pozwala na układ tabel, to nie jest dobry pomysł.
Tabele nie są dostępne
Podobny do Wyszukiwarki, większość czytników ekranu odczytuje strony internetowe w kolejności, w jakiej są wyświetlane w kodzie HTML, a przeanalizowanie tabel może być bardzo trudne dla czytników ekranu. Treść w układzie tabeli, choć liniowa, nie zawsze ma sens, gdy czyta się ją od lewej do prawej i od góry do dołu. Ponadto zagnieżdżone tabele i różne rozpiętości komórek tabeli mogą utrudnić rozszyfrowanie strony.
To jest powód, dla którego Specyfikacja HTML5 odradza tabele do układu i dlaczego HTML 4.01 na to nie pozwala. Dostępne strony internetowe pozwalają na korzystanie z nich większej liczbie osób i są znakiem rozpoznawczym profesjonalnego projektanta.
Dzięki CSS możesz zdefiniować sekcję jako należącą do lewej strony strony, ale umieścić ją na końcu w kodzie HTML. Następnie czytniki ekranu i wyszukiwarki będą czytać ważne części (treść) jako pierwsze, a mniej ważne części (nawigacja) jako ostatnie.
Stoły są trudne
Nawet jeśli utworzysz tabelę za pomocą edytora internetowego, Twoje strony internetowe nadal będą skomplikowane i trudne w utrzymaniu. Z wyjątkiem najprostszych projektów stron internetowych, większość tabel układu wymaga użycia wielu atrybutów i tabel zagnieżdżonych.
Budowanie stołu może wydawać się łatwe, gdy to robisz, ale gdy to zrobisz, musisz go pielęgnować. Sześć miesięcy później może nie być tak łatwo zapamiętać, dlaczego zagnieździłeś tabele lub ile komórek znajdowało się w rzędzie i tak dalej. Nie wspominając o tym, że jeśli zarządzasz stronami internetowymi jako członek zespołu, musisz wyjaśnić wszystkim zaangażowanym, jak działają tabele, lub oczekiwać, że poświęcą więcej czasu, gdy będą musieli wprowadzić zmiany.
CSS może być również skomplikowany, ale utrzymuje prezentację oddzielnie od treści i znacznie ułatwia utrzymanie na dłuższą metę. Dodatkowo, dzięki układowi CSS możesz napisać jeden plik CSS i nadać styl wszystkim stronom, aby wyglądały w ten sposób. Następnie, gdy chcesz zmienić układ swojej witryny, po prostu zmieniasz jeden plik CSS, a całość zmiany w witrynie — nie trzeba już przechodzić przez każdą stronę pojedynczo, aby zaktualizować tabele, aby zaktualizować układ.
Tabele są nieelastyczne
Chociaż możliwe jest tworzenie układów tabel z szerokościami procentowymi, często ładują się one wolniej i mogą radykalnie zmienić wygląd układu. Ale jeśli użyjesz określonych szerokości dla swoich stołów, otrzymasz bardzo sztywny układ, który nie będzie dobrze wyglądał na monitorach o innych rozmiarach niż twój.
Tworzenie elastycznych układów, które dobrze wyglądają na wielu monitorach, przeglądarkach i rozdzielczościach, jest stosunkowo łatwe. W rzeczywistości za pomocą zapytań o media CSS można tworzyć oddzielne projekty dla ekranów o różnych rozmiarach.
Tabele szkodzą optymalizacji pod kątem wyszukiwarek
Najpopularniejszy układ tworzony w tabeli wykorzystuje pasek nawigacyjny po lewej stronie strony i główną zawartość po prawej stronie. W przypadku korzystania z tabel to podejście (zazwyczaj) wymaga, aby pierwszą zawartością wyświetlaną w kodzie HTML był pasek nawigacyjny po lewej stronie. Wyszukiwarki kategoryzują strony na podstawie treści, a wiele wyszukiwarek określa, że treść wyświetlana na górze strony jest ważniejsza niż inne treści. Tak więc strona z nawigacją po lewej stronie będzie miała treść, która jest mniej ważna niż nawigacja.
Korzystając z CSS, możesz umieścić ważną treść najpierw w swoim HTML, a następnie użyć CSS, aby określić, gdzie powinna zostać umieszczona w projekcie. Oznacza to, że wyszukiwarki najpierw zobaczą ważną treść, nawet jeśli projekt umieści ją niżej na stronie.
Tabele nie zawsze dobrze się drukują
Wiele projektów stołów nie drukuje się dobrze, ponieważ są po prostu zbyt szerokie dla drukarki. Tak więc, aby je dopasować, przeglądarki odcinają tabele i drukują poniższe sekcje, co skutkuje rozłącznymi stronami. Czasami kończysz ze stronami, które wyglądają dobrze, ale brakuje całej prawej strony. Inne strony będą drukować sekcje na różnych arkuszach.
Dzięki CSS możesz utworzyć osobny arkusz stylów tylko do drukowania strony.
Tabele układu są nieprawidłowe w HTML 4.01
Stany specyfikacji HTML 4: „Tabele nie powinny być używane wyłącznie jako środek do układania treści dokumentu, ponieważ może to stwarzać problemy podczas renderowania na nośnikach niewizualnych”.
Tak więc, jeśli chcesz napisać poprawny HTML 4.01, nie możesz używać tabel do układu. Tabele należy używać tylko do danych tabelarycznych, a dane tabelaryczne ogólnie wyglądają jak coś, co można wyświetlić w arkuszu kalkulacyjnym lub ewentualnie w bazie danych.
Jednak HTML5 zmienił zasady i teraz tabele układu, chociaż nie jest to zalecane, są uważane za prawidłowy kod HTML. Specyfikacja HTML5 mówi: „Tabel nie należy używać jako pomocy w układzie”. Dzieje się tak, ponieważ, jak wspomniano wcześniej, czytniki ekranu mają trudności z rozróżnieniem tabel układu.
Używanie CSS do pozycjonowania i układania stron jest jedynym prawidłowym sposobem HTML 4.01 na uzyskanie projektów, których używałeś do tworzenia tabel, a HTML5 również zdecydowanie zaleca tę metodę.