Comment créer une table à l'aide de balises div?

Cette question est née de mes expériences avec le framework GWT mais j'ai décidé de simplifier la question.

Je suis en train de remplacer la balise table avec des divs. Comment puis-je horizontalement aligner deux balises DIV qui contiennent deux alignés verticalement, les balises DIV ?

Voici ce que j'ai:

<!doctype html>
<html>
<body>
<div style="display: block; ">
    <div style="display: inline; ">
        <div class="gwt-Label" >Name:</div>
        <div class="gwt-Label" >Address:</div>
    </div>
    <div style="display: inline; ">
        <div class="gwt-Label" >test1</div>
        <div class="gwt-Label" >test2</div>
    </div>
</div>
</body>
</html>

Elle est rendue dans mon Chrome 15.0.874.106 m tel que:

Name:
Address:
test1
test2

où j'attendais:

Name:    test1
Address: test2

Pourriez-vous m'aider ?

avez-vous essayé de les remplacer en ligne avec inline-block?

OriginalL'auteur expert | 2011-11-13

Je pense que pour l'exemple que vous avez une table réelle serait plus approprié, cependant, vous pourriez aussi faire quelque chose comme ceci:

<body>
    <div style="display: table;">
        <div style="display: table-row;">
            <div style="display: table-cell;">Name:</div>
            <div style="display: table-cell;">test1</div>
        </div>
        <div style="display: table-row;">
            <div style="display: table-cell;">Address:</div>
            <div style="display: table-cell;">test2</div>
        </div>
    </div>
</body>

Pour info... cela ne fonctionne pas sous IE 6 et 7, qui sont tous les deux de Grade quirksmode.org/css/display.html yuilibrary.com/yui/docs/tutorials/gbs

OriginalL'auteur neurotik

14

Les tableaux HTML sont appropriés pour le représentant des données tabulaires. Il suffit de ne pas utiliser des tableaux pour la mise en page générale. Tables sont encore mieux pour les données tabulaires bien.

Mise à JOUR: Aller de l'avant, vous pouvez consulter le CSS3 Présentation de la Grille de spécifications: http://www.w3.org/TR/css3-grid-layout/

Mais comme c'est, si vous reeeeeeally souhaitez le faire travailler pour quelque raison que ce soit, j'avais mis toutes les colonnes de largeur fixe, flottant à gauche et clair sur la première colonne. Si vous voulez des largeurs différentes pour différentes colonnes, vous pouvez faire des classes spécifiques pour les colonnes et définir une largeur spécifique. Mais, si les données de l'utilisateur dans votre tableau, vous devez vous assurer overflow:hidden est sur, ou il va briser votre table.

Je l'ai collé le code ici, mais j'ai également créé un jsfiddle lien.

Voici le code html:
```
<div class="table">

    <div class="column first">Name:</div>
    <div class="column">test1</div>

    <div class="column first">Address:</div>
    <div class="column">test2</div>

</div>
```
Et les styles:
```
.table .column{
   width: 100px;
   float: left;
}

.table .column.first{
   clear: left;   
}
```
Cependant, vous allez courir dans des problèmes comme le texte à l'intérieur de la table de change. Il ne va pas agir comme un tableau. Par exemple, lorsqu'une cellule est le texte passe à la ligne suivante, il ne va pas régler la hauteur de toutes les cellules de la ligne, que vous pouvez attendre d'une cellule à faire. D'où le overflow: hidden ou tout simplement utiliser un tableau HTML.

Espère que ça aide...

Mis à jour pour fournir une solution de rechange.
Merci beaucoup pour la réponse détaillée!
En fait, le mien ne fonctionne pas dans IE7 soit... eh bien... je suppose que c'est uniquement les tables qui sont fiables.
Mise à jour: ajout d'une référence à CSS3 Présentation de la Grille de Spécifications
Mise à jour: ce tutoriel donne une bonne couverture de la prise d'une tablular-ish d'affichage avec inline-block. blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block

OriginalL'auteur Homer6

    <div style="display: block; ">
        <div style="float:left">
            <div class="gwt-Label" >Name:</div>
            <div class="gwt-Label" >Address:</div>
        </div>
        <div style="float:left">
            <div class="gwt-Label" >test1</div>
            <div class="gwt-Label" >test2</div>
        </div>
