ďťż

[XHTML] Tabele czy warstwy? Układ trójkolumnowy

Podstrony

telcocafe

Rozpocząłem migrację z układu opartego o tabelki na układ zbudowany z warstw <div>. Layout zawiera 3 kolumny o takiej samej wysokości (ich wysokość zależy od wysokości dowolnej kolumny). Przydał się szczególnie ten poradnik: http://www.alistapar...icles/holygrail

Wszedłem na kanał #css na FreeNode. Tam twierdzą, że tego typu layouty należy budować na tabelkach.
* <div>+CSS"... that's even worse than tables
* so what's better?
* semantic markup?

* _ZofBot4: Useful table: http://keryx.se/reso...-elements.xhtml http://del.icio.us/trovster/semantics , http://xrl.us/vpr8 , http://snipurl.com/1g20e
Gdy pokazałem kod HTML - http://pastebin.com/d1fa88346 - ktoś dorzucił, że jest f...ing horrible.
Jakie jest Wasze zdanie i dlaczego?
Użytkownik Ferrari edytował ten post 23 maj 2009, 16:16

Ja nie wiedzę żadnego problemy spełnia wymogi walidacji więc jest OK!

Wszedłem na kanał #css na FreeNode. Tam twierdzą, że tego typu layouty należy budować na tabelkach.
Po pierwsze tabele nie są zgodne ze standardem XHTML więc nie wiem czemu ta społeczność tak twierdzi :o

Po drugie XHTML jest nowszą wersją HTML'a i według mnie łatwiejszą. Większość stron internetowym które powstają są tworzone w standardzie z xHTML

Nie przejmuj się, wszystko jest dobrze.

PS: każdą layout pisze się na divach //jest to najbardziej popularna forma
Użytkownik bajeczny edytował ten post 23 maj 2009, 16:30

Po pierwsze tabele nie są zgodne ze standardem XHTML więc nie wiem czemu ta społeczność tak twierdzi :o
Bo znają się na tym w odróżnieniu od ciebie?
http://www.w3.org/TR...mod-tables.html - tabele są obecne w specyfikacji XHTML

Pozycjonowanie wielu divów obok/względem siebie itd. to koszmar i wcale nie daje żadnych zalet czytelniejszego i łatwiejszego w modyfikacji kodu. Jeżeli chcesz zrobić coś co nie jest prostym układem - szybciej zrobisz to na tabeli i unikniesz zabawy z układaniem poszczególnych bloków.

Bo znają się na tym w odróżnieniu od ciebie?
http://www.w3.org/TR...mod-tables.html - tabele są obecne w specyfikacji XHTML
No dobra trochę się zapędziłem . Pomyliło mi się. Zwracam Honor :)

Przynajmniej mi wydaje się że łatwiej pisze się lay za pomocą div'ów
Użytkownik bajeczny edytował ten post 23 maj 2009, 16:57

Tabele są w specyfikacji XHTML, lecz zgodnie z przeznaczeniem służą do prezentacji danych tabelarycznych. Webmasterzy kiedyś odkryli, że można używać <table> i <td> do budowania układów graficznych - co jest teraz przedmiotem sporu.

Przeciwnikiem układów opartych o tabele jest Riddle: http://perfectionorv...mny-layoutu-css

Kiedyś budowaliśmy strony za pomocą tabel, teraz nadszedł czas na podzielenie dokumentu na sekcje i stworzenie z nich layoutu za pomocą CSS. Rozszerzając wypowiedź Johannsona - wszyscy, którzy projektują dalej na zagnieżdżonych tabelach w niedługim czasie albo przestawią się na CSS albo wypadną z obiegu. Z drugiej strony tabele wcale nie zwiększają znacznie objętości kodu - też można stosować style. Ktoś zwrócił uwagę, że layouty oparte o warstwy są bardziej przyjazne dla urządzeń mobilnych. Czy to prawda? W czym jest różnica?

Generalnie stosuje się to co jest przejrzystsze i wygodniejsze w implementacji, po co robić div > div > div > div + kilkadziesiąt linii CSS, skoro można table i 3 razy td. Z drugiej strony czasem wygodniej ustawić kilka divów bo kilkuwierszowa tabela robi za duzy bajzel.

