Est tel alignement réalisable sans <table>?

Mon objectif est un alignement comme indiqué dans l'image jointe (les champs sur la gauche peut avoir toute la largeur, mais ceux sur le droit devrait commencer au même X de coordonnées).

Maintenant je suis à l'aide d'un simple code de la table pour y parvenir:

<table><tr>
<td>Left1</td><td>Right 1</td></tr>
<tr><td>Left 2</td><td>Right 2</td></tr></table>

Cependant, j'ai entendu dire que l'utilisation des tables est généralement mauvais. Est-il une manière que je pourrais obtenir le même design à l'aide de CSS? Le site web est conçu pour les appareils mobiles qui ne pouvait pas soutenir fantaisie CSS, de sorte que le code doit être aussi simple que possible.

MODIFIER: depuis que j'ai encore de temps en temps un avis sur cette question de personnes qui (sans doute) commencent tout juste à sortir avec HTML, comme je l'étais quand je l'ai fait, veuillez vous référer à la accepté de répondre par B T que c'est de loin la meilleure façon d'obtenir cette fonctionnalité. La question a suggéré comme un "double" (31 Mai 2016) n'offre actuellement pas de la table-row/tableau-colonne en fonction de CSS approche et vous oblige à faire deviner.

Quel est le problème avec un tableau? C'est ce à quoi ils sont destinés. Autre chose serait probablement plus complexe que l'utilisation d'une table.
Comme je l'ai dit, tout le design des articles que j'ai lu de décourager l'utilisation de tables, d'où la question.
Je suis d'accord que la table n'est pas la meilleure façon d'aller ici. Oui, les tables de faire le travail, mais ils ne sont pas sémantiquement correct, que vous n'êtes pas la création d'une table. Il est très trivial pour atteindre le même à l'aide de CSS (voir ma réponse)
À l'aide de tableaux pour la mise en page n'est pas une bonne pratique de conception. Utilisez des tableaux pour des données tabulaires, que ce qui avait été prévu pour.
Double Possible de Formulaires - Peut-on le faire sans tables?

OriginalL'auteur AM- | 2012-06-13

5

Ici, vous pouvez l'utiliser pour obtenir la puissance requise.

À l'aide de tableaux de l'OMI n'est pas une mauvaise pratique, en fait, ils doivent être utilisés lorsque des données tabulaires est nécessaire, ou le format de données ressemble à un tableau.

Cependant, la conception d'une page entière, ou quoi que ce soit de ne pas être affichés dans un format tabulaire, à l'aide d'un tableau est découragé, et est en fait très très mal.
Voici un échantillon à l'aide d'un non-structure de la table:

HTML :
```
<form>
    <label for="name">Email: </label><input id="name" type="email" placeholder="@" />
    <br/><br />
    <label>Password: </label><input type="password" id="password"  placeholder="*"/>
</form>
```
CSS:
```
label {
    width: 80px;
    display: block;
    vertical-align: middle;
    float:left;
    clear:left;
}
input {
    border-top-left-radius:5px;
    border-bottom-right-radius: 10px;
    background: #141414;
    color: #fdd56c;
    outline: none;
}
```
Voici un exemple

On peut se rendre à l'écart de l'utilisation de flotter dans l'exemple ci-dessus à l'aide de display:inline-block , et le css IE7 Hack comme *display:inline. Mise à jour de la réponse à claire le flotteur
à l'aide de br de cette façon est une mauvaise idée stackoverflow.com/questions/3937515/...

OriginalL'auteur Pranav 웃
4

Alors qu'il est possible de réaliser la même chose avec des tables, il serait considéré comme sémantiquement incorrect d'utiliser une table pour le but de la mise en page. D'autant plus que vous pouvez atteindre la même avec juste une ligne ou deux de CSS.

Donner vos étiquettes de largeur fixe (quelque chose de plus grand que le plus long texte de l'étiquette).
```
<style>
label {
    width: 100px;
    display: inline-block;
}
</style>

<label>Name</label>
<input type="text" />
<br/>
<label>Email Address</label>
<input type="text" />
```
Exemple

qu'advient-il si vous omettez le display:inline-block? (soi-disant IE7 ne le supporte pas)
Le navigateur va ignorer la largeur, puisque la largeur ne peut être appliqué à des éléments de niveau bloc.

OriginalL'auteur xbonez
2

Oui, un tel alignement est possible. À l'aide de classes CSS, vous pouvez balisage HTML de manière à obtenir le même aspect d'un tableau sans le mal de tête à l'aide d'un tableau (ou faire de la majoration moche).

À l'aide de ce CSS:
```
.label {
    display: inline-block;
    width: 100px;
}

.inputBox {
    width: 200px;
}
```
et ce HTML:
```
<span class="label">E-mail:</span><input type="email"></input><br>
<span class="label">Password:</span><input type="text"></input>
```
vous obtiendrez la mise en page que vous voulez.

De le faire avec IE7 changer le CSS ci-dessus:
```
.label {
    display: block;
    width: 100px;
    float: left;
    clear: left;
}
```
Ensuite, ajoutez la ligne ci-dessous les lignes déjà montré:
```
<div style="clear: left"></div>
```
Exemple en utilisant IE7-paramètres compatibles: http://jsfiddle.net/bbXXp/

OriginalL'auteur saluce
0

Vrai. Je suis en train d'apprendre à la dure. J'ai utilisé de la table pour l'alignement, et maintenant, certains alignements sont de plus bizzare dans les petits écrans (par ex. téléphone portable, tablettes, etc). Donc, je suis de basculer à la div. Préférable d'utiliser <div style="display:inline-block">...</div>, qui alignera automatiquement si l'écran est plus petit.
Donc, mon conseil est que Tableau doit être utilisé uniquement pour de véritables tableaux, et non pas pour l'alignement des contrôles dans un corps.

OriginalL'auteur Vijay Srinivas

Vous devez vous connecter pour publier un commentaire.