Sideshow barker

Dlaczego układ na tabelkach jest głupi:

opis problemu i jego rozwiązania

Tabele w HTML powstały, aby spełniać jedno określone zadanie: pokazywać dane tabelaryczne. Niestety, twórcy stron odkryli, że dzięki border="0" mogą wykorzystać tabele jako siatkę, według której układają elementy strony. Wciąż jest to najpopularniejszy sposób budowania stron internetowych, przeszkadzający w uczynieniu Sieci lepszą — bardziej dostępną, elastyczną i użyteczną. Zobacz, skąd się bierze problem i poznaj metody przestawienia się częściowo lub całkowicie na układ pozbawiony (niewłaściwie użytych) tabel.

Yuppie holding a cigar

Idź po szefa

Są jakieś "szychy" na widowni? Może uczestniczą w jednym z seminariów, tu na Seybold? Idź po nich. Oni muszą się dowiedzieć, jak dzięki standardom sieciowym mogą zaoszczędzić pieniądze waszej firmy.

Plumber with a toliet plunger

Co mi po tym?

Pokażemy Ci sposób, który spowoduje, że:

Wyjaśnimy też, że budowanie stron za pomocą CSS (Kaskadowych Arkuszy Stylów) wymaga innego spojrzenia na treść i wygląd strony.

Man in a top hat, tuxedo, and white tie

"Zabójcze" strony: zagnieżdżone tabelki i jednopikselowe GIF-y

Na początku Internet służył do wymiany informacji między uczelniami i wojskiem. Nie minęło wiele czasu, nim ambitni wizjonerzy zdali sobie sprawę, że to nowe medium idealnie nadaje się do sprzedawania wszystkiego, od warzyw i psiej karmy, aż po używane samochody i relacje sportowe "na żywo".

W tamtych czasach strony Internetowe były zbyt prymitywne i ubogie graficznie, aby przyciągać konsumentów - aż do czasu, gdy (około roku 1997) David Siegel opublikował przełomową książkę opisującą sprytne obejścia ograniczeń przeglądarek i standardów (mowa o Netscape 2 i 3!).

Te obejścia były na tyle pomysłowe, że do dziś pozostały powszechną metodą budowania stron internetowych.

Mad scientist hatches his evil plot

Kłopoty z tabelkami:

Preacher testifying to the mortal danger of using tables for layout

Zbawienie jest w zasięgu ręki

Współczesne przeglądarki dużo lepiej radzą sobie z wyświetlaniem standardowych technologii WWW i nie trzeba się już uciekać do dawnych sztuczek.

Zamiast umieszczać tabelki w tabelkach, wypełniając komórki niewidocznymi GIF-ami i twardymi spacjami, można użyć o niebo prostszego kodu i za pomocą CSS nadać mu efektowny wygląd, tworząc przepiękne strony, które ładują się szybciej, są łatwiejsze w utrzymaniu i przebudowie oraz dostępne dla wszystkich.

Boxer exhausted between rounds of a fight

Rozwiązanie: CSS i kod odzwierciedlający strukturę dokumentu

Używając właściwego kodu HTML, który określa strukturę (nie wygląd!) treści oraz opierając układ strony wyłącznie na CSS, możesz utrzymać treść strony niezależną od sposobu, w jaki jest ona prezentowana.

To ma liczne zalety w porównaniu do tabelek...

Film director shouting at his crew

Przebudowa jest prostsza i tańsza

Zmiana wyglądu stron oczyszczonych z kodu odpowiadającego za prezentację jest o wiele mniej pracochłonna (i o wiele tańsza). Aby zmienić wygląd i układ elementów stron, wystarczy poprawić arkusz stylów; w ogóle nie ma potrzeby edytować samych stron!

Dla przykładu obejrzyj CSS Zen Garden albo przełącznik stylów na stronie Erica Meyera. Aby dowiedzieć się więcej, przeczytaj artykuł Paula Sowdena Alternative Style.

Reporter grilling a lawmaker about his website

Ruch w sieci nie jest za darmo

Używanie współczesnych, standardowych technologii WWW pozwala zmniejszyć objętość plików tworzących Twoje strony, ponieważ użytkownicy nie będą musieli już ściągać danych prezentacyjnych z każdą odwiedzaną stroną. Arkusze stylów są przechowywane w pamięci podręcznej przeglądarki, więc nie będą ściągane za każdym razem.

