Witam,

Dawno temu było można wyczytać wiele krytycznych opinii na temat
stosowania tabel do robienia layoutów stron. Argumentowano, że do tego
celu służą DIVy + CSS. No i webmasterzy próbowali wymyślnymi sztuczkami
(zagnieżdżone tagi, specjalnie przygotowane tła graficzne, czasem nawet
JS) osiągać to co na tabelach było banalne do zrobienia - np.
centrowanie w pionie albo równej wysokości kolumny.

Nastały nowe czasy, CSS i przeglądarki zaczęły supportować
display:table. No i moje pytanie brzmi: czy budowanie layoutu na DIVach
lecz z zastosowaniem display:table jest równie niewłaściwe jak
stosowanie tabel w tym samym celu? Czy lepiej nadal stosować jakieś
sztuczki i zagnieżdżać tagi zamiast zrobić coś na jednym z
"display:table" bo tak będzie poprawniej?

do góry

W dniu 08.11.2010 10:06, Marek pisze:
> Nastały nowe czasy, CSS i przeglądarki zaczęły supportować
> display:table. No i moje pytanie brzmi: czy budowanie layoutu na DIVach
> lecz z zastosowaniem display:table jest równie niewłaściwe jak
> stosowanie tabel w tym samym celu? Czy lepiej nadal stosować jakieś
> sztuczki i zagnieżdżać tagi zamiast zrobić coś na jednym z
> "display:table" bo tak będzie poprawniej?

IMHO display:table nie jest złe, pozostaje jednak kwestia
kompatybilności z IE. Ale powiedz: poza potrzebą wycentrowania kontenera
strony-wizytówki na środku ekranu do czego potrzebne jest budowanie
layoutu? I zanim zarzucisz podpunktami zerknij tutaj:
http://phrogz.net/CSS/vertical-align/index.html

--
pozdrawiam!

http://webtrunki.pl - piwa, wina, wódki, domowe wyroby
http://en.webtrunki.pl - beers, wines, vodkas, your own products

do góry

On Mon, 08 Nov 2010 10:06:05 +0100, Marek wrote:

> Witam,
>
> Dawno temu było można wyczytać wiele krytycznych opinii na temat
> stosowania tabel do robienia layoutów stron. Argumentowano, że do tego
> celu służą DIVy + CSS. No i webmasterzy próbowali wymyślnymi sztuczkami
> (zagnieżdżone tagi, specjalnie przygotowane tła graficzne, czasem nawet
> JS) osiągać to co na tabelach było banalne do zrobienia - np.
> centrowanie w pionie albo równej wysokości kolumny.
>
> Nastały nowe czasy, CSS i przeglądarki zaczęły supportować
> display:table. No i moje pytanie brzmi: czy budowanie layoutu na DIVach
> lecz z zastosowaniem display:table jest równie niewłaściwe jak
> stosowanie tabel w tym samym celu? Czy lepiej nadal stosować jakieś
> sztuczki i zagnieżdżać tagi zamiast zrobić coś na jednym z
> "display:table" bo tak będzie poprawniej?

Dobra struktura HTML jest wartością samą w sobie, więc jeśli możesz uniknąć
tabel dla czego innego niż tabele właśnie, to unikaj. Chodzi o to, że
dopóki separujesz strukturę i wygląd, a samą strukturę opisujesz właściwymi
elementami, dopóty dajesz większą szansę np. przeglądarkom mobilnym czy
robotom, które w ogóle nie patrzą na CSS, by uporały się z dokumentem. Poza
tym im mniej layout determinowany jest przez sam HTML, tym łatwiej później
będzie go zmieniać bez dotykania HTMLa właśnie. Ciekawym poletkiem
doświadczalnym może być np. próba wzięcia jakiegoś solidnie napisanego
tematu do Wordpressa (powiedzmy, Sandbox) i stworzenie kilku całkowicie
różnych layoutów bez zmieniania czegokolwiek poza CSSem.

Jeśli możesz wyprowadzić sztuczki, hacki i nieco nieładne instrukcje do
CSSa, to to zrób.


--
Michał Gancarski

Sieeeaaaaaaaaaaa!

do góry

On 2010-11-08 10:06, Marek wrote:
> No i moje pytanie brzmi: czy budowanie layoutu na DIVach
> lecz z zastosowaniem display:table jest równie niewłaściwe jak
> stosowanie tabel w tym samym celu?

Nie.


--
message[autor="PablO"]::after {
content:"Pozdrawiam";
}

do góry

W dniu 2010-11-08 14:08, Paweł Piskorz pisze:
> On 2010-11-08 10:06, Marek wrote:
>> No i moje pytanie brzmi: czy budowanie layoutu na DIVach
>> lecz z zastosowaniem display:table jest równie niewłaściwe jak
>> stosowanie tabel w tym samym celu?
>
> Nie.

Hej,

Czyli innymi słowy nie ma przeciwwskazań albo jakiś zaleceń w kwestii
używania "tabel" na CSS jako elementów layoutu?

