Strona używa cookies (ciasteczek). Dowiedz się więcej o celu ich używania i zmianach ustawień. Korzystając ze strony wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki.    X

Przyjaciół trzymaj blisko, a tabele htmlowe jeszcze bliżej...

Ten zły, ten dobry i ten obojętny… Tag «table» to bez wątpienia największy twórca kontrowersji w Internecie. Bywało z nim różnie, ale chłopak wciąż się trzyma dzielnie i mam nadzieje, nie prędko umrze… ale powoli się na to zanosi. A drugiego takiego jak on, to nie znajdziemy.

I'm «table», «tr» «td» «table».

Parafrazując słynnego Agenta Jej królewskiej Mości.
«table» to bez wątpienia agent do zadań specjalnych, choć w przeciwieństwie do alkoholi Bonda miesza, ale nie wstrząsa młodymi twórcami stron. Tag ten pojawił się dawno, dawno temu gdy strony HTML jeszcze miały formę podłużną wertykalną. Służył on do jednego i był w tym bardzo dobry - tworzył tabele. Szok! Ale nie kłamie. Oryginalnym zamysłem twórców tego niezbyt intuicyjnego w użyciu tagu było prezentowanie treści tabelarycznej. Co to jest treść tabelaryczna chyba mówić nie musze.

Z początku wydaje się, iż sposób w jaki działa «table» jest niezwykle skomplikowany. Do momentu w którym go zrozumiemy... a wtedy, wydaje się banalny. Moglibyśmy wręcz pomyśleć, że innego sposobu nie ma, aby w zawiłym Internecie, w sposób formalny zapisać tabele, którą chcemy pokazać innym.

Znacznik «table» do tej pory pozostaje lekko enigmatycznym stworzeniem, które gdy już wydaje się, że je pojęliśmy, zaskakuje nas czymś nowym. Zwłaszcza młodych adeptów ciemnej strony html'a.

Ja nie potrafię? Ja nie potrafię!? Daj strzelbę!

Pewnego dnia, ktoś, aby mu kastracja miłą była, wpadł na pomysł aby strona internetowa była ładna, i nie było by w tym nic zdrożnego, gdyby nie to, że nie miał żadnych środków, aby tę wspomnianą ładność uzyskać.
Ale co to… przecież można by użyć tabel do stworzenia schematu wyglądu, powstawiać w komórki elementy i jak to mawiają polscy francuzi - wuala!

Przychodzi MacGyver do sklepu i mówi do ekspedientki
- Poproszę skrzynkę z narzędziami.
- Nie mamy.
- To poproszę «table» «tr» «td».

Żarty, żartami, ale przez ostatnie kilka lat Internet cierpiał. Wszyscy domorośli i nie tylko, tfórcy stron WWW korzystali z tabeli jako złotego rogu na wszelkie bolączki.

Przycisk ma być po prawej stronie. Tabela!
Obrazek na lewo od tekstu. Tabela!
Podpis pod obrazkiem. Tabela!
Lista numerowana. Tabela, Tabela i jeszcze raz wielka, ogromna, wolno renderująca się i niezrozumiała dla normalnych ludzi Tabela! Oł je!

Nikt nic nie miał przeciwko temu, bo nie było niczego innego. Tabela poganiała tabele… do czasu.

Lepiej mieć wróbla w garści niż tabele na dachu.

Pojawił się on. Był przystojny, nienagannie ubrany, dobrze wychowany. CSS.

Mimo iż istniał od zarania dziejów internetowych (no dobra, od 96r) był przez długi okres czasu nielubiany. Sam pamiętam te czasy. (Wow, stary jestem ;p) Każdy wtedy myślał, że ten "kaskadowy coś tam coś tam" to jakiś straszny stwór, którego nie warto się uczyć, bo po co on, wszystko można uzyskać dzięki tabelom.

Przyszła jednak moda na to aby odsunąć - i słusznie - tabele od generowania wyglądu i użyć zaprojektowanego tylko po to języka. Nastała era divów, paragrafów, floatów i positionów absolutów. Teraz, jeśli tworzysz strony WWW w oparciu o tabele to albo przybyłeś wehikułem czasu z przeszłości, albo bierzesz nie te leki co trzeba. Nawet wszystkie książki Helionu promują ten styl, a są wydawane przecież z kilkuletnim opóźnieniem ;)

