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

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?

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?

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ę.

Tabele powinny zawierać dane, a nie elementy projektu.

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

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.

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.