web-dev-qa-db-fra.com

Remplacer le tableau HTML par des divs

D'accord, j'essaie d'accepter l'idée que les tables html ne devraient pas être utilisées, et que les divs devraient l'être. Cependant, j'ai souvent du code qui ressemble au suivant

<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 je veux que les contrôles soient alignés. Comment pourrais-je faire cela sans utiliser de tables?

htmlcsshtml-table
55
Jacob Adams

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.

43
partoa

Veuillez noter que même si les tableaux sont déconseillés comme principal moyen de mise en page, ils ont toujours leur place. Les tableaux peuvent et devraient être utilisés quand et où cela est approprié et jusqu'à ce que certains des navigateurs les plus populaires (ahem, IE, ahem) deviennent plus conformes aux normes, les tableaux sont parfois le meilleur itinéraire vers une solution.

25
KOGI

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;
   }
10
Wavesailor

Vous pouvez créer des formes simples basées sur des flottants sans avoir à perdre votre disposition 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>

Cependant, cela a tendance à se décomposer lorsque vous avez des dispositions de formulaire complexes où il y a une grille de plusieurs colonnes de largeur fixe et flexible. À ce stade, vous devez décider de vous en tenir aux divs et d'abandonner la disposition des liquides au profit de simplement tout déposer dans des positions de pixels fixes, ou de laisser les tableaux le faire.

Pour moi personnellement, la mise en page liquide est une fonctionnalité plus importante que les éléments exacts utilisés pour mettre en forme le formulaire, donc je choisis généralement des tableaux.

4
bobince

Fondamentalement, cela revient à utiliser une page à largeur fixe et à définir la largeur de ces étiquettes et contrôles. Il s'agit de la manière la plus courante d'implémenter des dispositions sans table.

Il existe de nombreuses façons de définir des largeurs. Blueprint.css est un framework css très populaire qui peut vous aider à configurer des colonnes/largeurs.

1
Ken Browning

il existe un outil en ligne très utile pour cela, il suffit de transformer automatiquement la table en divs:

http://www.html-cleaner.com/features/replace-html-table-tags-with-divs/

Et la vidéo qui l'explique: https://www.youtube.com/watch?v=R1ArAee6wEQ

J'utilise cela quotidiennement. J'espère que ça aide;)

1
Kaszoni Ferencz