Divy są trendy… ale nie tylko.
Strona oparta na divach, paragrafach, listach i stylach CSS jest nie tylko wgrywana szybciej (bo ma mniej kodu), ale tez renderowana szybciej przez przeglądarki. Jest to niezwykle istotne w aktualnych czasach. Dodatkowo tak stworzony layout dokumentu internetowego można bardzo szybko (podmieniając jeden plik) zmienić kompletnie nie do Warszawy… znaczy się, nie do poznania.
Pomijam już całkowicie takie oczywistości jak lepsze wyniki w wyszukiwarkach, bo nie każdemu może na tym zależeć.

- Zimno mi. Tak zimno. Nie czuje «td»'ków. O mój Boże, nie czuje «td»'ków! Ja umrę, prawda? Spójrz mi prosto w oczy i powiedz, umrę, prawda?

Niestety tabelo. Umrzesz.

Z ludźmi jest czasem tak, że jak im dasz kamień do zabicia jelenia, oni zabiją swojego przyjaciela. Jak im dasz energie z atoma, to oni zbudują bombę. Podobnie jest aktualnie teraz z divami i CSSem. Doszliśmy bowiem do sytuacji w której, nikt o zdrowych zmysłach nie używa tabel do tworzenia schematu strony - ale ku memu zdziwieniu, jest to również sytuacja w której nikt już prawie nie używa tabel. Nawet do generowania na stronie tabel.

A owszem, w końcu dzięki kaskadowym arkuszom stylów możemy sprawić aby każdy paragraf był traktowany jako komórka tabeli, a div je otaczający jak samą tabelę. Co w gruncie rzeczy złe nie jest, bo z tekstowej reprezentacji możemy jedną podmianą pliku przejść na reprezentacje ułożoną w wygląd tabelaryczny. Ale na litość boską jak macie tabele z danymi to używajcie do tego «table» bo po to on służy.

No właśnie, na litość boską…

Używajcie tabel - zgodnie z ich przeznaczeniem. Bo tabela nie jest zła, ona miała tylko trudne dzieciństwo i tak naprawdę jest fajnym znacznikiem, który jeśli dobrze go poznacie, to nigdy was nie zdradzi i nie zawiedzie, bo co jak co, ale «table» każda przeglądarka renderuje dobrze.

No tak, tylko kiedy tak naprawdę użyć jej - TEJ tabeli? Przecież jest ona wielka, i tak trudno coś innego z nią zrobić niż tylko wypisać dane w tabelce.

Bingo!

Czasem bywa iż, potrzebujemy wypisać listę osób w formie tabelki z imionami, nazwiskami, emailami, numerami telefonów itp. Myślicie, że najlepszym wyjściem jest zagnieżdżanie divów, paragrafów i spanów, dawanie im id, klas oraz styli? Skądże - używając tabeli i prostych CSSów można stworzyć cudownie wyglądające zestawienia danych gdziekolwiek na stronie, bez konieczności zapamiętywania ajdików i zmyślnych nazw klas.

Podsumowanie.

Po co był ten przydługi wpis? Całość mogłem zawrzeć w dwóch zdaniach, ale nie miał bym wtedy możliwości przelania swoich frustracji odnośnie sposobu użycia divów do niecnych rzeczy, które tabela robi od ręki. A jeśli doczytałeś aż tutaj, to albo się nudziłeś, albo Ci się podobało… jak by nie było, zapraszam ponownie.

PS. Czemu nie mogę używać znaczników < i > na blagu? Rozumiem, że nie mogę htmlować, no ale bez przesady.  

Komentarze

0 nowych
fenixproductions   6 #1 25.06.2010 11:37

Rozumiem przekleństwo budowania wyglądu przy użyciu tabel, ale niekiedy zagęszczenie DIVów potrafi być o wiele mniej użyteczne.

Np. fajnym projektem wydaje się "960 CSS", ale przy większych stronach powstać może po prostu śmietnik.

Z drugiej strony chyba wszystko potrafi zgrabnie obslużyć tabele*, czego o CSS powiedzieć nie można.

*) nie dotyczy Outlook 2007/2010

Meszuge   16 #2 25.06.2010 11:38

„Całość mogłem zawrzeć w dwóch zdaniach…” – absolutnie się nie zgadzam. Dwa by nie wystarczyły. Niezbędne są cztery. :-)

