Tabela vs. Div - The Good, the Evil and the Ugly - HTML - Front-End - Blog Princi Web Agency

1. Kto jest kim?
2. Stół, Brzydki
3. Div, dobro
4. Div lub Evil
5. Przydatne linki
6. Zostaw komentarz
7. [26] Recenzje
8. Ricardo Lopes
9. Rodolfo Pereira
10. Edno Cretes
11. Chrystus
12. Joseph Dionísio Biesek Rocco
13. Rodolfo Pereira
14. Wellington V. Santos
15. Alessandro
16. Luiz Ricardo
17. Elias F. Rodrigues
18. Rodolfo Pereira
19. Flávio Cavalcante
20. Renato June
21. rafael de souza dutra
22. Rodolfo Pereira
23. Mariana
24. Cin
25. Rodolfo Pereira
26. Rafael
27. Rodolfo Pereira
28. Eduardo
29. Rodolfo Pereira
30. Nilson
31. Rodolfo Pereira
32. Nilson

Наша команда-партнер Artmisto

W dzisiejszych czasach wiele mówi się o porzuceniu struktury strony opartej na tabeli i konwertowaniu jej na Div. Ale wiesz dlaczego zrobić tę konwersję struktury strony? Z pewnością nie jest to walka na Zachodzie, ale jest to temat, który nawiedza twórców stron internetowych.

Kto jest kim?

Zanim cokolwiek powiemy, poznajmy znaczenie i cel każdego z dokumentów HTML.

Tabela Tag <table> definiuje tabelę w dokumencie HTML. Służy do wyświetlania danych tabelarycznych w wierszach i kolumnach. Tag <tr> definiuje wiersz, a znacznik <td> definiuje kolumnę tabeli. W tabeli znajdują się inne znaczniki, takie jak między innymi <thead>, <tfoot>, aby uczynić go bardziej semantycznym. Div Znacznik <div> definiuje podział lub sekcję w dokumencie HTML. Zwykle służy do tworzenia bloków elementów, porządkowania informacji wewnątrz układu, który jest sformatowany za pomocą CSS. Tag <div> jest kontrolowany przez CSS poprzez identyfikator, klasę lub sam znacznik.

Stół, Brzydki

Dawno, dawno temu, w bardzo odległej sieci ... a może nie tak daleko (by nie powiedzieć, że prąd), ludzie użyli tagu <table>, aby rozmieścić elementy wewnątrz strony HTML. Witryna została szybko utworzona poprzez wizualną część jakiegoś edytora HTML, na przykład FrontPage lub Dreamweaver, i nie było potrzeby testowania w wielu przeglądarkach, ponieważ przeglądarki również interpretowały tag <table>.

Jednak ta prędkość ma cenę: Kod trudnej konserwacji. Witryna zbudowana ze znacznikiem <table> zużywa więcej ruchu i staje się myląca w przypadku konserwacji i wyszukiwarek .

Mówią, że kiedy strona jest zbudowana ze znacznikiem <table>, strona jest zgodna ze wszystkimi przeglądarkami i że jej struktura trwa znacznie krócej niż strona ze znacznikiem <div> ... ale czy tak?

„Strona, którą robisz, używając tagu <div> w ciągu 5 godzin, zrobię to w ciągu 1 godziny, używając tagu <table>! Jest szybki i łatwy w utrzymaniu. Po prostu włóż kolejny stół do innego rozwiązanego stołu! A jeśli pojawi się stół, postawię jeszcze jeden stolik, żeby naprawić drugi.

- Webmaster, który używa tabeli po diagramowaniu strony z 10 tysiącami linii kodu (i tylko on to rozumie).

Div, dobro

Witryna zbudowana ze znacznikiem <div> zyskuje semantykę, łatwą konserwację, mniejszy rozmiar strony i poprawia indeksowanie wyszukiwarek. Ale fakt testowania we wszystkich przeglądarkach nadal zakłóca pracę programistów.

