Remplacer le tableau HTML par des divs

Question

Très bien, j'essaie de croire que les tableaux HTML ne devraient pas être utilisés, et que les div devraient l'être. Cependant, j'ai souvent un code qui ressemble à celui-ci

 <table>
    <tr>
        <td>First Name:</td>
        <td colspan="2"><input  id="txtFirstName"/></td>
    </tr>
    <tr>
        <td>Last Name:</td>
        <td colspan="2"><input  type="text" id="txtLastName"/></td>
    </tr>
    <tr>
        <td>Address:</td>
        <td>
            <select type="text" id="ddlState">
                <option value="NY">NY</option>
                <option value="CA">CA</option>
            </select>
        </td>
        <td>
            <select type="text" id="ddlCountry">
                <option value="NY">USA</option>
                <option value="CA">CAN</option>
            </select>
        </td>
    </tr>
</table>
 

Je veux que les étiquettes soient alignées et que les contrôles soient alignés. Comment pourrais-je faire cela sans utiliser de tables?

Answer 1

Cela devrait faire l'affaire.

 <style>
div.block{
  overflow:hidden;
}
div.block label{
  width:160px;
  display:block;
  float:left;
  text-align:left;
}
div.block .input{
  margin-left:4px;
  float:left;
}
</style>

<div class="block">
  <label>First field</label>
  <input class="input" type="text" id="txtFirstName"/>
</div>
<div class="block">
  <label>Second field</label>
  <input class="input" type="text" id="txtLastName"/>
</div>
 

J'espère que vous comprenez le concept.

Answer 2

Veuillez noter que même si les tableaux sont déconseillés comme moyen principal de mise en page, ils ont toujours leur place . Les tables peuvent et doivent être utilisées quand et le cas échéant et jusqu'à ce que certains des navigateurs les plus populaires (ahem, IE, ahem) soient davantage conformes aux normes, les tables sont parfois le meilleur moyen de trouver une solution.

Answer 3

J'ai cherché partout une solution facile et j'ai trouvé ce code qui fonctionnait pour moi. Le right div est une troisième colonne que j'ai laissée dans un souci de lisibilité.

Voici le HTML:

 <div class="container">
  <div class="row">
    <div class="left">
      <p>PHONE & FAX:</p>
    </div>
    <div class="middle">
      <p>+43 99 554 28 53</p>
    </div>
    <div class="right"> </div>
  </div>
  <div class="row">
    <div class="left">
      <p>Cellphone Gert:</p>
    </div>
    <div class="middle">
      <p>+43 99 302 52 32</p>
    </div>
    <div class="right"> </div>
  </div>
  <div class="row">
    <div class="left">
      <p>Cellphone Petra:</p>
    </div>
    <div class="middle">
      <p>+43 99 739 38 84</p>
    </div>
    <div class="right"> </div>
  </div>
</div>
 

Et le CSS:

 .container {
    display: table;
    }
.row  {
    display: table-row;
    }
.left, .right, .middle {
    display: table-cell;
    padding-right: 25px;
    }
.left p, .right p, .middle p {
    margin: 1px 1px;
   }
 

Answer 4

Vous pouvez créer simple flotteur à base de formulaires sans avoir à perdre votre mise en page liquide. Par exemple:

<style type="text/css">
    .row { clear: left; padding: 6px; }
    .row label { float: left; width: 10em; }
    .row .field { display: block; margin-left: 10em; }
    .row .field input, .row .field select {
        width: 100%;
        box-sizing: border-box;
        -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -khtml-box-sizing: border-box;
    }
</style>

<div class="row">
    <label for="f-firstname">First name</label>
    <span class="field"><input name="firstname" id="f-firstname" value="Bob" /></span>
</div>
<div class="row">
    <label for="f-state">State</label>
    <span class="field"><select name="state" id="f-state">
        <option value="NY">NY</option>
    </select></span>
</div>

Ce n'tendance à briser, bien que, quand vous avez des formes complexes mises en page où il y a une grille de multiples fixe et flexible de la largeur des colonnes. À ce stade, vous avez à décider de rester avec des divs et abandonner mise en page liquide en faveur de l'insertion tout en fixe positions des pixels, ou de laisser des tables de le faire.

Pour moi personnellement, mise en page liquide est plus importante, de la convivialité caractéristique que l'exacte des éléments utilisés pour mettre en forme le formulaire, j'ai donc l'habitude d'aller pour les tables.

Answer 5

En gros, il s’agit d’utiliser une page à largeur fixe et de définir la largeur de ces étiquettes et contrôles. C’est le moyen le plus courant d’implémenter des dispositions sans table.

Il y a plusieurs façons de régler les largeurs. Blueprint.css est un framework CSS très populaire qui peut vous aider à configurer des colonnes / largeurs.