Wie erreicht man ein Tabellenlayout ohne Tabellen?

Question

Im Namen des Fortschritts (und des Lernens) wie kann ich Tabellen von meinem Code befreien und dasselbe Layout erreichen?

Zum Beispiel, hier ist meine Tabelle:

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

Und die entsprechende 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

erstellen Stil:

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

und dann Ihren Körper mit DIVs erstellen, um die Blöcke zu trennen und anzuwenden, die Klasse zu jedem:

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>