22

I know that it's not a good idea to place div inside td, but what about span and other elements? Which elements are ok to place inside td and which are not and why?

Edit: The problem is that I have an old table layout and I need to make modifications there. To do so, I need to add elements inside td, so what elements will be the least evil to insert into <td>?

zzzzBov
  • 174,988
  • 54
  • 320
  • 367
dhblah
  • 9,751
  • 12
  • 56
  • 92

2 Answers2

26

The HTML spec specifies which elements may be direct decendants of other elements.

The <td> element has a flow content content model, which means it can contain:

a abbr address area (if it is a descendant of a map element) article aside audio b bdi bdo blockquote br button canvas cite code command datalist del details dfn dialog div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hgroup hr i iframe img input ins kbd keygen label map mark math menu meter nav noscript object ol output p pre progress q ruby s samp script section select small span strong style (if the scoped attribute is present) sub sup svg table textarea time u ul var video wbr text

zzzzBov
  • 174,988
  • 54
  • 320
  • 367
  • I got it from here: http://stackoverflow.com/questions/1110915/is-a-div-inside-a-td-a-bad-idea see point about sizes. – dhblah Aug 23 '12 at 16:10
  • The title of your question asks if it's **valid**. Avoid using `` elements for layout, as that's a terrible idea.
     – zzzzBov Aug 23 '12 at 16:11
  • @gasan, if the point was something presented in an answer to an older question, why ask a new question (which is too vague to be answered meaningfully)? – Jukka K. Korpela Aug 23 '12 at 16:12
  • @gasan, also, please include *all relevant information* in the question, otherwise the answers will not be useful to you. – zzzzBov Aug 23 '12 at 16:13
  • @zzzzBov, no, the question asks if it’s “valid.” The quotes make it effectively an opinion question. – Jukka K. Korpela Aug 23 '12 at 16:14
  • @JukkaK.Korpela, I've seen quotes abused for emphasis too often, and given the...quality of the question, I simply provided an answer to the literal question that was asked. – zzzzBov Aug 23 '12 at 16:15
  • @zzzzBov what you provided is a list of elements that are associated with a flow content, I don't understand how that relates to the question, which elements can be placed in td element. Or you're implying that any flow content element may contain any other flow content element? – dhblah Aug 24 '12 at 10:44
  • 1
    @gasan, please read the entire answer: "The `` element has a `flow content` content model, which means it can contain [the listed elements]". I don't know how I can make that any more clear. – zzzzBov Aug 24 '12 at 13:01
  • @zzzzBov yes, associated with a flow content, also there are other elements that are associated with a flow content. But what does it say about what element can contain? – dhblah Aug 24 '12 at 13:26
  • @gasan, I'm not sure I understand your question. The element's listed content model is the collection of elements that can be direct descendants of the element. All of those listed elements may be written within a `` element. – zzzzBov Aug 24 '12 at 13:30
  • @Matthew Lehner, I understand why you made the edit you did, but it's generally considered poor form to edit questions or answers without asking first. Additionally, your edit to the question title had a mistake. – zzzzBov Aug 17 '15 at 01:08
  • @zzzzBov Sorry about that – I'm new to the editing side of things. I'll definitely take that into account next time. :) – Matthew Lehner Aug 18 '15 at 21:44
  • Thanks a hell lot. The list saved my day. I wanted to restructure information within a TD and had been playing with DIV and SPAN. Now I see

    in the list. Works like charm.

     – Aditya Mar 09 '16 at 13:08
4

The idea that you shouldn't put a div inside a table is more about using semantic markup with CSS to style the layout.

That being said, <table> and its related elements should be used to display data in a tabular format. If it makes sense for one of the cells in the table to contain more complex markup, then so be it.

In the past, <table> was used because it easily gave a website a grid layout, but this should now be done using CSS to allow your site to be more accessible.

Matthew Lehner
  • 3,967
  • 3
  • 26
  • 35