do góry

W dniu 2010-11-08 10:55, olo pisze:
> W dniu 08.11.2010 10:06, Marek pisze:

>
> IMHO display:table nie jest złe, pozostaje jednak kwestia
> kompatybilności z IE.

Działa, działa :-)
Jeśli ktoś używa starszych od 8 wersji to jego wybór i problem. Kiedyś
na ten temat była dyskusja, z której taka konkluzja była. Zastanowiłem
się no i przyznałem rację autorowi wypowiedzi.

> Ale powiedz: poza potrzebą wycentrowania kontenera
> strony-wizytówki na środku ekranu do czego potrzebne jest budowanie
> layoutu? I zanim zarzucisz podpunktami zerknij tutaj:
> http://phrogz.net/CSS/vertical-align/index.html

Dokładnie z tego artykułu korzystałem tworząc w/w layout kiedyś :-) Sam
nawet cytowałem ten link. Odpowiadając Tobie: oczywiście wykorzystanie
tego formatowania zależne jest od specyfiki danego projektu. Był to
zestaw newsów o stałej wysokości, który po lewej stronie miał mieć
wycentrowany w pionie link 1- lub 2-wierszowy względem tego co było po
prawej stronie w drugim box'ie. Były też inne przypadki, w których z
centrowaniem walczyłem.

Czemu zadałeś to pytanie? Czy potrzeba centrowania pionowego to coś
niezwykłego? :-)

do góry

W dniu 2010-11-08 11:52, Michał Gancarski pisze:
> Dobra struktura HTML jest wartością samą w sobie, więc jeśli możesz uniknąć
> tabel dla czego innego niż tabele właśnie, to unikaj. Chodzi o to, że
> dopóki separujesz strukturę i wygląd, a samą strukturę opisujesz właściwymi
> elementami, dopóty dajesz większą szansę np. przeglądarkom mobilnym czy
> robotom, które w ogóle nie patrzą na CSS, by uporały się z dokumentem.

Roboty zwykle usuwają HTML i podążają linkami zazwyczaj. Więc tabela
lub DIV nie robi różnicy. Obserwowałem to wielokrotnie analizując
pozycjonowanie. Paskudne składniowo strony potrafiły być na topie.

Strona bez CSS na jakiejkolwiek przeglądarce sądzę, że będzie bardzo
ciężko czytelna :-) Tak więc dawanie szansy takim urządzeniom jest
raczej dość teoretyczne. Szczególnie, że HTML/CSS wiele mobilnych
przeglądarek już obsługuje.

> Poza
> tym im mniej layout determinowany jest przez sam HTML, tym łatwiej później
> będzie go zmieniać bez dotykania HTMLa właśnie.

Może to kwestia branży w jakiej działam. Zmiana layoutu praktycznie
oznaczała zawsze nowy layout. Póki co nigdy nie przeniosłem starego
HTML'a do nowego projektu. Zawsze różnice były zbyt drastyczne aby
dawało się nagiąć poprzedni layout.

> Ciekawym poletkiem
> doświadczalnym może być np. próba wzięcia jakiegoś solidnie napisanego
> tematu do Wordpressa (powiedzmy, Sandbox) i stworzenie kilku całkowicie
> różnych layoutów bez zmieniania czegokolwiek poza CSSem.

Tu pewnie masz rację. Nie znam tematu Wordpressa. Nierzadko tworzę
jakieś zawiłe realizacje z komunikacją Flashy między sobą itp. Na trzech
na krzyż DIVach za diabła się tego nie daje zamknąć. Zmiana takiego
layoutu CSS'em praktycznie jest niewykonalna.

> Jeśli możesz wyprowadzić sztuczki, hacki i nieco nieładne instrukcje do
> CSSa, to to zrób.

Hmmm ... moze niepotrzebnie na siłę staram się być purystą :-)

do góry

On Mon, 08 Nov 2010 23:10:12 +0100, Marek wrote:

> W dniu 2010-11-08 11:52, Michał Gancarski pisze:
>> Dobra struktura HTML jest wartością samą w sobie, więc jeśli możesz uniknąć
>> tabel dla czego innego niż tabele właśnie, to unikaj. Chodzi o to, że
>> dopóki separujesz strukturę i wygląd, a samą strukturę opisujesz właściwymi
>> elementami, dopóty dajesz większą szansę np. przeglądarkom mobilnym czy
>> robotom, które w ogóle nie patrzą na CSS, by uporały się z dokumentem.
>
> Roboty zwykle usuwają HTML i podążają linkami zazwyczaj. Więc tabela
> lub DIV nie robi różnicy. Obserwowałem to wielokrotnie analizując
> pozycjonowanie. Paskudne składniowo strony potrafiły być na topie.
>
> Strona bez CSS na jakiejkolwiek przeglądarce sądzę, że będzie bardzo
> ciężko czytelna :-)

Wręcz przeciwnie. Domyślne style będą dawały albo jakąś kaszanę albo ładny
dokument z nagłówkami, sekcjami, listami. Prosty ale czytelny. Wszystko
zależy od tego jak HTML jest zrobiony.


