Czy DIV wewnątrz TD to zły pomysł?


143

Wygląda na to, że gdzieś słyszałem / czytałem, że <div>wnętrze a <td>było nie-nie. Nie żeby to nie zadziałało, po prostu coś o tym, że nie są tak naprawdę kompatybilne ze względu na ich typ wyświetlania. Nie mogę znaleźć żadnych dowodów na poparcie mojego przeczucia, więc mogę się całkowicie mylić.

Odpowiedzi:


144

Używanie divinstide a tdnie jest gorsze niż jakikolwiek inny sposób używania tabel do układu. (Niektórzy ludzie nigdy nie używają tabel do układu, a ja jestem jednym z nich.)

Jeśli użyjesz a divin a td, znajdziesz się w sytuacji, w której może być trudno przewidzieć rozmiar elementów. Domyślnie element div określa jego szerokość na podstawie jego elementu nadrzędnego, a domyślnie komórka tabeli określa jego rozmiar w zależności od rozmiaru zawartości.

Zasady określające, jak divnależy zmieniać rozmiar litery a, są dobrze zdefiniowane w standardach, ale zasady określające, jak tdnależy zmieniać rozmiar litery a, nie są tak dobrze zdefiniowane, dlatego różne przeglądarki używają nieco innych algorytmów.


Podejrzewam, że stąd wzięło się moje przeczucie. Dzięki za wyjaśnienie tego.
jcollum

9
Jeśli Twoje kolumny mają wstępnie określoną szerokość, nie powinno to stanowić problemu. Pamiętaj tylko, aby ustawić układ tabeli: ustalony na stole, aby przeglądarki nie zastępowały twoich szerokości (potencjalnie prowadzących do problemów)
Jens Roland

6
Nigdy nie powiedział, że używa tabel do układów.
texelate

@texelate table-layout:fixedCSS nie jest tym, czym myślisz, że jest. Zmniejsza liczbę obliczeń wykonywanych przez przeglądarki podczas renderowania tabel, ponieważ oblicza tylko rozmiar pierwszego wiersza.
SteveB

73

Po sprawdzeniu XHTML DTD odkryłem, że element <TD> może zawierać elementy blokowe, takie jak nagłówki, listy, a także elementy <DIV>. Tak więc użycie elementu <DIV> wewnątrz elementu <TD> nie narusza standardu XHTML. Jestem prawie pewien, że inne współczesne odmiany języka HTML mają równoważny model zawartości dla elementu <TD>.

Oto odpowiednie zasady DTD:

<!ELEMENT td %Flow;>
<!-- %Flow; mixes block and inline and is used for list items etc. -->
<!ENTITY %Flow "(#PCDATA | %block; | form | %inline; | %misc;>
<!ENTITY %block "p | %heading; | div | %lists; | %blocktext; | fieldset | table">

1
To jest konkretna odpowiedź, której szukałem. Więc uprzejmie dziękuję. Wyobrażam sobie, że dziś wieczorem będę spał trochę lepiej.
3Dom

Jedyna odpowiedź poparta przez pec.
peterchaula

Podziel się z nami, w którym miejscu DTD to wyjaśnia. Nie jest to łatwy dokument do odczytania. Dzięki!
pachnący

1
@redolent: Do mojej odpowiedzi dodałem odpowiednie reguły DTD.
Martin Liversage

A co ze specyfikacją HTML5, która nie jest XHTML?
zmiażdżyć

38

Nie, niekoniecznie.

Jeśli potrzebujesz umieścić DIV w TD, upewnij się, że używasz TD prawidłowo. Jeśli nie dbasz o dane tabelaryczne i semantykę, ostatecznie nie będziesz przejmować się DIV w TD. Nie sądzę, że istnieje problem choć - jeśli ma to zrobić, jesteś w porządku.

Zgodnie ze specyfikacją HTML

A <div>można umieścić tam, gdzie oczekuje się zawartości przepływu 1 , czyli <td>modelu treści 2 .


2
Zawsze chciałem odpowiedzieć na pytanie tak lub nie;)
Jani Hartikainen

+1 - naprawdę chciałem odpowiedzieć czymś dowcipnym, ale nie udało się.
karim79

Mimo że zebrało to więcej pozytywnych głosów, myślę, że Guffa poruszył kwestię, która nie jest tutaj poruszona (i może być źródłem mojego przeczucia)
jcollum