Mniejsze pliki to mniej danych do ściągnięcia, czyli szybsze otwieranie się stron i niższe koszty utrzymania serwisu.

Sweating orchestra conductor

Hej, te wszystkie strony pasują do siebie!

Stosowanie standardów WWW ułatwia utrzymanie spójnego wyglądu całej witryny. Ponieważ wszystkie strony korzystają ze wspólnego arkusza stylów, wszystkie ich elementy, nawet najdrobniejsze, są tak samo sformatowane.

To wzmacnia Twoją markę i czyni witrynę bardziej użyteczną.

Cowboy talking about the importance of accessibility

Piszesz raz, stosujesz wszędzie, dla każdego

Opieranie się o współczesne standardy WWW powoduje, że Twoje strony są bardziej dostępne dla osób niepełnosprawnych oraz dla różnego rodzaju przeglądarek w telefonach komórkowych i PDA.

Użytkownicy przeglądarek czytających strony na głos (a także ci mający wolne łącza) nie muszą brnąć przez niezliczone komórki tabel i zapychające je GIF-y, aby dostać się do właściwej treści Twoich stron.

Innymi słowy, treść oddzielona od warstwy prezentacyjnej jest niezależna od urządzenia, które będzie ją przedstawiać użytkownikowi.

Woman freaking out because her markup is ruining her SEO

Google jest ślepy

Jeśli już jesteśmy przy dostępności: zminimalizowanie kodu twojej strony i używanie poprawnej struktury (nagłówków) podniesie Twoje notowania w wyszukiwarkach.

Poprawienie proporcji treści do kodu, używanie nagłówków będących dobrym źródłem słów kluczowych i zastąpienie tekstu na obrazkach prawdziwym (ostylowanym) tekstem pomoże twoim stronom uzyskać lepsze wyniki w wyszukiwarkach.

Construction worker committed to using his old tools

Kompromis: nadal możesz użyć tabel, jeśli potrzebujesz, tylko nie przesadzaj

To pomoże użytkownikom (i szefom) przywiązanym do przestarzałych przeglądarek zobaczyć strony wyglądające podobnie do tego, co widzi reszta świata.

Overconfident yuppie not worried about his code

Ot, całkiem ładna tabelka

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.
Suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
•At vero eros et accumsan et iusto odio dignissim qui blandit
•Praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
•Epsum factorial non deposit quid pro quo hic escorol.
•Olypian quantels et gomilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay.
Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed.
•Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
•Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore.
Bellboy struggling

A co pod spodem?

Można było to zrobić o wiele prościej.Zgadnij jak dużo zajmuje kod tej tabelki... 13.7 KB! To coś ma 17 rzędów i 9 kolumn, nie wspominając o naszpikowaniu niewidocznymi GIFami.
Dużo za dużo tu komórek tabel i GIF-ówWszystkie kropkowane ramki są komórkami tabel z ustawionym niestandardowym atrybutem background.
•Zagnieżdżona tabelka? Po co?
•Żeby zrobić listę wypunktowaną? Chyba żartujesz...
Do zrobienia tego wszystkiego wystarczy najprostsza 8-komórkowa tabela i 4 reguły CSS.Serio. 8 komórek i 4 reguły CSS to wszystko, czego tu potrzeba.
•O nie, następna tabelka udająca listę wypunktowaną.
•Po prostu zaznacz, że listy są listami, a resztą niech zajmie się CSS.
Potrzeba po jednej regule dla <table>, <td>, <ul> i <li>.To wszystko. Robisz to raz i masz.
•To jest lepsze niż tworzenie dodatkowych 8 komórek tabeli, by podrobić listę wypunktowaną, która okazuje się być mało dostępna.
•Doskonale. Wreszcie koniec tych podróbek!

Kod, który uwidacznia strukturę powyższej tabeli:

table{ margin:3px; padding:2px; border:solid 2px blue }

td{ padding:2px; border-style: solid; border-width: 1px; border-color:gray gray silver silver }

Man telephoning his co-worker in a panic

O wiele lepiej

dużo lepiejWiesz ile zajmuje ta tabelka? 2.1 KB. 4 rzędy, 2 kolumny, żadnych wypełniaczy z GIF-ów.
tak, jak należyWszystkie ramki zrobione za pomocą CSS są jak najbardziej poprawne
  • To jest punkt listy,
  • zrobiony jak należy