Strona zbudowana w oparciu o kaskadowe arkusze stylów, zamiast tabel, szybciej się wczytuje i szybciej jest renderowana przez przeglądarki – tak, pewnie tak. Ale zastanawiam się nad jednym, jaka jest realna różnica w czasie tego renderowania i wczytywania przy proceszorze 3,16 MHz i Internecie 25-50 Mb/s, czyli wcale nie tym najszybszym oferowanym choćby przez UPC?
Jeśli nawet o to chodziło, to dość dawno temu. A dziś? Chyba raczej wygoda w zarządzaniu wyglądem strony, a raczej stron – gdy w serwisie jest ich już kilkaset. W takiej sytuacji faktycznie łatwiej jest mi zmienić coś w jednym .css niż w stu plikach .html.

Ale jest jeszcze coś, o czym nie wspomniałeś, a chyba warto: można, i to bez najmniejszego problemu, napisać bardzo zły kod (czyli spier… robotę) bez względu na to, czy używa się tabel czy div-ów.

  #3 25.06.2010 11:45

Napisałem swego czasu podobny tekst: http://zadzior.wordpress.com/2009/11/28/pani-wiesia-robi-tabelki-w-mbanku/
chociaż dla mnie tematem przewodnim jest accessibility.

kuhar   4 #4 25.06.2010 11:55

"...w czasie tego renderowania i wczytywania przy proceszorze 3,16 MHz "

toż to bestia, a nie procesor :)

matmaxalez   3 #5 25.06.2010 11:59

"Żarty, żartami, ale przez ostatnie kilka lat Internet cierpiał. Wszyscy domorośli i nie tylko, tfórcy stron WWW korzystali z tabeli jako złotego rogu na wszelkie bolączki. "

taaa xDD hahahahah tfórcy

Lisek REDAKCJA  13 #6 25.06.2010 12:09

@MaXDemage - rzeczywiście problem z ewentualnym HTML itp robi się coraz większy. Więc postanowiłem, że znaczniki będą dopuszczone, jednak tylko w celach prezentacji, tak jak to jest u Ciebie we wpisie, nie będzie natomiast możliwości formatowania nimi opisu.

  #7 25.06.2010 12:28

Świetny tekst. Ogólnie, to obecnie nastała moda na div'owanie i span'owanie. Wszystko przez to, że internet po przejściu na XHTML i CSS-a się nie rozwijał(wszyscy pewnie wiedzą czemu)... Miało być jednak pięknie i schematycznie, więc bez żadnych div'ów i span'ów, a wyszło znowu źle.

HTML5 jest, moim zdaniem, krokiem wstecz.

soanvig   10 #8 25.06.2010 13:40

Niezły, ale ma dziwaczne przesłanie. Powiem coś od siebie: tabele są do danych tabelarycznych, nie do wyglądu. Od wszelkiego wyglądu jest CSS. I pamiętajmy, aby używać znaczników zgodnie z zastosowaniem tzn. div służy to umieszczania informacji w jednym bloku, p to akapit, tabela to tabela a nie cała strona. Jeśli się umie robić dobrze strony to nie walnie się 1500 100 900 divów (co tak naprawdę przedłuży ładowanie strony bardziej niżeli setki )

soanvig   10 #9 25.06.2010 13:41

poprawka: bardziej niżeli >

przemo_li   11 #10 25.06.2010 13:47

Sytuacja jak z goto :)
'Goto considered harmful'
''Goto considered harmful' considered harmful'

przemo_li   11 #11 25.06.2010 13:48

+1 niezły wpis

MaXDemage   18 #12 25.06.2010 17:45

@Meszuge |
Realana szybkość renderowania... hmm, mam gdzieś odnośnie tego przygotowany wpis blagowy, ale wciąż w powijakach. W skrócie - nie jest to istotne, pod warunkiem, że przeglądasz tylko 1 stronę na raz. Ale w erze wielozakładkowych przeglądarek gdy odpalmy 10 zakładek w tle, szybkość renderowania strony (i tym samym jej optymalizacja) jest ważniejsza niż 20 lat temu gdy wszyscy hasali na dialupie.

"Ale jest jeszcze coś, o czym nie wspomniałeś, a chyba warto: można, i to bez najmniejszego problemu, napisać bardzo zły kod (czyli **** robotę) bez względu na to, czy używa się tabel czy div-ów."

Amen bracie. Amen.
---
@Jacek Zadrożny (niezalogowany)
Widać mnie niejednego szlag trafia jak widzę tabele zrobione z divów. :D

---
@notgnucy
Odnośnie HTML5 to trochę bym się pokłócił, czy to taki krok w tył. Ale muszę się przygotować do takiej debaty lepiej. Może jutro - jak sobie przypomne ;p

