convertir un tableau en div et du css

voici mon tableau et comment puis-je convertir divs

<table class="style1">
            <tr>
                <td class="style2">Name</td>
                <td class="style5">John Doe</td>
                <td>error</td>
            </tr>
            <tr>
                <td class="style2">
                    Desc</td>
                <td class="style5">
                    Desc....</td>
            </tr>
            <tr>
                <td class="style3">
                    Start Date</td>
                <td class="style4">
                    date here</td>
                    <td>start date error here</td>
            </tr>
            <tr>
                <td class="style2">
                    End Date</td>
                <td class="style5">
                    end date here....</td>
                    <td>end date error..</td>
            </tr>
          </table>

OriginalL'auteur Nick Kahn | 2011-07-19

  1. 1
    <style>
   .style2{
float:left;    
}
.clr{
clear:both;
}
</style>

<div class="style1">
            <div class="clr">
                <div class="style2">Name</div>
                <div class="style5">John Doe</div>
            </div>
            <div class="clr">
                <div class="style2">
                    Desc</div>
                <div class="style5">
                    Desc....</div>
            </div>
            <div class="clr">
                <div class="style2">
                    Start Date</div>
                <div class="style4">
                    date here</div>
                    <div>start date error here</div>
            </div>
            <div class="clr">
                <div class="style2">
                    End Date</div>
                <div class="style5">
                    end date here....</div>
                    <div>end date error..</div>
            </div>
  </div>

    Espère que ça aide.

    qu'est-ce style2 et style 4 et style 5
    ne vous inquiétez pas au sujet de style 4 et 5. ce que vous devez faire est de les faire en ligne avec le style 2. juste à vous soucier de style2. flotteur em out

    OriginalL'auteur Benny Tjia

  2. 8

    CSS permet de faciliter le tableau de simulation avec les éléments de bloc à l'aide de la display propriété.

    HTML:

    <div class="table style1">
    <div class="tr">
        <div class="td style2">
            Name
        </div>
        <div class="td style5">
            John Doe
        </div>
        <div class="td">
            error
        </div>
    </div>
    <div class="tr">
        <div class="td style2">
            Desc
        </div>
        <div class="td style5">
            Desc....
        </div>
        <div class="td style5">
            Desc....
        </div>
    </div>
    <div class="tr">
        <div class="td style3">
            Start Date
        </div>
        <div class="td style4">
            date here
        </div>
        <div class="td">
            start date error here
        </div>
    </div>
    <div class="tr">
        <div class="td style2">
            End Date
        </div>
        <div class="td style5">
            end date here....
        </div>
        <div class="td">
            end date error..
        </div>
    </div>
</div>

    CSS:

    .table {
    display:table;
}
.tr {
    display:table-row;
}
.td {
    display:table-cell;
}
    Ceci répond à la question, mais permettrait d'utiliser ce code html, ou voulez-vous laisser dans un tableau?
    Je l'avais laisser dans un tableau, mais ce n'est pas ce que l'OP a demandé 😉
    Je voulais votre avis sur elle, comme si l'OP est d'essayer d'explorer non basée sur la table de mises en page, je veux m'assurer qu'il obtient également l'idée que ce n'est pas un "comment les autres de le faire" par exemple. C'est un bon exemple - n'était pas en train de le démolir.
    Yep, pas de soucis. Je suis d'accord divs ne sont pas la fin de la solution. Tableaux de données doivent être placés dans un tableau de structure. Mon exemple était surtout pour illustrer comment CSS a la capacité de reproduire la mise en page.

    OriginalL'auteur AlienWebguy

  3. 2

    Si vous êtes l'affichage des données comme ça, il est préférable d'utiliser un tableau. <div>'s sont recommandés sur les tables pour plus de disposition générale, mais dans ce cas, vous devez appliquer le style css dans chaque <div> au lieu d'utiliser de la plaine <table>, <tr>, et <td> éléments de maintenir le style.

    OriginalL'auteur squinlan

  4. 0

    Sémantiquement parlant, vos données tabulaires, ce qui signifie un <table> est mieux au lieu d'un <div>. <div>'s serait utilisé pour le générique de la structure. Mais vous devez toujours vous efforcer pour la sémantique du code.

    par exemple, si le contenu est un paragraphe, puis utilisez <p>. Si vous avez une liste, puis utiliser une liste non ordonnée ou commandés etc..

    OriginalL'auteur Michel Hébert

  5. 0

    Je sais que c'est un vieux thread, cependant je me suis retrouvé ici, et d'autres peuvent venir aussi de cette façon. J'ai utilisé AlienWebGuy la technique de remplacer une table avec <div>'s de style à l'aide de la propriété display. Faire cette correction d'un affolant alignement vertical problème que j'ai eu avec une table qui contenait <td> éléments qui, à son tour contenues différents nombres de lignes.

    OriginalL'auteur user3399334