Dlaczego nie powinniśmy używać <table> w projekcie?

41

Jakie są jasne i logiczne powody, dla których nie powinniśmy projektować stron internetowych z tabelami? Jakie są korzyści, co napędza ten pomysł w branży? Kiedy można korzystać ze stołu?

Incognito
źródło
Dokładnie
Google używa samych tabel, na przykład w ramach AdWords. Ponieważ miliony reklamodawców logują się i pracują z danymi dynamicznymi, o wiele łatwiej jest kodować wokół <table>siatki CSS. Używam datatables.net dla kilku aplikacji i możesz zobaczyć listę osób korzystających z tej wtyczki jquery na swojej stronie. Wiele witryn nadal korzysta z tabel z dobrych powodów. Używam tylko tabel podczas pracy z dużą ilością dynamicznych danych, które muszą być sortowane według stronicowanych kolumn itp., Ale nie do układów stron, po to jest CSS.
Anagio

Odpowiedzi:

71

1) Tabeli nie należy używać do układów stron, ponieważ są one:

  • Powolne renderowanie, ponieważ przeglądarka musi pobrać większość - jeśli nie całość - tabeli, aby poprawnie ją renderować

  • Wymagają więcej HTML niż układów bez tabel, co oznacza wolniejsze ładowanie i renderowanie, a także zwiększone wykorzystanie przepustowości

  • Mogą być koszmarem do utrzymania, ponieważ mogą szybko się skomplikować

  • Mogą przerwać kopiowanie tekstu

  • Mają negatywny wpływ na czytniki ekranu i mogą uniemożliwić dostęp do niektórych użytkowników

  • Nie są tak elastyczne, jak stosowanie odpowiedniego znacznika semantycznego

  • Nigdy nie były przeznaczone do użycia w układach stron

  • Tworzenie tabel w responsywny układ jest bardzo trudne do kontrolowania

2) Użyj tabeli dla danych tabelarycznych. Po to są tabele.

Zobacz także: Dlaczego ludzie tworzą tabele z divami?

John Conde
źródło
1
Zgadza się, więc jeśli mam sekcję dotyczącą danych kontaktowych, to dobrze jest mieć tabelę, ale układ graficzny strony jest w DIV lub coś podobnego do nich. Widziałem, jak niektórzy projektanci unikali ich wszystkich razem w obszarach, które zawierają dane tabelaryczne i używają DIV.
Incognito
18
Projektanci, którzy zupełnie unikają stołów, nie wiedzą, co robią. Nie zrozumieli, co oznacza „nie używaj tabel do układów stron”.
John Conde
1
Głupotą jest całkowite unikanie tabel, ale istnieją uzasadnione alternatywy dla tabel dla informacji kontaktowych. Lista definicji jest dobrą alternatywą, szczególnie przy wdrażaniu hCard: cagintranet.com/archive/…
Lèse majesté
2
@Litso: Powinieneś przeczytać własne specyfikacje W3C, DLzanim zdecydujesz, co jest dobre lub złe.
Lèse majesté
1
Istnieje również pozycja: znacznik CSS tabeli do tworzenia układów tabelowych bez umieszczania ich w HTML. Istnieje kilka niszowych przypadków, w których tabele są nadal najlepszą / najłatwiejszą opcją dla układów. Spójrz @ css-tricks.com/fluid-width-equal-height-columns, aby zobaczyć, co mam na myśli.
Evan Plaice,
8

Tabele dotyczą danych tabelarycznych, a nie projektu. Ludzie często źle rozumieją motywację tworzenia stron bez tablic.

Używanie tabel do tworzenia układu jest niewłaściwe. Powinieneś używać innych elementów do układu (div, listy, sekcje, artykuły, nagłówki, stopki, aside itp.). I możesz osiągnąć wspaniałe efekty przy minimalnym HTML / CSS (pozostawiając kod znaczący semantycznie, lekki i łatwy w utrzymaniu).

Oczywiście dane tabelaryczne powinny znajdować się w elemencie tabeli. Jeśli chcesz, możesz poprawić nawet semantykę tabel, dodając thead, tfoot, tbody, th, caption itp. Wszystkie te elementy są przeznaczone do użycia z tabelami, i wierz mi, mogą sprawić, że twoja tabela będzie bardziej opisowa .

Rzecz w tym, że nie należy projektować w oparciu o tabelę i używać dowolnego pasującego rozwiązania HTML / CSS. Zacznij od znaczników semantycznych HTML, a następnie zbuduj projekt za pomocą CSS. To powinno zapewnić każdemu bezpieczeństwo. Wykorzystaj to jako ogólną zasadę.

Dave
źródło
3

Tabele powinny zawierać dane, a nie elementy projektu.

sdadffdfd
źródło
3

Tabel należy używać tylko podczas wyświetlania danych tabelarycznych. W przeciwnym razie są zwykle złym wyborem do wyświetlania.

Chris Ballance
źródło
Dlaczego głosowanie negatywne?
Chris Ballance
0

Prawdziwą przyczyną nieużywania tabel jest:

Domyślny układ tabeli to: table-layout:fixed

To każe przeglądarce przeanalizować tabelę i naprawić komórki, aby zawierały elementy wewnątrz nich, co zajmuje trochę czasu. (dlatego tabele są tak dobre dla złożonych danych)

Konkluzja: tabela będzie renderowana po wyrenderowaniu całej zawartości, w przeciwieństwie do użycia na przykład elementów DIV.

YardenST
źródło
-3

Używam tabel do projektowania stron internetowych w płynach zmieszanych ze stałymi i wiem, że wielu mówi, że tabele są dla noobów, inne mówią, że są dla facetów ze starej szkoły, którzy zawsze mówią, że DIVS są najlepsze, ale prawda jest taka, że ​​tabele są lepsze dla niektórych rzeczy, a DIVS dla inna rzecz.

Co jest lepsze a <br>lub a <p></p>? To samo

Ja i moje stare tabele w moim nowym projekcie internetowym 2015 mogę kopać tyłki każdemu dzięki mojej przyjaznej komórce o szerokości 100% zmieszanej z 2 bocznymi kolumnami po 200 pikseli każda.

Oczywiście wewnątrz stołów jest brzydkie, aby stawiać coraz więcej stołów, tam właśnie przydaje się DIVS. Tabele mogą robić rzeczy, których div nie potrafi, a div mogą robić rzeczy, których nie mogą tabele.

Mówi się, że domyślny układ tabeli jest naprawiony? Dam ci przykład

<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200">left</td>
    <td width="100%">middle</td>
    <td width="200">right</td>
  </tr>
</table>

Czy widzisz teraz potencjał? Spójrz na to na komputerze i telefonie komórkowym. Ach tak i nawet nie potrzebuję bootstrapu.

Teraz, aby zrobić to samo z divami, musisz napisać dużo kodu CSS, aby wyświetlić align float i crap. Kto napisał mniej kodu? Mnie! Czego potrzebują klienci? Facet kończący stronę za 1 rok czy za 1 miesiąc?

Teraz pozwala ulepszyć projekt za pomocą div

<div style="width:100%; min-width:1000px; height:200px;">top menu or nav</div>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200">left</td>
    <td width="100%">middle</td>
    <td width="200">right</td>
  </tr>
</table>
<div style="width:100%; min-width:1000px; height:200px;">top menu or nav</div>

Tak piękny układ z 5 kolumnami przy użyciu div i tabel.

Twoja odpowiedź brzmi: oba działają lepiej i są szybsze i będą dobrze wyglądać na każdym projekcie, nawet na telewizorach i małych telefonach komórkowych.

Rodrigo Santiaborg
źródło