Come ottenere il layout della tabella senza utilizzare le tabelle?

Question

In nome del progresso (e dell'apprendimento) come posso liberare tabelle dal mio codice e ottenere lo stesso layout?

Per esempio, qui è il mio tavolo:

<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> 

E il 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/

Answer 1

Creare uno stile come:

.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>

e quindi creare il vostro corpo utilizzando DIV per separare i blocchi e applicare la classe a ciascuno:

Answer 2

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>