Wszystko to to 8 komórek i 4 reguły CSS.Poważnie. 8 komórek, 4 reguły CSS, to wszystko czego trzeba.
  • Niech żyją listy wypunktowane!
  • Czemu byś nie miał oznaczyć list jako list i kazać CSS-owi zająć się resztą?
Wystarczy po jednej regule dla <table>, <td>, <ul> i <li>.Robisz to raz i masz.
  • Nie ma to jak porządne listy.
  • Nigdy więcej podróbek!

A oto kod, który pozwolił pozbyć się balastu z tabeli:

table{ border-bottom:1px dotted fuchsia; border-left:1px dotted fuchsia }

td{ padding:11px 20px 20px 11px; border-top:1px dotted fuchsia; border-right:1px dotted fuchsia }

ul { margin-top:10px; margin-bottom:10px; margin-left:0; padding-left:1em }

li{ margin-bottom:10px }

Policeman signaling for us to stop and think

Odchudzanie starych projektów

Używaj właściwości CSS takich jak margin i padding zamiast nadmiarowych komórek tabel i wypełnień z GIF-ów czy twardych spacji.

Używaj tagu <link> i reguły @import. Link dla starszych przeglądarek, a @import dla nowoczesnych.

<link href="podstawowy.CSS" rel="stylesheet" type="text/css">

<style type="text/css" media="screen"><!--
@import url(nowoczesny.CSS) screen;
--></style>

Przykłady z życia wzięte:

To nie wszystko:

Więcej o projektowaniu pod różne przeglądarki dowiesz się z książek Eric Meyer on CSS (CSS według Erica Meyera. Sztuka projektowania stron WWW) oraz Designing with Web Standards (Projektowanie serwisów WWW. Standardy sieciowe) Jeffreya Zeldmana.

Young coder realizing that he does not need to use tables for layout

Układy oparte o CSS: tu jest przyszłość

Większość dziś używanych przeglądarek ma dobre wsparcie dla CSS. Każda z nich ma swoje odchyły, ale gdy je poznasz, będziesz umiał je obejść.

Pisanie CSS jest proste, nawet dla takiego kolesia jak ja, który twierdzi, że JavaScript to czarna magia.

if(links[x].length > 0);{ for (y=0; y < links[x].length; y++) {

Każda reguła CSS ma selektor i deklarację. Deklaracja składa się z właściwości i jej wartości. Jeśli nazwa właściwości składa się z kilku słów, są one połączone myślnikami.

body {margin:0; padding:0}

.zobacz_takze {float:right; width: 15em; margin-left:1em; margin-bottom:1em; color:blue}

#stopka {color:gray; font-size:0.6em; line-height: 1.2em; background-color:white; margin:0}

Superhero flying to our rescue

Kod strukturalny: koduj co masz na myśli, myśl co kodujesz

Pisanie samego CSS jest dość proste, ale używanie CSS do stworzenia układu strony wymaga innego podejścia niż dotychczas.

Podczas projektowania zamiast myśleć w ramach "to postawimy tu, a to tam", trzeba myśleć o rodzajach informacji na stronie i jej strukturze.

Najważniejsze nagłówki zamykamy w tagu <h1>; te niższego poziomu oznaczamy <h2>, itd., a akapity (paragrafy) to po prostu <p>.

To się nazywa kodem "semantycznym" lub "strukturalnym".

Zamiast wrzucać treść w tabelki, podziel ją na sekcje div-ami. Nadaj im id (identyfikator) lub class (klasę), która dobrze opisuje ich zawartość lub funkcję, ale nie nawiązuje do wyglądu.

Chef preparing tag soup

Nie pisz po<b>a<br>anego kodu

Zastanów się, dlaczego każdy z elementów Twojej strony ma wyglądać tak, a nie inaczej. Twój kod może i powinien odzwierciedlać znaczenie tekstu, nawet dla tych, którzy nie mogą zobaczyć jego wizualnej reprezentacji. Kod semantyczny czyni strony dostępniejszymi dla wszystkich, łącznie z robotami wyszukiwarek.

Kiedy piszesz coś kursywą, robisz to dla podkreślenia ważności (<em>), czy może dlatego, że jest to tytuł książki (<cite>)?

Jeśli coś jest pogrubione, to może to nagłówek (<h1>), a może po prostu bardzo ważny fragment tekstu (<strong>)?

Jeśli jakiś element występuje w osobnej linii, najprawdopodobniej jest nagłówkiem. Jeśli to nie jest nagłówek, a powtarzający się element mający zawsze być w osobnej linii, nadaj mu klasę (class) i użyj CSS zamiast systematycznie dodawać <br>.

.foo {display:block}

Dowiedz się więcej z artykułu Bed and BReakfast markup (B&BR) autorstwa Tanteka Çelika.

Stressed worker worried about getting home to see her family

Czym są menu nawigacyjne

Logicznie rozumując menu nawigacyjne na Twojej stronie jest nieuporządkowaną listą linków.

Dlatego należy je zgrupować za pomocą listy nieuporządkowanej (tagiem <ul>).

Poziome menu

Lista linków nie wygląda jak menu, ale za wygląd jest odpowiedzialny CSS. Można nim w pełni kontrolować jak taka lista ma być wyświetlone na stronie.

Nadając właściwość display:inline można zrobić listę poziomą.

Oto kod powyższego menu:

#nav1{
margin-top:1em;
margin-bottom:0.5em;
}

#nav1 ul{
background-color:silver;
text-align:center;
margin-left:0;
padding-left:0;
border-bottom:1px solid gray
}