---
@przemo_li
Jak pada hasło 'goto' to zawsze widzę w myślach velicelaptora atakującego programiste xD Ale słuszne spostrzeżenie, sytuacja trochę jak z goto. Choć goto w porównaniu do table jest przedsionkiem piekła.

Banan   10 #13 25.06.2010 21:55

Ta tabela...
Jak miałem 10 lat to nie używałem CSS'a tylko tabelę. Teraz już mam 13 i moja stronka wygląda tak...
http://www.banan.hapex.com.pl

WODZU   17 #14 26.06.2010 00:23

Osobiście unikam tabel bo lubię CSS z jego div'ami i dobrze mi się z nim pracuje, ale niestety do budowy tzw. templatek tworzących szkielet strony używam właśnie tabel. Dlaczego? Bo jeśli oprę się tylko o CSS to nie da się uzyskać dokładnie tego samego wyglądu w Firefoxie i IE. W treści tabele ograniczam do minimum, o ile w ogóle są wstawiane. Na tym kończy się mój wywód odnośnie tabel i div'ów.

soanvig   10 #15 26.06.2010 15:01

@WODZU Da się osiągnąć w IE o ile jest to IE9. IE8 styknie, ale IE6 to porażka dla webmasterów... Najlepiej stworzyć osobny CSS dla IE i osobny dla reszty przeglądarek, wtedy nie ma problemu :)

Dimatheus   22 #16 27.06.2010 13:06

Hej,

To były czasy, Gdy zaczynałem zabawę z HTML'em - a było to dobre kilka lat temu - to właśnie tabela była najlepszą możliwą komendą, dzięki której udawało się stronę ustawić tak, jak się chciało. Nikt CSS'ami się nie bawił, bo i po co... Dopiero po czasie można było docenić dobrodziejstwa tejże metody.

A gdy czytałem bloga, czułem się tak, jakby był pisany właśnie o mnie...

Pozdrawiam serdecznie,
Dimatheus

GL1zdA   12 #17 27.06.2010 15:58

Niestety prawdą jest, że webmasterze nie tolerują tabel, powtarzając jak mantrę, że są niesemantyczne (nie do końca rozumiejąc o co chodzi) i należy używać divów. Efekt jest taki, że mamy strony całe w divach, niejednokrotnie by uzyskać efekty spotyka się zagnieżdżone divy (największy gwałt jaki widziałem, to 8 zagnieżdżonych divów by uzyskać prostokąt z okrągłymi rogami - powtórzone dla 20 innych obrazków na tej stronie). Moim zdaniem dużo częściej pomijanym znacznikiem są wszelkiego rodzaju listy - nawet komentarze w tym blogu to kolejne divy, podczas gdy w rzeczywistości są listą (ważna jest kolejność!).

MaXDemage   18 #18 27.06.2010 17:06

@GL1zdA
A z listą to fakt - choć często jest to kwestia wyboru wygody nad semantyką. Co czasem też preferuje. Nie mniej, po to jest znacznik listy (i to kilka różnych) by z nich korzystać.

A co do kilkunastokrotnie zagnieżdżonych divów, to widziałem ostatnio 3xZagnieżdzonyDiv z tabelą w środku do stworzenia średnio skomplikowanego menu, które mógłbym jednym ul'em i sprytnym css'em wykonać ;) i w takich sytuacjach człowiekowi chce się płakać.

Don Elo   2 #19 28.06.2010 15:38

CO do żartów - dobry suchar nie jest zły. Ale każdy ma swoje poczucie humoru, nieprawdaż?

michaelllo69   5 #20 28.06.2010 17:35

Cytuje:
"Żarty, żartami, ale przez ostatnie kilka lat Internet cierpiał. Wszyscy domorośli i nie tylko, tfórcy stron WWW korzystali z tabeli jako złotego rogu na wszelkie bolączki."

to "tfórcy" to też jest taki żart. Bo ja myślałem ze się pisze przez "w".

MaXDemage   18 #21 28.06.2010 19:32

@michaelllo69
"tfórcy" - to taki stary żart z czasów studiów mych. To słowo oznacza kogoś kto uważa się za bardzo dobrego specjalistę w danej dziedzinie a tak naprawdę nie ma o niej zielonego pojęcia. Posiadam cały wachlarz dziwnych naleciałości w mym języku pisanym - co wielu osobom się nie podoba. A tfórcy to właśnie jedno z takich słówek - choć przyznaje, że powinno to być w jakimś chyba cudzysłowiu. Postaram się to poprawić.