Nie warto popadać w skrajności, dopóki kod jest przejrzysty, a strona wyświetla się poprawnie, używa się tego co jest wygodniejsze z punktu widzenia implementacji (obecnej i przyszłych, jeśli planujesz zmiany).

Co do urządzeń mobilnych, to kwestia silnika przeglądarki, w zasadzie największy problem z tabelami jest taki, że strona wyjdzie za szeroka, albo połamią się w dziwaczny sposób, divy poprostu przesuną się jeden pod drugi.

W zasadzie nie rozumiem ludzi, którzy doszukują się jakiejś idei w budowaniu stron na tabelach/divach, jedno i drugie ma plusy, jednego i drugiego można używać dowolnie. Jeśli będziesz wiedział jak z nich skorzystać to strona nic nie straci, jeśli nie będziesz to nawet trzymając się kurczowo walidatora i w całości jednej z metod i tak spartolisz stronę.
Użytkownik someone edytował ten post 23 maj 2009, 17:16
Może i prościej jest zrobić taki układ na tabelkach, ale kod wykonany na divach jest bardziej elastyczny. Wystarczy podmienić CSS i otrzymujemy zupełnie inny wygląd. Ogólnie przeraża mnie wizja późniejszej edycji kodu(zwłaszcza cudzego), gdzie każda tabela zawiera w sobie kolejnych kilka tabel.

tabele w tabelach to przegięcie, ale w zrobieniu trzech kolumn tabelami i używaniu dalej divów nie ma nic złego.
W razie potrzeby nie tak trudno będzie to przebudować, a divy też czasem trzeba przemieścić w kodzie, żeby zmienić wygląd strony, więc z tą 100% niezależnością html<->css to też nie do końca prawda.

Kiedyś każdy blok na stronie opisywałem za pomocą tabel. Później tylko główny układ strony i tabele tworzyłem znacznikiem <table> + CSS, zaś bloki menu, newsów, itd. za pomocą <div class="box">, <h2>, <div class="menu">...

Teraz generuję główny layout za pomocą znaczników <div id="left">, <div id="main">... metodą One True Layout. Niestety cały układ sypie się w IE 5.0 i 5.5. Wciąż są osoby, które używają Windows 98 (IE 4 lub 5 w 98 SE) lub Me (IE 5.5). Instalowanie Win NT na starych komputerach to kamikadze, więc trzeba się liczyć z tym, że IE 5.x szybko nie zniknie z rynku. Przeciętni użytkownicy nie wiedzą, co to jest przeglądarka. Jeżeli ktoś im nie zainstaluje Opery lub nowszej wersji IE (wersji 7 lub 8 ich komp raczej nie udźwignie), prędzej powiedzą, że projektant nie potrafi tworzyć stron.

Może warto napisać skrypt JS, który poinformuje, że używa się starej wersji przeglądarki i zachęci do aktualizacji / zmiany?

yyy podziwiam Cię, ja w zasadzie piszę pod IE 6 tylko kiedy klient wyraźnie sobie tego zażyczy. Wspieranie 5.x w życiu by mi do głowy nie przyszło.
Sprzęt pod windows XP można kupić za 50zł, a 17" monitor do tego za dużego kebaba(ceny z mojego akademika), więc IE 6 i rozdzielczość 1024x768, to już absolutne maksimum jeśli chodzi o kompatybilność w dół.

Generalnie wspieranie tego to strzał w stopę bo tylko opóźnia decyzję o odejściu od tych trupów. Co do przypominania to owszem można przypomnieć ludziom, którzy mają IE 6 i starsze o uaktualnieniach, byle delikatnie i wskazując co oni na tym zyskają, bo inaczej tylko zniechęcasz.
Użytkownik someone edytował ten post 23 maj 2009, 22:27
W GL to maks testujemy z IE 6. O skrajnych przypadkach, które nie mają realnego udziału w statystykach typu IE 5 i starsze nikt nie myśli, bo to strata czasu i śmiecenie kodu...

