Loading:

Majówka Programisty! [Książki drukowane -35%| Ebooki -50%]

Ostatnio dodane

php Upload dodaw PHP Tworzenia mi Logowanie obiekt Prosty system sz Lista plików z Jak zbudować pr Jak zamienić w IP uzytkownika Obiekt Timer [AS Proste skrypty w

Top 10

1.mktime() 2.bool sort 3.fgetss() 4.chr() 5.hw_cp 6.imagecopy 7.iptcembed 8.ftell() 9.echo() 10.hash_init

56853.05

Kiedy używać tabel, a kiedy div'ów na stronach?

Konsorcjum W3C zmusza nas do korzystania ze znacznika <table> tylko do wyświetlania tabeli z rekordami w postaciach tekstowych, czyli na przykład, do wyświetlania nazw wszystkich użytkowników w danym serwisie. Przykładowa tabela napisana w XHTML:

</table>

Powyższy kod zwróci tabele z dwoma kolumnami oraz z dwoma wierszami, z ramką wielkości 1 piksel, kolorem tła białym, kolorem ramki niebieskim, szerokością 100% i wysokością 100%.

Uwaga: Należy pamiętać, że XHTML jest bardzo czuły na porządek w jakim są zamykane znaczniki.

Do tworzenia układu strony powinnyśmy używać div'ów. Sam DIV nie posiada żadnych opcji/parametrów w sobie. Staje się dopiero użyteczny, kiedy połączymy go z kodem CSS, który może być napisany w tym samym pliku, lub w oddzielnym (specjalnym) pliku .css (pamiętając wtedy tylko o przekierowywaniu do tego pliku).

Aby dodać kod CSS do naszego pliku należy wpisać w znaczniku <head> następujące linie kodu:

Jeśli jednak używamy zewnętrznego pliku .css dla wszystkich stron, to powinniśmy umieścić taki oto wpis, również pamiętając, że jest on w sekcji <head>:

Już teraz można powiedzieć, że tworzenie stron WWW za pomocą div'ów, jest dużo łatwiejsze oraz prostsze niż dzięki tabelą. W dodatku lista opcji dzięki, którym możemy "udekorować" naszego div'a jest dużo większa, niż w przypadku tabel, także i bardziej potężniejsze wydaje się projektowanie w znaczniku do tego specjalnie przygotowanym, jakim jest oczywiście div.

3. Podsumowanie

Wnioski nasuwają się same, po co używać mało efektownych, problemowych oraz przestarzałych tabel, jeśli dzięki div'ą oraz CSS możemy osiągnąć lepsze oraz bardziej zaawansowane strony WWW? DIV jest prostszym oraz lepiej przyswajalnym znacznikiem, niż toporne tabele, które są wyświetlane bardzo również, w każdej przeglądarce internetowej.

Mam nadzieję, że po przeczytaniu tego artykułu, każdy sam bez przymusu, pójdzie z duchem czasu oraz według własnego rozsądku zdecyduje się (lub utwierdzi w przekonaniu), że najlepszym rozwiązaniem, napisania szkieletu witryny internetowej, będzie zastosowanie znaczników <div>.

Dziękuję za uwagę, oraz zapraszam do komentowania.

Dalsza czê¶æ: 1 2

Laminas MVC: the most innovative framework in 2020 - get a book on Amazon

Dodano przez: divix
Ranga: Administrator serwisu Punktów: 0

Komentarze użytkowników

??? od kiedy css dołącza się jako javascript? sensowny artykuł, a taki głupi błąd. do css uzywa się

autor: ŁF | 98 | 2009-02-19 13:04:28

Nie dołącza się, mój błąd musze przyznać, dziękuje za znalelezienie kruczka.

autor: Divix | 102 | 2009-02-19 19:05:03

Chyba kolega nic tu nie udowodnił , jeżeli chcesz to zrobić to trzeba było dać parę fajnych przykładów pokazujące różnice.

autor: WH | 140 | 2009-03-20 13:49:11

Jeśli podasz te przykłady w komentarzu to będziemy wdzięczni.

autor: Divix | 141 | 2009-03-20 22:55:50

Za mało rzeczy powiedziałeś na + wg mnie najlepszym argumentem za jest zgodność XHTML z XML. Co do prostoty to czasami w HTML zrobimy coś o wiele szybciej niż w XHTMl, np pozycjonowanie elementów na środku itd.

autor: Robert | 173 | 2009-04-28 14:54:29

Do prawda, dlatego W3C proponuje nam wersję standardową XHTML (transitional) lub restrykcyjną (strict) do wyboru. Oczywiście pierwsza opcja pozwala na argumenty typu align itp.

autor: Divix | 176 | 2009-04-29 03:29:04

Zwolennicy tabel (do których nie należę) podsuwają np. takie argumenty: -prostota pozycjonowania elementów w pionie [middle lub bottom](bez wątpienia +1 dla tabelek), -pewność przy nadawaniu szerokości (większość przeglądarek w razie potrzeby dostosuję szerokość kolumn tak, by nie przekraczały wskazanego rozmiaru) Różne przeglądarki różnie radzą sobie z liczeniem rzeczywistej szerokości (dot. padding + border + width), szczególnie, że każda posiada tryb zgodności wstecznej - tzw. quirck mode, - dostosowanie wysokości wszystkich kolumn do najdłuższej szczególni, gdy komuś zależy na takim wyrównaniu dwóch, znajdujących się obok siebie kolumn (złudne, podobny efekt graficzny można uzyskać stosując odpowiednie tła w warstwie nadrzędnej) Wydaje mi się, że Robert słusznie zauważył, że brakło co najmniej kilku przykładów prezentujących, w jaki sposób przy użyciu warstw można uzyskać taki sam efekt przy użyciu DIV-ów i CSS. Btw.: Tabelki nie radzą sobie z wymuszaniem szerokości, jeżeli, któryś z elementów wewnątrz komórki jest szerszy lub wyższy, gdyż wtedy się poszerzają, a warstwy potrafią (overflow: hidden)

autor: mack | 186 | 2009-05-11 19:33:06

Nie do końca się zgodzę overflow: hidden działa również dla komórki tabeli. Zgadzam się jednak, ze pisanie stron na tabelach jest w tej chwili mocno skomplikowane.

autor: ag | 273 | 2009-06-23 13:36:06