Can I use divs inside of tables?

Get Started
1

I’m using embedded CSS styles until I learn more about CSS.
I’m also using tables. Can I use div tags to position (or float?) graphics within a table?
Thanks

2

yes you can.

3

You don’t need to use divs to position images in a table. There are a few other ways you can achieve this.

  • text-align:left or text-align:right applied to a container element will align everything in it to the left or right (text and images)

  • In the image tag itself you can use the align attribute. For example: <img src=“…” align=“left” /> will align your image to the left and text will wrap around it. Same thing goes for align=“right”

  • You can float images using inline css or a defined class.

Using div tags would just be adding another container within your table when you can just as easily apply code to the table to affect everything in it or to individual objects as needed.

4

Most CSS positioning is relative to the parent element (even position:absolute;, so if you are positioning or floating something that is inside a table cell, it will be positioned in relation to the edges of the table cell.

You only need to use a <div> if there is no one element already there that you want to position. So if you want to position an image, just apply the CSS to the <img>, no need to put an extra <div> in there.

5

divs do not play nicely inside tables.

6

If what you are placing in the table needs to be in a div then it is almost certain that it shouldn’t be in a table. Most tabular data wouldn’t need divs wrapped around the individual entries.

7

Let me say what everyone here is dying to say, but may just be too polite.

You can use divs INSTEAD of tables. Its much better to use divs for styling / positioning. Tables have a role to play - and that role is for tabulated information.

Don’t get me wrong here - it took me ages to let go of my old WYSIWYG web editor and learn just enough css and div layout to get going. Now I can say that I spend much less time fiddling with tables.

The next step - truly fluid websites where everything is scalable - can’t quite get my head around that one just yet.

8

You can also apply alignment to the cell itself:
<TD valign=“top”>
<TD valign=“bottom”>
<TD valign=“right”>
<TD valign=“left”>

I’d have to agree about not putting a DIV inside of a table, that can lead to some inconsistencies…

9

The above quote is accurate.

I have tried through trial, error, and many headaches. DIVs in tables, just do not work. I’m one of those that managed to learn the hard way.