To place content in a specific position within a table cell, first put a relatively positioned container div inside the table cell, then position something absolutely within the container. The other alternative is to use a completely CSS solution, although frankly if the layout is fundamentally tabular in nature (...like six examples arranged in two columns and 3 rows...) then tables are quicker to get right. You don't have to worry about clearing floats, or accounting for different heights or widths within different cells in the same row or column. If the content is dynamic, CSS would require you to know all the widths of all the content before styling anything. Tables lets you leave a lot of the math up to the browser. So the bottom line is, CSS is great, but don't completely discard tables -- they still are the best tool for some jobs.
| Using Tables, with CSS in cells | Using only CSS | ||||||
|
Test1
Test4
Test2
Test5
Test3
Test6
|
Here is the code for the table above:
<div style="position:relative;width:200px;background:#dccbbe;border:1px solid black;">
<table border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="white">
<tr>
<td align="center">Test1</td>
<td ><div style="position:relative;height:50px;width:70px;background:yellow;"><span style="position:absolute;top:0;left:0;background:red;">Test4</span></div></td>
</tr>
<tr>
<td><div style="position:relative;height:50px;width:50px;text-align:center;line-height:50px;background:purple;"><span style="background:magenta;">Test2</span></div></td>
<td><div style="position:relative;height:50px;width:70px;background:green;">
<div style="position:absolute;bottom:0;right:0;background:lime;">Test5</div>
</div>
</td>
</tr>
<tr>
<td><div style="position:relative;height:70px;width:50px;text-align:center;line-height:70px;background:maroon;"><span style="background:pink;">Test3</span></div></td>
<td><div style="position:relative;height:50px;width:70px;background:blue;"><span style="position:absolute;top:15px;right:0;background:aqua;">Test6</span></div></td>
</tr>
</table>
</div>
And for the divs
<div style="position:relative;width:200px;background:#dccbbe;border:1px solid black;">
<div style="position:relative;width:120px;margin:0 auto; background:white;">
<div style="float:left;height:50px;width:50px;line-height:50px;text-align:center;">Test1</div>
<div style="float:left;position:relative;height:50px;width:70px;background:yellow;"><span style="position:absolute;top:0;left:0;background:red;">Test4</span></div>
<div style="float:left;position:relative;height:50px;width:50px;text-align:center;line-height:50px;background:purple;"><span style="background:magenta;">Test2</span></div>
<div style="float:left;position:relative;height:50px;width:70px;background:green;">
<div style="position:absolute;bottom:0;right:0;background:lime;">Test5</div>
</div>
<div style="float:left;position:relative;height:70px;width:50px;text-align:center;line-height:70px;background:maroon;"><span style="background:pink;">Test3</span></div>
<div style="float:left;position:relative;height:70px;width:70px;">
<div style="position:absolute;top:10px;height:50px;width:70px;background:blue;"><span style="position:absolute;top:15px;right:0;background:aqua;">Test6</span></div>
</div>
<div style="clear:both;"></div>
</div>
</div>
You be the judge... which is the cleaner approach?