Używając tagu <div> i CSS, termin Tableless każdego dnia zyskuje na sile w brazylijskiej sieci. Opracowanie strony zgodnie z standardy ustanowione przez W3C , ułatwiasz wszystkim, bez względu na używaną przeglądarkę lub specjalną potrzebę, którą ma gość, przyjemne doświadczenie podczas odwiedzania strony.

Div lub Evil

Znacznik <div> ma nie tylko dobrą stronę, ale i złą stronę. Dzisiaj, chcąc przejść z Table na Div, jest czymś pracochłonnym, a to niestety ze względu na ludzi, którzy nie znają internetu. Ale jak?

Przeglądarka Microsoft, Internet Explorer 6, sprawia, że ​​przejście to jest trudne, ponieważ nie ma dobrej zgodności z parą Div + CSS. I jak wiesz, IE6 to przeglądarka, która już jest zainstalowana na maszynie tej osoby, która nie ma wiedzy na temat komputerów i myśli, że Internet sprowadza się do orkuta i poczty elektronicznej, więc uważasz, że ta osoba będzie miała pracować nad aktualizacją przeglądarki? Niestety nie.

Nawet dzisiaj, nawet po wydaniu Internet Explorera 8, duża część osób korzysta z Internetu za pomocą przeglądarki Internet Explorer 6 i 7, więc nie możemy udaremnić doświadczenia tych użytkowników, którzy używają starszych przeglądarek, uniemożliwiając im nawigację i aby znaleźć informacje, których szukają, ale powinniśmy zachęcić ich do aktualizacji przeglądarek, aby mieli bogatsze i bezpieczniejsze wrażenia podczas przeglądania.

„Cholera IE6! Nie możesz tego zrobić za pomocą tagu <div> ... Myślę, że użyję tutaj tabeli. Tylko jeden stół nie boli i nikt nie zauważy.

- Webmaster, który rozpoczął przechodzenie od tabeli do Div

Przydatne linki

Poniżej znajduje się lista przydatnych linków umożliwiających lepsze studiowanie tagów HTML. Dobre studium i do następnego artykułu!

Zostaw komentarz

Chcemy wiedzieć, co myślisz o tym poście! Będziemy szczęśliwi, jeśli zostawicie nam komentarz :-)

Pamiętaj, że komentarze są moderowane, a linki mają rel = "nofollow". Więc nie spamuj słów kluczowych, w przeciwnym razie Twój komentarz zostanie usunięty. Dziękuję!

[26] Recenzje

Rogerio Gomes Pereira

Zgadzam się z tobą Rodolfo w tej kwestii korzystania ze stołu. Jest to szeroko stosowane i istnieją trudne miejsca konserwacji. Witryna z wieloma tabelami jest praktycznie zaszyfrowana (nikt nie rozumie, jak jest zamontowana) i niemożliwa do przeprowadzenia żadnej konserwacji.

Ricardo Lopes

IE to duży problem, od lat i nie rozwiązany, strony powinny podjąć inicjatywę zakazania przeglądarki.

Rodolfo Pereira

W odpowiedzi na Ricardo Lopes

Ricardo, myślę, że IE6 to duży problem, a IE7 to problem „średni”. IE8 nie sprawia tyle kłopotu, jeśli chodzi o strukturę strony internetowej w Tableless, ale wciąż jest poniżej przeglądarek Firefox, Chrome i Opera.
Istnieją strony, które dołączyły do ​​kampanii promujących „śmierć IE6 ?, hehe ... i tego chcą wszyscy programiści!

Edno Cretes

Daj spokój, żyję tym w moim codziennym życiu, ponieważ tylko widząc, czy to, co przedstawiam, ma jakość i treść i wiem, że poprawię się także, jeśli zawsze będziesz liczył na wsparcie Princi, jesteś dobry, ale DOBRY nawet w tym, co robią.
Dzięki i sukces,
Edno.

Chrystus