<div style="clear:both"></div>
    </div>

OriginalL'auteur Moe Sweet

CSS3 a juste le billet:

.tabl {width:400px;border:1px solid blue;display:table}
.row {height:40px;display:table-row}
.cell {border:1px solid black;display:table-cell}

Qui peut ensuite être allié à une structure qui ressemble à une table, Dans ce cas, j'ai inclus une table imbriquée:

<div class="tabl">
<div class="row">
    <div class="cell"> CELL one</div>
    <div class="cell"> CELL two</div>
    <div class="cell"> CELL three</div></div>
<div class="row">
    <div class="cell"> CELL four
    </div><div class="cell"> CELL five</div>
    <div class="cell"> 
        <div class="tabl">
            <div class="row">
                <div class="cell">CELL 6A</div>
                <div class="cell">CELL6B</div>
            </div>
        </div>
    </div>
</div>

Si vous le souhaitez, vous pouvez probablement quitter l'extérieur wrapper, contrairement à un vrai tableau, les lignes et les cellules semblent pas en avoir besoin. Malheureusement, cela ne fonctionne que dans les navigateurs modernes qui prennent en charge CSS3 qui part d'IE, y compris IE9.

display: table est de CSS2. Les anciennes versions d'IE ne le supporte pas tout simplement parce qu'ils sucent. IE8/9 ne la soutiennent.

OriginalL'auteur COBOLdinosaur

votre solution est la suivante :-
S'il vous plaît vérifier

<!doctypehtml>
<html>
<body>
<div class="Row">
    <div class="Cell">
        <p>Name:</p>
    </div>
    <div class="Cell">
        <p>Test1</p>
    </div>
</div>
<div class="Row">
    <div class="Cell">
        <p>Address:</p>
    </div>
    <div class="Cell">
        <p>Test2</p>
    </div>
</div>
</body>
<style type="text/css">
    .Table
    {
        display: table;
    }
    .Row
    {
        display: table-row;
    }
    .Cell
    {
        display: table-cell;
    }
</style>
</html>

OriginalL'auteur Muder Surti

Moe chemin est assez cool mais il n'est pas standard.
C'est le meilleur moyen.

Utiliser les CSS commande "float" comme cela:

Code HTML:

<!doctype html>
<html>
<head>
    <link href="Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div style="display: block; ">
    <div style="display: inline; ">
        <div class="gwt-Label" >Name:</div>
        <div class="gwt-Label" >test1</div>
    </div>
    <div style="display: inline; ">
        <div class="gwt-Label" >Address:</div>
        <div class="gwt-Label" >test2</div>
    </div>
</div>
</body>
</html>

Fichier CSS (Style.css):

.gwt-Label
{
    float: left;
    width: 50%
    }

Ou vous pouvez tout avoir dans un seul endroit:

<!doctype html>
<html>
<head>

    <style type="text/css">
        .gwt-Label{
        float: left;
        width: 50%
        }
    </style>

</head>
<body>
<div style="display: block; ">
    <div style="display: inline; ">
        <div class="gwt-Label" >Name:</div>
        <div class="gwt-Label" >test1</div>
    </div>
    <div style="display: inline; ">
        <div class="gwt-Label" >Address:</div>
        <div class="gwt-Label" >test2</div>
    </div>
</div>
</body>
</html>

OriginalL'auteur Mahyar Kakaee

0

Si vous êtes à la recherche pour générer de la dynamique de la structure tabulaire, essayez d'utiliser jqGrid (démo)

Ou si votre but est différent et ne veux toujours pas aller avec des div? Essayez cette..

utilisation float:left; au lieu display:inline. Flotteur réduit la taille des div à son contenu, la taille, laissant de l'espace pour d'autres éléments. Cela rend les autres éléments accueillir flottait à côté de l'élément.

Code corrigé:
```
<!doctype html>
<html>
<body>
<div style="display: block; ">
    <div style="float:left; ">
        <div class="gwt-Label" >Name:</div>
        <div class="gwt-Label" >Address:</div>
    </div>
    <div style="float:left;">
        <div class="gwt-Label" >test1</div>
        <div class="gwt-Label" >test2</div>
    </div>
</div>
</body>
</html>
```
OriginalL'auteur Pavan Kondapuram

Vous devez vous connecter pour publier un commentaire.