Geek Answers Handbook

How to achieve a table layout without using tables?

In the name of progress (and learning), how can I get rid of tables from my code and achieve the same layout?

For example, here is my table:

<table cellspacing="0px"> <tr> <td> <img src="http://www.poltairhomes.com/images/footerlogo.png" /> </td> <td id="footertext"> <p>Poltair Homes Plc<br />Registered Office: The Old Chapel, Greenbottom, Truro, Cornwall, TR4 8QP.<br />Registered in England & Wales: 3955425<br />www.poltairhomes.com<br />info@poltairhomes.com</p> </td> <td id="footertext"> <p>Terms and Conditions | Privacy Policy | Sitemap</p> </td> <td id="footertext"> <p>SIGN UP FOR OUR NEWSLETTER:</p> <img src="http://www.poltairhomes.com/images/signup(temp).png" /> </td> </tr> </table>

And the corresponding CSS:

 .footertext { margin: 0; padding:0 5px 0 5px; color: #AAA; font-size: 10px; font-family:Arial, Helvetica, sans-serif; text-align:center; border-left: 1px solid #CCC; }

http://jsfiddle.net/userdude/tYjKw/

+8
html css table
source share
3 answers

Create a style like:

 .footerItem { float: left; } 
 <div class="footerItem"> <img src="http://www.poltairhomes.com/images/footerlogo.png" /> </div> <div class="footerItem"> <p>Poltair Homes Plc<br />Registered Office: The Old Chapel, Greenbottom, Truro, Cornwall, TR4 8QP.<br />Registered in England & Wales: 3955425<br />www.poltairhomes.com<br />info@poltairhomes.com</p> </div> <div class="footerItem"> <p>Terms and Conditions | Privacy Policy | Sitemap</p> </div> <div class="footerItem"> <p>SIGN UP FOR OUR NEWSLETTER:</p><img src="http://www.poltairhomes.com/images/signup(temp).png" /> </div>

and then create your body using DIVs to separate the blocks and apply a class to each of them:

+2
source share

CSS

 .table { display: table; } .table-row { display: table-row; } .table-cell { display: table-cell; }

HTML:

 <div class="table"> <div class="table-row"> <div class="table-cell">Table cell 1</div> <div class="table-cell">Table cell 2</div> </div> </div>
+15
source share
 <div class="table"> <div class="row"> <div class="cell twocol"> <span>Content1</span> </div> <div class="cell twocol"> <span>Content2</span> </div> </div> <div class="row"> <div class="cell onecol"> <span>Content3</span> </div> </div> </div>

And CSS

 .table {width: 100%; height: 100%;} .row {width: 100%; min-height: 1px; height: auto; margin: 0;} .cell {float: left; margin: 0; padding: 0;} .onecol {width: 100%;} .twocol {width: 50%;}

I suggest you look into some grid systems, such as 960grid (http://960.gs/) or 1140grid (http://cssgrid.net/), which will help you.

+9
source share

More articles:


All Articles