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

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

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.

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">

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 ¹ , czyli <td>modelu treści ² .

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.

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?

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.

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.

Dwa sposoby radzenia sobie z tym

1. umieścić divw tbodytagu
2. umieścić divw trtagu

Oba podejścia są prawidłowe, jeśli widzisz feference: https://stackoverflow.com/a/23440419/2305243

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