Question

<table>  
<tr>
<td></td>
<td></td>
</tr>
</table>

How do i replicate this kind of a structure using <div> or <span>‘ed CSS

Answer 1

Depends on what you’re trying to replicate.

With the simple example you’ve given, it’s not easy to tell exactly what you’re trying to achieve, but if what you’re tring to do is put two blocks side by side (ie as columns in a page layout), you just need to create a couple of <div> elements and style them using CSS to appear next to each other. Depending on exactly what you want, there are a number of ways you could do the stylesheets.

One option would be to set them both as float:left;. Use width:... to set how wide you want them in pixels or percent.

If float is too complex for you (and it is quite a big jump in concept from a table-based layout), you may want to consider using display:inline-block; instead. This will also allow the <div>s to be positioned next to each other, but gives you more control over how they position themselves.

Finally, if the contents of the <table> is actually a table of data, don’t be afraid of keeping it in a table – the <table> tag and its friends are still valid HTML, and putting tabular data into a table is still a good thing.