#nav1 li{
list-style-type:none;
padding:0.25em 1em;
border-left:1px solid white;
display: inline
}

#nav1 li:first-child{
border:none;
}

Pionowe menu

Oto kod dla niego:

#nav2 {
background-color:silver;
border:solid 1px gray;
width: 8em
}

#nav2 ul{
list-style-type:none;
margin:0;
padding:0;
border:none
}

#nav2 li{
margin:0;
padding:0.25em 0.5em 0.25em 1em;
border-top:1px solid gray;
width: 100%;
display: block
}

html>body #nav2 li{
width: auto;
}

#nav2 li:first-child{
border:none
}

Więcej informacji znajdziesz w artykule Marka Newhouse'a, Taming lists w magazynie A List Apart oraz Styling lists na wiki CSS-Discuss.

Evil villain mocking us

Rzeczy, w których tabelki sprawdzają się lepiej

Są rzeczy, które trudno osiągnąć przez CSS we wszystkich dzisiejszych przeglądarkach.

Na przykład gdy chcesz mieć boczną kolumnę z czarnym tłem, która rozciągnie się na całą wysokość strony. Przy układzie na tabelkach to łatwe - po prostu daj komórce czarne tło.

Można taki efekt zrobić w CSS, ale wymaga to innego podejścia.

div rozciąga się tylko do wysokości swojej zawartości. Zawartość bocznej "kolumny" zazwyczaj kończy się wyżej niż treść, więc proste ustawienie tła dla div nie spełni zadania.

Aby uzyskać taki efekt trzeba ustawić tło dla nadrzędnego elementu (np. <body>), które będzie udawało kolumnę. Jeśli masz inne plany co do wykorzystania tła body, to konieczne by było dodanie zbędnego div, a to nie jest zbyt dobry pomyśł z punktu widzenia semantyczności kodu.

Oczywiście w ten sposób nie da się zrobić tła dla kolumny o zmiennej szerokości.

Jak widać nie wszystko jest możliwe lub równie proste. Musisz ocenić, czy jest to ważniejsze niż rzeczy, które tabele komplikują i uniemożliwiają.

Friendly mailman

Plan migracji z tabel do standardów

Najpierw musisz opracować sobie strategię. Czy zmienisz całą witrynę naraz, czy będziesz konwertować strony pojedynczo lub działami?

Wyodrębnij strony, które najwięcej zyskają na konwersji, np. strona główna, czy informacje o nowych produktach. Najlepiej zacząć od tych stron.

Podziel stronę wg rodzaju informacji, np.:

Surgeon in the operating room

Podział stron

Gdy już masz podział całej witryny, czas na podzielenie poszczególnych stron na logiczne sekcje:

Wyszukaj tabele, które mają zbędne komórki, odstępy wymuszone GIF-ami, itp. (będą potem zamienione na div albo uproszczone do minimum)

Passive aggressive maid

