2013-07-06 12 views
24

Potrzebuję wyświetlać post i powiązane dane w kolumnie mądry siatki i na pewno wymagają tabeli dla tych, jak wyrównanie div w pojedynczej linii za pomocą pływaków to czasochłonne rzeczy!Czy dobrze jest używać tabel w HTML 5?

Doceniamy Twoje opinie o Do i Do not for Tables w HTML5!

+7

Jeśli dane są tabelaryczne, użyj tabel; jeśli zawartość tabeli jest prezentacyjna, nie używaj tabel. –

+0

Które przeglądarki są potrzebne do obsługi? –

+0

Wszystkie najnowsze i nadchodzące przeglądarki! Myślę, że jest przestarzałe od HTML5? –

Odpowiedz

33

Prosta zasada - Użyj tabel dla danych tabelarycznych, wykorzystywać inne elementy prezentacji (projektowanie układów za pomocą CSS) jak div, section, aside, nav itp. który zapewnia sens treści trzymają zamiast używać table za wszystko

Faktem jest, że programiści używane tabele w latach 90. dla ddrafting swoje układy, ale teraz, nowy CSS3 Spec jest niesamowite, to daje tak wiele luk w projektowaniu układy takie jak Flex Box, column-count, zachowanie modelu pudełkowego można zmienić za pomocą właściwości box-sizing, projekty responsywne stają się coraz lepsze przy użyciu zapytań @media, siatek itp., których nie można uzyskać z elementem table ... i dlatego, table jest używane tylko do przechowywania danych tabelarycznych.

Widziałem wielu deweloperów mając wrażenie, że table powinny być całkowicie ignorowane, a zamiast tego wykorzystać całe mnóstwo div z 100 linii CSS, stosując display: table;table-celltable-row właściwości, aby dostać jeden stół prosto.

Więc nawet w HTML5 jest całkowicie OK, jeśli używać tabel dla danych tabelarycznych ..


From W3 Org : (v4.01)

Tabele nie powinny być używane wyłącznie jako środek do układu treść dokumentu, ponieważ może to powodować problemy podczas renderowania na nośnikach niewizualnych na . Dodatkowo, w połączeniu z grafiką, te tabele mogą zmusić użytkowników do przewijania w poziomie, aby wyświetlić tabelę zaprojektowaną na systemie z większym wyświetlaczem. Aby zminimalizować te problemy, autorzy powinni używać style sheets do sterowania układem, a nie tabelami.


From (HTML 5)

Tabele nie powinny być stosowane jako substancje pomocnicze układu. Historycznie, wielu autorów WWW ma tabele w HTML jako sposób kontrolowania układu strony , co utrudnia wyodrębnianie danych tabelarycznych z takich dokumentów. W szczególności w przypadku użytkowników narzędzi ułatwień dostępu, takich jak czytniki ekranu, użytkownicy komputerów ułatwiają dostęp do stron z tabelami użytymi do stworzenia układu. Jeśli tabela ma być używana do układu, musi być oznaczona atrybutem role="presentation", aby klient robiący programowanie prawidłowo reprezentował tabelę w technologii wspomagającej i odpowiednio przekazał zamiar autora do narzędzi, które chcą wyodrębnić dane tabelaryczne z dokumentu.

Istnieje wiele alternatyw dla używania tabel HTML dla układu, głównie przy użyciu pozycjonowania CSS i modelu tabeli CSS [CSS]

+0

tabele będą obsługiwane w przyszłości? –

+2

@Cruze Oczywiście będą one obsługiwane w przyszłości. Tabele są ważną częścią HTML. – str

5

Według specyfikacji, <table> reprezentuje dane z więcej niż jednym wymiarze i „nie mogą być stosowane jako substancje pomocnicze układu.”

Jeśli chcesz wyświetlić dane tabelaryczne z więcej niż jednym wymiarem, zdecydowanie powinieneś użyć tabeli. Jeśli potrzebujesz tylko kolumn, nie rób tego. Istnieje wiele frameworków CSS, takich jak bootstrap, które mogą uprościć style potrzebne do zbudowania siatki.

+4

Jest to jeden z punktów, w których wersje specyfikacji WHATWG i W3C są ze sobą sprzeczne. Specyfikacja WHATWG, tak, całkowicie [zakazuje] (http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-table-element) za pomocą tabel dla układu i nazywa tę praktykę "niezgodną". Z drugiej strony, [wersja W3C] (http://www.w3.org/html/wg/drafts/html/CR/tabular-data.html#the-table-element) sugeruje jedynie, że "Tabele * powinny nie * należy używać jako pomocy układu "i wyjaśnia, że" Jeśli tabela ma być używana do układu, musi być oznaczona atrybutem "role =" prezentacja "' ". –

Powiązane problemy