Zdecydowanie preferuję pisanie stron opartych na div'ach - jest to dużo wygodniejsze od tabelek, w których bardzo szybko traci się przejrzystość kodu. A poza tym - jak już ktoś wspomniał - wystarczy zmiana pliku .css i mamy zupełnie inną stronę.
Jedyny problem jaki napotkałem dotąd przy warstwach to Faux Columns.

Dobry wygląd to taki, którego nie trzeba zmieniać ;)

Niestety przy metodzie One True Layout występuje błąd w Firefoksie i IE.<div id="comments">komentarze</div>Gdy klikniemy odnośnik zawierający odniesienie do kotwicy #comments, środkowa część układu przewija się do wysokości warstwy z komentarzami. W efekcie nie widać elementów znajdujących się powyżej komentarzy (czyli fragmentu menu, całej wyświetlanej nowości lub artykułu). Czy ktoś zna obejście problemu? Nie chcę stosować specjalnych haków typu: dodaj klasę "anchorFix" do każdej kotwicy lub warstwy zawierającej ID. Metoda powinna być uniwersalna. :)

Szczegóły: Bug w One True Layout
Użytkownik Ferrari edytował ten post 25 maj 2009, 12:10
Ale masz problemy... etykiety po to generalnie są że wymuszają focus na danym elemencie :P

Zdecydowanie na tabeli.

Divów używam jak muszę. jak nie muszę to nie używam ;)

Generalnie każdy układ da się zrobić w oparciu o tabelę. bez względu na to jak skomplikowany układ by był.

I jest jedna rzecz o której należy powiedzieć -> przy używaniu divów problemy są z niszowymi przeglądarkami. Co prawda można to olać i potraktować jako błąd statystyczny, ale dlaczego?

dobrze zbudowana tabela nie przeszkadza. Ale macie rację budowanie tabeli w tabeli w trabeli jest bzdurą.

Ktoś tu słusznie zauważył, że zbudować układ na tabeli a później wykorzystywać wewnątrz inne znaczniki jest słusznym rozwiązaniem ;)

Zrobiłem wiele stron na divach i nie miałem jeszcze sytuacji nie do rozwiązania (JA nie miałem). W końcu tabelki mamy do innych zastosowań, niż pozycjonowanie elementów na stronie.
Kod strony na DIVach wygląda zdecydowanie lepiej i przejrzyściej niż widok mnóstwa <tr> i <td>.

Teraz wszystkie nowoczesne portale, skrypty są tworzone w oparciu na DIVach (interia, onet, wp; skrypty: np. wordpress - w tym przypadku themesy)
Ogólnie stron na tabelkach się już nie tworzy i ich ubywa, w przeciwieństwie do tych drugich.

Mylisz się ;) na tabelkach wciąż robi się wiele pomniejszych stron i innych gniotów ;)

właściwie cała dyskusje nie ma sensu, że zacytuję Jeff'a Croft'a

Iâm done with web standards. Iâm done reading specs. Iâm done caring whether a property is part of CSS 2.1 or CSS 3. Iâm done caring whether -webkit-border-radius is a "standard" or not. I'm done caring whether or not a page validates against a given spec. Who fucking cares? Iâm building websites for clients and users, not for Jeremy Keith. Arenât you?

co w luźnym tłumaczeniu znaczy mniej więcej (dla nieanglojęzycznych)

Skończyłem z webowymi standardami. Przestałem czytać specyfikacje. Przestałem martwić się czy właściwość jest częścią specyfikacji CSS 2.1 czy CSS 3. Przestałem się martwić czy -webkit-border-radius jest "standardem" czy nie. Przestałem się przejmować, czy strona przechodzi walidację względem danej specyfikacji. Kogo to, k!#!a, obchodzi? Tworzę witryny internetowe dla klientów i użytkowników, a nie Jeremy'ego Keitha. A Ty nie?