Zabij przeglądarkę, której 40-letnie osoby używają w swoich starszych firmach? Lepiej jest zabić te statki i zniszczyć ich zamiast przeglądarki, ponieważ nie zmienią się (a także wyjdą zabijając ludzi pracy jest przestępstwem i dają łańcuch i są sprzeczne z prawem).
Nawet mówiąc im, że jeśli używają Firefoksa z wtyczką FasterFox, będą mieli prawie natychmiastowy dostęp, nie uwierzą w to, nawet jeśli to prawda, idealnie jest zrobić jedną stronę dla IE6, a drugą dla reszty, ale to byłby podwójny stres i praca , lub użyj frameworków, które zapewniają dobrą kompatybilność z większością przeglądarek, takich jak JQuery (co czasem pozostawia cię w rękach) lub języka serwera do zbudowania strony zgodnie z potrzebami, takimi jak PHP, Java, Ruby i Python ( które w przypadku korzystania z któregokolwiek z nich będą o wiele bardziej korzystne niż tworzenie strony za stroną), jednak jest wielu klientów, którzy zapłacili za produkty bez tego wsparcia.
W większości wolę tworzyć programy w Javie na pulpicie lub w telefonie komórkowym, które tworzą projektanta stron html, ponieważ zrobię to dla telefonu komórkowego lub komputera danego klienta, a nie strony dla ogromnego zestawu niezależnych przeglądarek.
Lub wyrzuć to wszystko do kosza i zrób IE6 (dużo pracy, stresu i śmiesznie zagraconych stron kodowych).

Joseph Dionísio Biesek Rocco

Dawno temu podjąłem decyzję. Twórz proste i piękne strony internetowe dla wszystkich przeglądarek,
i tworzyć złożone systemy wykorzystując maksimum ram ograniczając je tylko w przeglądarce.
I do tego zwykle używam IE8.
IE6 naprawdę zgadza się, że było bardzo latráz od konkurentów, ale IE8 wygrywa w niektórych szczegółach, przynajmniej w moich projektach.
Kto korzysta z IE6, nie ma pojęcia o Internecie, ten typ osoby nie zasługuje na „dobre doświadczenie”. Nie trzeba nikogo zabijać, aby wszyscy korzystali z bieżących przeglądarek, ludzie muszą zrozumieć, że rzeczy ewoluują w dziedzinie informatyki i muszą podążać za tą linią ewolucji.
Jeśli programiści są zawsze przyjaźni ze starszymi przeglądarkami, nigdy nie będziemy mieli prawdziwej ewolucji Internetu. My, którzy jesteśmy podstawą Internetu, jeśli rozwiniemy się do tego, by wymagać więcej przeglądarki, nie będą już tylko narzędziami, które wyświetlają teksty na ekranie z pewnymi niepewnymi wtyczkami z początku XXI wieku dołączonymi do treści.

Rodolfo Pereira

W odpowiedzi na Joseph Dionísio Biesek Rocco

Joseph, przede wszystkim dziękuję za komentarz!
Strategia tworzenia prostej i pięknej strony internetowej, dzięki której nie masz większych problemów z przeglądaniem witryny w starszych przeglądarkach, jest dobra, w zależności od przypadku, ponieważ możesz ograniczyć doświadczenie tych, którzy używają bardziej aktualnych przeglądarek, ponieważ może zaoferować im lepsze wrażenia, używając bardziej zaawansowanych funkcji, jednak może to być doświadczenie dla tych, którzy używają starych przeglądarek, nie jest zbyt dobre. To jest coś, co należy dokładnie zbadać, zanim stworzymy stronę internetową, więc nie zaoferujesz nieprzyjemnego doświadczenia tym, którzy używają starych przeglądarek i jednocześnie nie ograniczają doświadczenia tych, którzy korzystają z obecnych przeglądarek.
W systemach, Princi Web Agency, kiedy przekazujemy szkolenie klientowi, zaktualizowaliśmy już tę samą przeglądarkę i sprawdziliśmy, czy użytkownik wchodzi do systemu ze starą przeglądarką, czy nie. Jeśli używa starej przeglądarki, pojawia się ostrzeżenie, dzięki czemu może łatwo zaktualizować przeglądarkę i wykorzystać wszystkie funkcje naszych systemów.
Ta praktyka podawania tego ostrzeżenia użytkownikowi podczas przeglądania określonej strony za pomocą starej przeglądarki będzie w przyszłości wykorzystywana w naszych witrynach, aby „wymusić” (a nie „zabić”, hehe) użytkownika, aby zaktualizować przeglądarkę, ponieważ użytkownik kto odwiedza witrynę, może nawet chcieć zaktualizować przeglądarkę, ale może nie wie, że jest jej nowsza wersja.

