It isn't a case of CSS or HTML. They work alongside each other.
For a standards compliant page you only want to be using tables for tabular data. Contents tables, budgets, cash flows - those sort of things. For positioning things you really want to be using something else. Divs (short for division) are a good solution.
Try the following code. There's two parts. The HTML and the CSS to go in either your external CSS file or in the style tags on the HTML page itself.
HTML Code:
<div class="picture">
<img src="blank.gif" alt="picture"/>
<p>Description Here</p>
</div>
<div class="picture">
<img src="blank.gif" alt="picture"/>
<p>Description Here</p>
</div>
<div class="picture">
<img src="blank.gif" alt="picture"/>
<p>Description Here</p>
</div>
<div class="picture">
<img src="blank.gif" alt="picture"/>
<p>Description Here</p>
</div>
<br class="clearleft"/>
This will give you a row of 4 pictures with the descriptions underneath. The <br> at the end clears the left floats I applied to the divs. Without this content underneath would appear in the row with the pictures.
CSS Code:
.picture {
float: left;
}
.clearleft {
clear: left;
}
There's a lot more you can do to these to make it a bit nicer. For example, adding borders & padding to the elements to make them line up nicer. If you want me to run through some of this with you, let me know.
Linear Mode