Dlatego przepychanie się poraz kolejny czy budować na divach czy na tabelach jest bez sensu. Ankieta w tym temacie powinna brzmieć jak budujecie układ 3-kolumnowy, a nie jak należy budować. Bo tak naprawdę, który z waszych klientów zajrzał kiedykolwiek do kodu źródłowego?

Teraz doszliśmy do dyskusji o wyższości świąt wielkanocnych nad Bożym Narodzeniem. I po co? Po nic. Bo każdemu mozna udowodnić, że coś można zbudować w XHTML1, który nie daje tego co miał dawać i każdemu można udowodnić, że można zbudować wszystko w HTML 4.01, który ma już ponad 10 lat! I niech twórcy stron XHTML'owych zajmą się tworzeniem stron w takim stylu. Ja pozostanę przy swoim HTML 4.01 żyjąc nadzieją że HTML 5 jednak będzie szybciej niż 2022 rok.

Modka proszę o zamknięcie tematu bo się znowu flame zrobi standardowo jak przy rozmowach czy Windows czy Linux. Z góry dziękuję ;)

Podpisuję się pod powyższym postem(a szczególnie słowami Crofta), rękami i nogami. Rób tak, żeby Tobie i jak największej części Twoich użytkowników było wygodnie, walidacja, standardy i specyfikacje nikogo oprócz fanatyków nie obchodzą, jeśli wszystko działa.

Najlepszy przykład: Google, ma layout częściowo na divach, częściowo na tabelce i do tego z wykorzystaniem przestarzałych znaczników (center), a całość się nie waliduje. I kogo to wogóle obchodzi?

Nie zamykajmy tematu. Może uda nam się rozwiązać część problemów z <div>-ami.

Przy obecnej szacie graficznej raczej zostanę przy <table>.

nie miałem jeszcze sytuacji nie do rozwiązania Napisz, czy tworzyłeś layouty 2- lub 3-kolumnowe, gdzie każda kolumna ma inne tło. Jak sobie z tym poradziłeś? Którą metodę zastosowałeś? Jak już napisałem wcześniej, w One True Layout jest błąd.

Aktualnie stosuję XHTML 1.0 Strict, ale ze względu na nowe znaczniki i funkcje DOM, które znacznie ułatwią tworzenie stron, czekam na HTML 5. :)

Powiedzmy, że w biznesie klientów to nie interesuje, czy strona jest zgodna ze standardami, gdyż i tak większość internautów ma po prostu znaleźć potrzebne informacje na witrynie w kilka sekund. W przypadku projektów open-source lub stron na temat technologii internetowych większy udział mają "fanatycy", którzy wystawiają stosowne oceny.

Ciężko nie zgodzić się z autorem cytatu. W obecnej sytuacji pozostaje szukać złotego środka. Jeżeli stworzenie działającego szablonu wyświetlającego się poprawnie we wszystkich przeglądarkach wymaga zastosowania skomplikowanych i niepewnych obejść, lepiej zastosować wyjątek i użyć starszego rozwiązania, czyli w tym przypadku <table>.

Podobna sytuacja z display: block-inline dla elementów galerii. IE 6 wyświetli każdą miniaturę w osobnej linii, IE 7 już sobie radzi z tym, ale wciąż IE 6 ma duży udział na rynku (należy liczyć wszystkich, którzy mają Win XP i starsze wersje). W tym przypadku lepiej zastosować obejście niż włączyć opływanie (float: left) i stałą szerokość (brak elastyczności).
Użytkownik Ferrari edytował ten post 30 maj 2009, 19:34
W stronach nie robię wyraźnego podziału na kolumny, bo wg. mnie prezentuje się to tak sobie, więc się tym nie interesowałem.
Ale wychodzi na to, że problem jest popularny, więc kilka linków z google:
http://vivee.info/20...-za-pomoca-css/
http://palmiak.dot.p.../kolumny/6.html

HTML5 nie istnieje jako standard, lecz przeglądarki (przynajmniej część) już obsługują tag MEDIA zawarty w szkicu standardu.
Użytkownik Riklaunim edytował ten post 30 maj 2009, 19:59

Sitedesign by AltusUmbrae.

Darmowy hosting zapewnia PRV.PL