Wellington V. Santos

Gratulacje dla postu, dość wyjaśniające, jestem właśnie w trakcie przechodzenia między i pomimo trudności w zrozumieniu div i ich pracy w różnych przeglądarkach, zastanawiam się, gdzie byłem z głową, że wcześniej tego nie robiłem. W każdym razie prędzej niż później. Dzięki, przytul się.

Alessandro

Świetny post, dziękuję!
Podobał mi się tekst.

Luiz Ricardo

Twój artykuł budzi wątpliwości co do tego, co tworzę, ale w moim przypadku nie są to skomplikowane strony internetowe, ale raczej formularze, na wypadek, gdyby była to aplikacja bazodanowa.
Mam pewne trudności z radzeniem sobie, w moim przypadku chcę po prostu dopasować siatkę danych i inną kontrolę, co doradzacie?
ten jest łatwy w użyciu, a kiedy muszę ustawić elementy jako siatkę danych obok siebie, istnieje pewna trudność, pływak w pewnych sytuacjach nie działa lub działa w jednej przeglądarce, a nie w innej.
Nie jestem web developerem, tak desktop.
Jeśli możesz przekazać mi informacje ze źródeł badawczych, a dokładniej w odniesieniu do tworzenia formularzy internetowych, będę bardzo wdzięczny.

Elias F. Rodrigues

Od pewnego czasu rozwijam sieć i zgadzam się częściowo. O tworzeniu układów z div jest dużo bardziej plastyczny.
W przypadku „brzydkiej i trudnej do utrzymania tabeli” cesarzowa witryna korzystająca z tabel jest łatwiejsza do utrzymania, ponieważ mamy kontrolę nad tym, gdzie część witryny i jej pozycja zaczyna się i kończy. Wierzę, że połączenie div i tabeli bez najlepszej opcji.

Rodolfo Pereira

W odpowiedzi na Elias F. Rodrigues

Elias, dziękuję za komentarz!
Jeśli chodzi o używanie tabel do strukturyzacji witryny, uważam, że ma ona mniejszą łatwość konserwacji, ponieważ napiszesz więcej linii kodu niż w przypadku struktury witryny za pomocą div. Aby wyświetlić dane tabelaryczne, nie ma nic lepszego niż sama tabela.
Dzięki!

Flávio Cavalcante

Używam tylko stron zrobionych bez tabliczek. Tabele, które myślę, że mogą być użyte wewnątrz artykułów, w ewentualnej strukturze, dla czegoś wyizolowanego, poza tym, nie widzę już potrzeby, ponieważ wszystko jest możliwe do wykonania przy użyciu div i css.
Dzięki.

Renato June

Moje doświadczenie jako programista zostawiam na 20 lat, od wieku przedrrsrr! Zawsze rozwiązywałem moje plusy z tabelami, patrz, że sprzedawane przeze mnie strony są złożone, szybkie i semantyczne, teraz z regułami w3c robię kilka w div + css bez pro, to po prostu za wolno, ale wygląda świetnie! Jeśli chodzi o kody, które mieszają się z tymi odczytami, grając wokół stołu lub div, ostatecznie pasuje do okrągłego wzoru. Dzięki.

rafael de souza dutra

Nie wiem, jak to zrobić, ale nie wiem, jak to zrobić.

