Floating table cells - html

Question

How can I float td's within a table?
I have the following table:
<table align="center">
<tr>
<td>Huge IMAGE</td>
<td>VERY long TEXT</td>
<td>Annotations</td>
</tr>
</table>
Now I'd like the td-cells to move like this (but with floats) when a small end user device loads this view:
<table align="center">
<tr>
<td>Huge IMAGE</td>
</tr>
<tr>
<td>VERY long TEXT</td>
</tr>
<tr>
<td>Annotations</td>
</tr>
</table>

Answer 1

I would highly advise that you use a nested div structure instead of tables for your layout.
<div class="outerContainer">
<div class="imageHolder"></div>
<div class="textDescHolder"></div>
<div class="annotations"></div>
</div>
Then use "display: inline-block" on the inner div elements to control the layout. Although I am unclear as to how you wish to display the text and annotations in relation to the images.

Answer 2

I don't know exactly, what you want to do, but does it have to be a table? Maybe you should use an unordered list instead. In this list you can float your list items.
Something like:
http://jsfiddle.net/7kM48/
CSS
ul li{
float: left;
width: 100px;
height: 100px;
list-style: none;
}
HTML
<ul>
<li style="background-color: yellow;">Content 1</li>
<li style="background-color: fuchsia;">Content 2</li>
<li style="background-color: green;">Content 3</li>
</ul>

Answer 3

You could try using columns from bootstrap:
<div class="container" style="text-align: center">
<div class="col-md-4 col-sm-12">
Huge Image
</div>
<div class="col-md-4 col-sm-12">
Very long text
</div>
<div class="col-md-4 col-sm-12">
Annotations
</div>
</div>
this way you have the same output in a normal screen, and one row each for a small device