14

Komórka tabeli może legalnie zawierać elementy blokowe, więc nie jest z natury faux-pas. Wdrożenie przeglądarki pozostawia oczywiście tę spekulatywno-teoretyczną pozycję. Może to powodować problemy z układem i błędy.

Chociaż tabele były używane do układu - a czasami nadal są - wyobrażam sobie, że większość przeglądarek poprawnie wyrenderuje zawartość. Nawet IE.


Podejrzewam, że implementacja przeglądarki jest powodem, dla którego otrzymałem moje „czekaj, to zły pomysł”.
jcollum

13

Jeśli chcesz użyć pozycji: bezwzględna; na div z position: relative;td napotkasz problemy. FF, safari i chrome (ale Mac, nie PC) nie ustawią elementu div względem td (jak można by się spodziewać). Dotyczy to również elementów div z, display: table-whatever;więc jeśli chcesz to zrobić, potrzebujesz dwóch elementów div, jednego dla elementu pojemnik width: 100%; height: 100%;i bez obramowania, więc wypełnia td bez żadnego wizualnego wpływu. a potem absolutna.

poza tym, dlaczego po prostu nie podzielić komórki?


6
Jedyna praktyczna, nieświęta odpowiedź
Antony Hatchkins

2

Zmierzyłem się z problemem, umieszczając <div>wnętrze <td>.

Nie mogłem zidentyfikować elementu div, document.getElementById()jeśli umieściłem go w td. Ale na zewnątrz działało dobrze.


1

Jak wszyscy wspominali, może to nie być dobry pomysł na potrzeby układu. Doszedłem do tego pytania, ponieważ zastanawiałem się tak samo i chciałem tylko wiedzieć, czy to będzie prawidłowy kod.

Ponieważ jest ważny, możesz go używać do innych celów. Na przykład, zamierzam go użyć, aby umieścić kilka fantazyjnych elementów div "CSSed" w wierszach tabeli, a następnie użyć funkcji szybkiego jQuery, aby umożliwić użytkownikowi sortowanie informacji według ceny, nazwy itp. W ten sposób Jedyną tabelą układu jest „kolejność pionowa”, ale będę kontrolować szerokość, wysokość, tło itp. elementów div według CSS.



-4

Łamie semantykę , to wszystko. Działa dobrze, ale mogą być czytniki ekranu lub coś, co nie będzie przyjemne w przetwarzaniu twojego HTML, jeśli "złamiesz semantykę".


13
@Greg, dlaczego łamie semantykę? Element div to po prostu podział lub podpodział na poziomie bloku zawartości strony. W związku z tym umieszczanie ich w komórce tabeli nie jest zasadniczo i nieodwołalnie antysemantyczne.
David mówi, że przywróć Monice

2
Próbowałem napisać do Ciebie kilka odpowiedzi, które uzasadniałyby moją odpowiedź, ale nadal dochodziłem do osobistych opinii. : / Myślę, że moją najlepszą odpowiedzią byłoby to, że cokolwiek jest w twojej komórce, może być prawdopodobnie lepiej reprezentowane przez inny tag HTML. Jeśli naprawdę dzielisz komórki na komponenty, prawdopodobnie nie powinieneś używać tabeli na początku, powinieneś stylizować serię DIV dla swojego układu. Nie wiem, dlaczego nie mogę tego ująć w lepsze słowa ... przypuszczam, że przypisuję to IMHO.
Greg,

Hmm, czy masz na myśli, że TD jest semantycznie tym samym, co DIV, więc po co mieć ich dwa z rzędu?
jcollum

2
@jcollum: Nie, nie powiedziałbym, że są semantycznie takie same. TD jest zdecydowanie komórką w tabeli; jest częścią znanej struktury: tabela zawiera wiersze, wiersz zawiera komórki, komórki zawierają dane. DIV to tylko kontener ... może reprezentować wszystko w dowolnym czasie i dowolnym miejscu w dokumencie - musisz zastosować do niego styl, aby uzyskać z niego jakąkolwiek semantykę pod względem przeznaczenia w znaczniku.
Greg,

7
DIV jest semantycznie bez znaczenia, więc nie rozumiem, jak mogłoby to kiedykolwiek być niepoprawne.
Rex M
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.