Rodolfo Pereira

W odpowiedzi na rafael de souza dutra

Czy masz jakiś kod, który chcesz nam pokazać?

Mariana

Uwielbiam pisać Stałem się fanem tego bloga ... ale to dobrze, że Brazylia kochała szybkie stawianie bez tabliczek ... zawsze szukamy piękniejszego internetu.

Cin

Cześć Rodolfo, jak się masz?
Przeczytałem twój artykuł na temat div i tabeli na blogu Princiweba i byłem w pewnym momencie zdezorientowany. Mówisz, że przeglądarki również interpretują znacznik tabeli, ale tuż poniżej mówisz „ta prędkość ma cenę: kod trudnej konserwacji i ograniczenia przeglądarek”.
Jeśli wszystkie przeglądarki interpretują ten tag, jak mogą istnieć ograniczenia przeglądarki?
Czy mógłbyś lepiej wyjaśnić ten punkt?

Rodolfo Pereira

W odpowiedzi na Cin

Cześć Cin, w porządku iz tobą?

W rzeczywistości nie ma żadnych ograniczeń w przeglądarkach, ponieważ, jak powiedziałeś, wszystkie przeglądarki interpretują ten tag.

Zaktualizowałem post na podstawie twojego komentarza, dzięki! : D

Rafael

W odpowiedzi na Rodolfo Pereira

Cześć Rodolfo wszystko w porządku?
Muszę ustawić formularz, pomyślałem, aby użyć div, ponieważ muszę zostawić ten sam obraz poniżej, ale to jest kość, aby ustawić jego orientacje na stronie, ale używając tabel tbm nie wiem, czy jest to najlepszy sposób, gdzie chciałbym zwiększyć rozmiar kolumn i linie ... czy mógłbyś spojrzeć na ten model i wyrazić swoją opinię?
http://i58.tinypic.com/2lkblad.jpg
Jeśli nie możesz zobaczyć obrazu, użyj linku:
http://www.guj.com.br/java/308793-layout-de-tela

Rodolfo Pereira

W odpowiedzi na Rafael

Cóż, najwyraźniej się osiedliłeś, prawda?

Malz opóźnienie hehe. Abs!

Eduardo

A co z użyciem miksu z ramkami i divami? Czy jest lepiej, czy jest bardziej zdezorganizowany? Jestem na początku mojego kursu informatycznego i na razie opracowałem tylko strony internetowe z ramkami, podobał mi się rezultat, sposób przepływu i kompatybilność, a także jest bardzo plastyczny i trudny do zepsucia. Zazwyczaj używam ramki dla nagłówka, jednej dla menu i jednej dla treści strony, w której będą wyświetlane strony. Jeśli jest to strona z wpisami w stylu blogu, używam div, który będzie obszarem postu.

Rodolfo Pereira

W odpowiedzi na Eduardo

Hm, w tym przypadku opisałeś, że nie zaleca się używania ramek.

Polecam Ci zapoznanie się z kodem źródłowym tej strony http://www.medicamenta.com.br/ dać badany.

Abs!

Nilson

Co się stanie, jeśli zamontuję układ witryny wewnątrz tabel za pomocą DREAMWEAVER CS6, a następnie przekonwertujemy tabele na DIV AP?
Czy w przypadku aplikacji mobilnej mogę używać tej metody?
Chodzi o to, że jestem TRUDNY W INTERNETIE i wciąż mam problemy z css itp. ... i nie są one skomplikowanymi witrynami ani aplikacjami, są bardzo proste
Dzięki

Rodolfo Pereira

W odpowiedzi na Nilson

Nielson mówi:

Więc nie wiem, jak przekonwertować tabele na div. Szczerze mówiąc, myślę, że lepiej zainwestuj trochę czasu, aby nauczyć się nie używać tabel do strukturyzacji strony ... możesz: D

Abs!

Nilson

W odpowiedzi na Rodolfo Pereira

Dreamweaver robi to ... tabele dla aplikacji DiV ...