Using Divs Inside Tables

Despite their status as mortal enemies, Divs and Tables can work together if you need them to. Because of the ability to use vertical centering in tables, it is a somewhat popular technique to use a single-celled table with both horizontal and vertical centering to absolutely center your page content in a browser window (mostly only useful for fixed-size content).

One important thing to remember when putting a div inside of a table is that the div needs to live inside of a particular table cell, meaning inside of a td element which is inside of a tr or th element.

To see what I mean, take a look at a table like this:

<table border=1 width=200 cellpadding=10>
	<tr>
		<td>
			<p>I'm text in a cell.</p>
		</td>
		<td>
			<p>I'm text in a cell.</p>
		</td>
		<td>
			<p>I'm text in a cell.</p>
		</td>  
	</tr>
	<tr>
		<td>
			<p>I'm text in a cell.</p>
		</td>
		<td>
			<p>I'm text in a cell.</p>
		</td>
		<td>
			<p>I'm text in a cell.</p>
		</td>  
	</tr>
</table>

Now you want to add another row to this table and put a div inside it, you might do this:

<table border=1 width=200 cellpadding=10>
	<tr>
		<td>
			<p>I'm text in a cell.</p>
		</td>
		<td>
			<p>I'm text in a cell.</p>
		</td>
		<td>
			<p>I'm text in a cell.</p>
		</td>  
	</tr>
	<tr>
		<td>
			<p>I'm text in a cell.</p>
		</td>
		<td>
			<p>I'm text in a cell.</p>
		</td>
		<td>
			<p>I'm text in a cell.</p>
		</td>  
	</tr>
	<tr>
		<div id="my_box">
			<p>I'm text in a div.</p>
		</div>
	</tr>
</table>

But that breaks the layout! Strange but true. See below:

What you need to do is make sure the div is inside an actual table cell, a td or th element, so do that:

<tr>
		<div id="my_box">
			<td colspan=3>
				<p>I'm text in a div.</p>
			</td>
		</div>
	</tr>

And you should get what you are expecting, a fully style-able div inside a table: