Nauka pisania układów CSS może być trudna, szczególnie jeśli dobrze znasz tabele, aby tworzyć ciekawe układy stron internetowych. Ale podczas gdy HTML5 dopuszcza tabele do układu, nie jest to dobry pomysł.
Tabele są niedostępne
Podobnie jak wyszukiwarki, większość czytników ekranu czyta strony internetowe w takiej kolejności, w jakiej są wyświetlane w kodzie HTML, a tabele mogą być bardzo trudne do przeanalizowania przez czytniki ekranu. Dzieje się tak dlatego, że treść w układzie tabeli, gdy jest liniowa, nie zawsze ma sens, gdy czyta się od lewej do prawej i od góry do dołu. Ponadto, w przypadku zagnieżdżonych tabel i różnych zakresów w komórkach tabeli może to bardzo utrudnić znalezienie strony.
To jest powód, dla którego specyfikacja HTML5 zaleca wobec tabel dla układu i dlaczego HTML 4.01 go uniemożliwia. Dostępne strony internetowe pozwalają większej liczbie osób korzystać z nich i są znakiem profesjonalnego projektanta.
Za pomocą CSS możesz zdefiniować sekcję jako należącą po lewej stronie strony, ale umieść ją jako ostatnią w kodzie HTML. Następnie czytniki ekranu i wyszukiwarki będą czytać najważniejsze części (zawartość), a na końcu - mniej ważne części (nawigacja).
Stoły są trudne
Nawet jeśli utworzysz tabelę z edytorem stron internetowych, twoje strony internetowe będą nadal bardzo skomplikowane i trudne do utrzymania. Z wyjątkiem najprostszych projektów stron internetowych, większość tabel układów wymaga użycia wielu atrybutów i tabel zagnieżdżonych.
Budowanie stołu może wydawać się łatwe, kiedy to robisz, ale gdy już to zrobisz, musisz go utrzymać. Sześć miesięcy w dół może nie być tak łatwe do zapamiętania, dlaczego zagnieżdżono tabele lub ile komórek było z rzędu i tak dalej. Nie wspominając o tym, że jeśli utrzymujesz strony internetowe jako członek zespołu, musisz wyjaśnić wszystkim, w jaki sposób działają tabele, lub oczekiwać, że zajmą one więcej czasu, gdy będą musieli wprowadzić zmiany.
CSS może być również skomplikowany, ale zachowuje oddzielną prezentację od HTML i znacznie ułatwia utrzymanie jej na dłuższą metę. Dodatkowo, dzięki układowi CSS możesz napisać jeden plik CSS i stylizować wszystkie swoje strony tak, aby wyglądało tak. Następnie, gdy chcesz zmienić układ witryny, wystarczy zmienić jeden plik CSS, a cała witryna się zmienia - nie trzeba już przechodzić przez kolejne strony, aby zaktualizować tabele, aby zaktualizować układ.
Tabele są nieelastyczne
Chociaż możliwe jest tworzenie układów tabel o szerokościach procentowych, często są one wolniejsze do załadowania i mogą znacząco zmienić wygląd układu. Ale jeśli użyjesz określonych szerokości dla swoich tabel, otrzymasz bardzo sztywny układ, który nie będzie dobrze wyglądać na monitorach, które różnią się od siebie.
Tworzenie elastycznych układów, które dobrze wyglądają na wielu monitorach, przeglądarkach i rozdzielczościach, jest stosunkowo łatwe. W rzeczywistości przy zapytaniach o media CSS można tworzyć osobne projekty dla ekranów o różnych rozmiarach.
Zagnieżdżone tabele ładują się wolniej niż CSS dla tego samego projektu
Najczęstszym sposobem tworzenia fantazyjnych układów z tabelami jest "zagnieżdżanie" tabel. Oznacza to, że jedna (lub więcej) tabela jest umieszczona wewnątrz innej. Im więcej tabel jest zagnieżdżonych, tym dłużej trwa przeglądanie strony przez przeglądarkę.
W większości przypadków układ tabeli wykorzystuje więcej znaków do stworzenia niż projekt CSS. A mniej znaków oznacza mniej do pobrania.
Tabele mogą zranić Search Engine Optimization
Najczęstszy stworzony układ tabeli ma pasek nawigacji po lewej stronie i główną treść po prawej stronie. Podczas korzystania z tabel (zazwyczaj) wymaga to, aby pierwszą treścią wyświetlaną w kodzie HTML był lewy pasek nawigacyjny. Wyszukiwarki klasyfikują strony na podstawie treści, a wiele wyszukiwarek określa, że treść wyświetlana u góry strony jest ważniejsza niż inne treści. Tak więc strona z nawigacją po lewej stronie będzie wyglądać tak, jakby miała mniejszą zawartość niż nawigacja.
Używając CSS, możesz umieścić ważną treść najpierw w swoim kodzie HTML, a następnie użyć CSS, aby określić, gdzie powinien on zostać umieszczony 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 drukują
Wiele wzorów tabel nie drukuje dobrze, ponieważ są one po prostu zbyt szerokie dla drukarki. Aby je dopasować, przeglądarki odetną tabele i wydrukują poniższe sekcje, co spowoduje powstanie bardzo niejednorodnych stron. Czasami pojawiają się strony, które wyglądają dobrze, ale brakuje całej prawej strony. Inne strony będą drukować sekcje na różnych arkuszach.
Za pomocą CSS możesz utworzyć oddzielny arkusz stylów tylko do drukowania strony.
Tabele dla układu są nieważne w HTML 4.01
Specyfikacja HTML 4 stwierdza: "Tabele nie powinny być używane wyłącznie jako sposób na układanie treści dokumentu, ponieważ może to powodować problemy podczas renderowania na nośnikach niewizualnych."
Tak więc, jeśli chcesz napisać prawidłowy HTML 4.01, nie możesz używać tabel do układu. Należy używać tabel 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ł reguły, a teraz tabele dla układu, choć niezalecane, są teraz uważane za poprawny HTML. Specyfikacja HTML5 stwierdza: "Tabele nie powinny być używane jako pomoce układu". Wynika to z faktu, że tabele dla układu są trudne do odróżnienia przez czytniki ekranu, jak wspomniano wcześniej.
Używanie CSS do pozycjonowania i układu stron to jedyny poprawny sposób HTML 4.01, aby uzyskać projekty używane do tworzenia tabel, a HTML5 zdecydowanie zaleca tę metodę.
Tabele dla układu mogą wpłynąć na twoje szanse na pracę
Ponieważ coraz więcej nowych projektantów uczy się HTML i CSS, twoje umiejętności budowania układów stołów będą coraz mniejsze. Tak, to prawda, że klienci zazwyczaj nie podają dokładnej technologii, której należy użyć do budowy swoich stron internetowych, ale żądają takich rzeczy, jak:
- Dostępne strony internetowe: projekty, które mogą być przeglądane przez czytniki ekranu, są narzucane przez wiele krajów, a korporacje coraz częściej dostrzegają dostępność.
- Obsługiwane strony internetowe: projekty, które można zabrać ze sobą, nawet jeśli nie zamierzasz ich utrzymać w przyszłości.
- Elastyczne projekty: projekty działające w wielu przeglądarkach, rozdzielczościach i urządzeniach.
- Szybkie pobieranie stron: szybkość staje się coraz ważniejsza, nawet w SEO.
- Projekty do druku: strony drukowane bez specjalnych skryptów lub dodatkowych stron.
Jeśli nie możesz dostarczyć tego, o co proszą klienci, przestaną przychodzić do ciebie po projekty - okres. Czy naprawdę możesz pozwolić swojej firmie cierpieć, ponieważ nie chcesz uczyć się i stosować techniki, która była używana od późnych lat dziewięćdziesiątych?
Morał: Naucz się używać CSS
CSS może być trudny do nauczenia, ale wszystko, co warte zachodu, warte jest wysiłku. Nie utrzymuj swoich umiejętności w stagnacji. Naucz się CSS i twórz strony internetowe w sposób, w jaki miały być zbudowane - z CSS dla layoutu.