> Tak więc dawanie szansy takim urządzeniom jest
> raczej dość teoretyczne. Szczególnie, że HTML/CSS wiele mobilnych
> przeglądarek już obsługuje.

Ale w inny sposób jeśli chcą je dostosowywać do małych ekranów. Stąd
stosuje się np. media queries by podawać alternatywne style dla małych
ekranów. To również jest bardzo ułatwione gdy nie masz niepotrzebnych
elementów w strukturze dokumentu. Ten trend się wzmacnia, bo ekrany i
urządzenia z pełnym dostępem do sieci stają się coraz bardziej
heterogeniczne co do rozmiarów. Przeglądarka na Kindle ma tryb "artykułu",
który działa jeśli użyjesz elementu ARTICLE. Inaczej mówiąc - reaguje
bardzo dobrze na konkretny element już z HTML 5.


>> Poza
>> tym im mniej layout determinowany jest przez sam HTML, tym łatwiej później
>> będzie go zmieniać bez dotykania HTMLa właśnie.
>
> Może to kwestia branży w jakiej działam. Zmiana layoutu praktycznie
> oznaczała zawsze nowy layout. Póki co nigdy nie przeniosłem starego
> HTML'a do nowego projektu. Zawsze różnice były zbyt drastyczne aby
> dawało się nagiąć poprzedni layout.

Ja zaś stylowałem już zadany, dobrze zrobiony HTML i okazywało się, że
można zrobić wiele w ogóle nie dotykając niczego poza HTMLem.


>> Ciekawym poletkiem
>> doświadczalnym może być np. próba wzięcia jakiegoś solidnie napisanego
>> tematu do Wordpressa (powiedzmy, Sandbox) i stworzenie kilku całkowicie
>> różnych layoutów bez zmieniania czegokolwiek poza CSSem.
>
> Tu pewnie masz rację. Nie znam tematu Wordpressa. Nierzadko tworzę
> jakieś zawiłe realizacje z komunikacją Flashy między sobą itp. Na trzech
> na krzyż DIVach za diabła się tego nie daje zamknąć. Zmiana takiego
> layoutu CSS'em praktycznie jest niewykonalna.

No brzmi fikuśnie.


>> Jeśli możesz wyprowadzić sztuczki, hacki i nieco nieładne instrukcje do
>> CSSa, to to zrób.
>
> Hmmm ... moze niepotrzebnie na siłę staram się być purystą :-)

Ale właśnie to jest przejaw puryzmu - zachowanie struktury HTMLa bez śmieci
i załatwienie problemu jedną dyrektywą w CSSie :-)


--
Michał Gancarski

Sieeeaaaaaaaaaaa!

do góry

On Mon, 08 Nov 2010 22:42:18 +0100, Marek wrote:

> W dniu 2010-11-08 14:08, Paweł Piskorz pisze:
>> On 2010-11-08 10:06, Marek wrote:
>>> No i moje pytanie brzmi: czy budowanie layoutu na DIVach
>>> lecz z zastosowaniem display:table jest równie niewłaściwe jak
>>> stosowanie tabel w tym samym celu?
>>
>> Nie.
>
> Hej,
>
> Czyli innymi słowy nie ma przeciwwskazań albo jakiś zaleceń w kwestii
> używania "tabel" na CSS jako elementów layoutu?

To jest tylko sposób wyświetlania. Tak samo jak nie ma problemów z zadaniem
display: block elementom domyślnie będącym inline. Od tego jest ta
instrukcja właśnie.


--
Michał Gancarski

Sieeeaaaaaaaaaaa!

do góry

W dniu 08.11.2010 22:57, Marek pisze:
> Czemu zadałeś to pytanie? Czy potrzeba centrowania pionowego to coś
> niezwykłego? :-)
>

jeśli mowa o centrowaniu w linii tekstu i obrazka (lub elementu
inline-block) to jest to całkowicie normalne, bo w końcu po to to
powstało :)

Natomiast centrowanie w pionie layoutu wydaje mi się już mniej
potrzebne. Teraz nie robię już za wiele projektów, niemniej rzeźbię cały
czas swój i jestem w miarę na bieżąco z tego typu problemami i nie
zdarzyło mi się ostatnio pomyśleć, żeby użyć tabelki.

Dobrym sposobem (ale nie wtedy jak wisi deadline nad głową) jest:
1. Obmyślić strukturę używając najbardziej pasujących semantycznie elementów
2. Użyć CSS aby struktura wyglądała tak jak potrzeba

Zdarzało mi się już zrobić kawał strony, nie wiedząc jak będzie ona
docelowo wyglądać. Oczywiście nigdy nie było tak słodko, że nie trzeba
było nic w html zmieniać, ale jednak zmiany nie były szczególnie duże

--
pozdrawiam!

http://webtrunki.pl - piwa, wina, wódki, domowe wyroby
http://en.webtrunki.pl - beers, wines, vodkas, your own products

do góry