Является ли DIV внутри TD плохой идеей?

Ответ 1

Использование div instide a td не хуже любого другого способа использования таблиц для макета. (Некоторые люди никогда не используют таблицы для макета, хотя я и являюсь одним из них.)

Если вы используете div в td, вы, тем не менее, столкнетесь с ситуацией, когда может быть трудно предсказать, как будут измеряться элементы. По умолчанию для div необходимо определить его ширину от родительского элемента, а значение по умолчанию для ячейки таблицы - определять его размер в зависимости от размера его содержимого.

Правила для размера div должны быть четко определены в стандартах, но правила для того, как размер td должен быть определен, не так точно определены, поэтому разные браузеры используют несколько разные алгоритмы.

Ответ 2

После проверки XHTML DTD я обнаружил, что элементу <TD> -элемент разрешено содержать элементы блока, такие как заголовки, списки, а также < & ДИВА GT; -элементы. Таким образом, использование <DIV> -элемента внутри <TD> -элемента не нарушает стандарт XHTML. Я уверен, что другие современные варианты HTML имеют эквивалентную модель контента для элемента <TD> -элемент.

Вот соответствующие правила 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">

Ответ 3

Нет. Не обязательно.

Если вам нужно разместить DIV в TD, убедитесь, что вы правильно используете TD. Если вам не нравятся табличные данные и семантика, то в конечном итоге вам не понадобятся DIV в TD. Я не думаю, что есть проблема, хотя, если вам нужно это сделать, все в порядке.

В соответствии с Спецификацией HTML

A <div> может быть размещен там, где ожидается содержимое потока ¹ который является содержимым <td> model ².

Ответ 4

Таблица-ячейка может законно содержать элементы уровня блока, поэтому она не является, по сути, faux-pas. Разумеется, имплантация браузера оставляет эту теоретико-теоретическую позицию. Это может вызвать проблемы с компоновкой и ошибки.

Хотя, поскольку таблицы использовались для макета, а иногда все еще есть, я полагаю, что большинство браузеров правильно отобразит контент. Даже IE.

Ответ 5

Если вы хотите использовать позицию: absolute; на div с position: relative; на td вы столкнетесь с проблемами. FF, safari и chrome (mac, а не PC) не будут позиционировать div относительно td (как и следовало ожидать) это также верно для div с display: table-whatever;, поэтому, если вы хотите сделать это, вам понадобятся два divs, один для контейнера width: 100%; height: 100%; и без границы, поэтому он заполняет td без какого-либо визуального воздействия. а затем абсолютный.

кроме этого, почему бы просто не разделить ячейку?

Ответ 6

Я столкнулся с проблемой, разместив <div> внутри <td>.

Мне не удалось идентифицировать div, используя document.getElementById(), если я поместил его внутри td. Но снаружи он работал нормально.

Ответ 7

Как упоминалось выше, это может быть не очень хорошо для целей макета. Я пришел к этому вопросу, потому что мне было интересно то же самое, и я только хотел знать, будет ли это действительный код.

Так как он действителен, вы можете использовать его для других целей. Например, то, что я собираюсь использовать для этого, - это добавить некоторые фантастические "CSSed" div внутри строк таблицы, а затем использовать быструю функцию jQuery, чтобы позволить пользователю сортировать информацию по цене, имени и т.д. Таким образом, только таблица макета даст мне "вертикальный порядок", но я буду контролировать ширину, высоту, фон и т.д. divs с помощью CSS.

Ответ 8

Два способа борьбы с ним

• положить div внутри тега tbody
• положить div внутри тега tr

Оба подхода действительны, если вы видите feference: fooobar.com/questions/48261/...

Ответ 9

Разрывает семантика, что все. Он отлично работает, но могут быть экранизаторы или что-то по дороге, которые не будут наслаждаться обработкой вашего HTML, если вы "сложите семантику".