div внутри стола - PullRequest
Новая
       20

div внутри стола

32 голосов
/ 04 июня 2010

Может кто-нибудь сказать мне, разрешен ли div внутри таблицы или нет согласно w3c

Ответы [ 5 ]

42 голосов
/ 04 июня 2010 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>test</title>
  </head>
  <body>
    <table>
      <tr>
        <td>
          <div>content</div>
        </td>
      </tr>
    </table>
  </body>
</html>

Этот документ был успешно проверен как XHTML 1.0 Transitional!

38 голосов
/ 04 июня 2010

Вы не можете поместить div напрямую внутрь table, например: 

<!-- INVALID -->
<table>
  <div>
    Hello World
  </div>
</table>

Поместить div внутрь элемента td или th можно, однако: 

<!-- VALID -->
<table>
  <tr>
    <td>
      <div>
        Hello World
      </div>
    </td>
  </tr>
</table>
15 голосов
/ 04 июня 2010

вы можете поместить теги div внутри тега td, но не непосредственно внутри тега таблицы или tr. Примеры:

это работает: 

<table>
  <tr>
    <td> 
      <div>This will work.</div> 
    </td>
  </tr>
<table>

это не работает: 

<table>
  <tr>
    <div> this does not work. </div> 
  </tr>
</table>

и это не работает: 

<table>
  <div> this does not work. </div>
</table>
9 голосов
/ 04 июня 2010

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

Мало что можно получить и многое можно потерять, так как существует множество кросс-браузерных расхождений в отношении того, как обрабатываются значения ширины, полей, границ и т. Д. При их объединении. Я не могу сказать вам, сколько раз мне приходилось чистить такую ​​разметку для клиентов, потому что у них были проблемы с тем, чтобы их HTML правильно отображался в том или ином браузере.

Опять же, если вы не суетитесь о том, как все выглядит, не обращайте внимания на этот совет.

2 голосов
/ 04 июня 2010

Это разрешено, поскольку TD может содержать встроенные элементы блока AND.

Здесь вы можете найти его по ссылке: http://xhtml.com/en/xhtml/reference/td/#td-contains

...