Comment parvenir à la disposition de table sans l'aide de tables?

Au nom du progrès (et l'apprentissage) comment puis-je me débarrasser des tables à partir de mon code et d'obtenir la même mise en page?

Par exemple, voici ma 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 />[email protected]</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>

Et le 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/

Ne pas réutiliser id les balises comme vous êtes. Ceux-ci devraient être class="footertext".
Avec le class="footertext": jsfiddle.net/userdude/tYjKw/1
Désolé, oui, c'est comment il est sur le site en ce moment (d'où le CSS ".footertext" et non pas "#footertext"... mon mauvais moment de la saisie ici... merci!

OriginalL'auteur bigtoothmedia | 2012-06-15

  1. 16

    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>
    Concernant la question d'avoir une table sans l'aide d'un <table>-tag, ce qui serait la meilleure et une solution moderne. Et vous pouvez également utiliser "vertical-align:middle" qui n'est pas si facile à aborder, avec juste un filet, mais il est indiqué dans le violon lien. Remarque ici, que cela ne fonctionne pas sur IE7 et ci-dessous.

    OriginalL'auteur

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

    Et le 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%;}

    Je vous suggère de regarder dans certains gridsystems, comme 960grid (http://960.gs/) ou 1140grid (http://cssgrid.net/), vous aidera beaucoup.

    Extrait 960grid diapositives - l'air très intéressant... très certainement explorer davantage. Merci!
    Personnellement, j'utilise 1140px, pour des écrans plus larges, et jusqu'à présent il n'a pas manqué moi encore, c'est flexible, et à l'aide de @media-queries, vous pouvez l'adapter simplement. Conseil personnel: obtenir. débarrasser. de. l'. des tables. et. l'. .<br>. 😀
    Cool, je vais jeter un oeil - les tables sont de l'histoire ancienne pour moi maintenant, grâce à quelques éléments de réponse à cette question! Jetez un oeil à ma source pour le pied de page sur poltairhomes.com (excusez le désordre créé par wordpress! les commandes du client!) - comment puis-je obtenir débarrasser de la <br>'?
    <br>'s sont créés par WordPress? Btw, je vous suggère d'ajouter .textwidget > .footerItem:last-child {padding: 0;} comme votre pied de page est un peu de la rupture.
    Pas de <br>'été-moi d'essayer d'obtenir le droit de disposition! Je faisais allusion à la balises html étant trop compliqué - wordpress génère le html, du CSS et de PHP - mais non, les <br>'s ont été de ma faute! Qu'entendez-vous par "casser"? Semble ok pour moi?

    OriginalL'auteur zbrukas