css: tableless table

by prettyscripts on 2008-05-23 12:22:59

csshtml

a table layout can be achieved without <table> in html, with <div> and css.

CSS:

.col { width: 200px; float: left; }

Code:

<div>
    <div class="col">row 1, col 1</div>
    <div class="col">row 1, col 2</div>
</div>
<div style="clear: both;">
    <div class="col">row 2, col 1</div>
    <div class="col">row 2, col 2</div>
</div>
<div style="clear: both;"></div>

using <span>?

do not use <span> to define table cell.

according to specification, width property does not apply to in-line elements, which includes <span&gt;.

Tags: css, html, span, table

No feedback yet

Leave a comment


Your email address will not be revealed on this site.
PoorExcellent
note: all comments are moderated. do not spam and do not advertise. only comments relevant to the post will be published.
(Line breaks become <br />)
(For my next comment on this site)
(Allow users to contact me through a message form -- Your email will not be revealed!)