Popatrz na swój kod

Po przeanalizowaniu struktury strony czas na zajrzenie "pod maskę" i wyszukanie prezentacyjnego HTML, który ma być zmieniony na strukturalny.

Fireman rescuing content

Zamień elementy prezentacyjne na strukturalne

Możesz używać Znajdź i zamień albo wyrażeń regularnych, ale najlepiej będzie po prostu otworzyć istniejącą stronę w przeglądarce i skopiować z niej cały tekst do edytora HTML.

Miej na uwadze strukturę swojej strony! Nie chodzi tutaj tylko o bezmyślną zamianę <b> na <strong>.

Jaki jest najważniejszy nagłówek strony? Oznacz go przez <h1>. Następne wg ważności oznaczaj przez <h2>, itd. Otocz paragrafy tagami <p>. Wrzuć menu nawigacyjne do listy <ul>.

Wybierz DOCTYPE i trzymaj się go. (Zalecamy XHTML transitional chyba, że masz ambicję ograniczyć się do XHTML strict.)

Clown

Podziel strony na logiczne sekcje

Najważniejsze elementy nawigacyjne zgrupuj razem w jedym tagu (np. div, ul) i nadaj mu id mainnav. Drugorzędną nawigację umieść podobnie z id lub klasą (class) subnav. Stopkę włóż do <div id="footer">, a właściwą treść strony umieść w <div id="content">.

Na tym etapie strona nie wygląda ciekawie, ale zacznie jak tylko nada się jej style.

Two superheroes

CSS czas zacząć

Na początek ustaw obwódkę wokół każdego div, np. div {border:1px dotted gray; padding:.5em} To pomoże Ci zorientować się gdzie się zaczynają, kończą i czy zawierają inne divy w sobie.

Zacznij pisanie CSS od selektorów dla elementów (<html>, <body>, <p>, <h1>, <h2>, <ul>, <li>, itp.)

Gdzie tylko możesz używaj selektorów kontekstowych, jak np. selektor potomka (descendant selector). To pomoże Ci utrzymać czysty kod bez nadużywania klas. Na przykład #subnav li{border:1px solid black; padding:.5em; display: inline} będzie dotyczyło tylko elementów listy wewnątrz elementu z id="subnav".

Koniecznie testuj kod w kilku przeglądarkach, aby nie wpaść w pułapkę polegania na błędzie jednej z nich.

Paparazzi

Przykładowe strony oparte o CSS

Newsboy selling newspapers

Do poczytania

Oczywiście nie da się w godzinę przedstawić wszystkich technik i tajników CSS, dlatego przydatne będą poniższe książki.

Painter at his easel

Papier? Na co komu papier!? Mamy Sieć!

CSS-Discuss
  • lista dyskusyjna: Bardzo aktywna, bardzo pomocna.
  • Wiki: "Wiki między innymi pełni rolę pamięci długoterminowej dla uczestników listy". Chcesz zaserwować Internet Explorerowi coś, co on zrozumie, a lepszym przeglądarkom porządny kod? Tu znajdziesz odpowiedź jak i inne cenne wskazówki.
  • Archiwa: Natrafiłeś na CSSowy kamień? Nie martw się, ktoś inny zapewne też na niego natrafił i już znaleziono rozwiązanie.
zeldman.com - The Daily Report
Odkrywcze, prowokujące do myślenia i dobrze napisane informacje (i linki) każdego dnia.
A List Apart
Dla ludzi tworzących strony
The Web Standards project
Chwała im.
CSS: A guide for the unglued
Świetna kolekcja linków.
CSS Layout Techniques: for Fun and Profit
Schamaty CSSowych układów stron, tutoriale i zbiór innych przydatnych rzeczy. Autor: Eric Costello.
Real World Style
Układy CSS, techniki, sztuczki i tipsy Marka Newhouse'a.
The Business Benefits of Web Standards
Współczesne standardy sieciowe przedstawione w sposób zrozumiały dla menedżera.
Worker asleep at his computer

Dziękuję za uwagę. Są jakieś pytania?

; Scott Design Inc

; Adobe Systems Incorporated

International Versions

We're going global! If English isn't your native language, check out our translations page. If you'd like to translate this into your native tongue, .

Creative Commons LicenseThis work is licensed under a Creative Commons License.

>
Scott Design