Comment créer des tables de données de la colonne à la place des données de ligne en HTML?

Selon cet article à W3 Écoles, on peut créer une table de base en HTML comme ceci:

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

À partir de ci-dessus, il semble que l'on entre des données par lignes.

J'ai une situation où j'ai besoin de saisir toutes les données en colonnes. Est quelque chose comme cela possible?

<table border="1">
    <tc>
        <td>row 1, cell 1</td>
        <td>row 2, cell 1</td>
    </tc>
    <tc>
        <td>row 1, cell 2</td>
        <td>row 2, cell 2</td>
    </tc>
</table>
  • Votre logiciel peut lire les <td> tags? en outre, pourrait-il lire les cartes d'identité ou des classes? par exemple, <td id="column_one">
  • Le manuel ne dit pas tout les détails au sujet de combien HTML, il le sait, mais j'ai trouvé qu'il prend également en charge le CSS, donc peut-être qu'il prend en charge plus que j'ai deviné.
  • Vous pourriez être en mesure de le nourrir au programme de "colonnes" par labling vos cellules avec id's ou classes
  • Je ne suis pas sûr que je ne sais rien à propos de ce mystérieux programme de la vôtre. Vous avez dit qu'il peut contrôler HTML de base, j'ai donc fait une supposition.
  • J'ai corrigé vos fautes d'orthographe de W3C Schools juste W3 Schools. Tout à fait d'une différence importante, voir W3Schools n'est même pas conforme aux normes W3C, la plupart du temps. W3Schools == W3Fools! Si vous voulez vous renseigner sur les tables ou les lire en ligne HTML de la documentation a obtenu directement à la source www.w3.org ou MDN - APPRENDRE HTML MDN est une grande source de Html, JavaScript et plus.
InformationsquelleAutor Village | 2013-04-17
  1. 21

    Vous pouvez restituer les tables dans les colonnes à l'aide d'un tableau dans un tableau...

    <table>
<tr>
<td>
    <table>
        <thead>
            <tr>
                <td>column 1 header 1</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>column 1 row 1</td>
            </tr>
            <tr>
                <td>column 1 row 2</td>
            </tr>
        </tbody>
    </table>
</td>
<td>
    <table>
        <thead>
            <tr>
                <td>column 2 header 1</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>column 2 row 1</td>
            </tr>
            <tr>
                <td>column 2 row 2</td>
            </tr>
        </tbody>
    </table>
</td>
</tr>
</table>
    • Le seul problème est que nous perdons l'avantage d'avoir de la hauteur de la rangée alignée en fonction du contenu.
    InformationsquelleAutor Chris Green
  2. 18

    Vous êtes meilleur pari est de rendre la table par des lignes, et ensuite utiliser javascript pour inverser la table

    http://jsfiddle.net/CsgK9/2/

    Le code suivant pour inverser un tableau (cet exemple de code utilise jquery)

    
    $("table").each(function() {
        var $this = $(this);
        var newrows = [];

        $this.find("tr").each(function(){
            var i = 0;

            $(this).find("td").each(function(){
                i++;
                if(newrows[i] === undefined) { newrows[i] = $(""); }
                newrows[i].append($(this));
            });
        });

        $this.find("tr").remove();
        $.each(newrows, function(){
            $this.append(this);
        });
    });

    Mise à JOUR:

    Ici est une version qui fonctionne avec th éléments ainsi:
    http://jsfiddle.net/zwdLj/

    • belle réponse, voudrais vous voir conserver <th> bien que les éléments
    • J'ai ajouté un deuxième jsfiddle qui prend en charge <th> éléments
    • Comment pourrais-je aller si je voulais laisser les titres en haut?
    • Pas sûr de ce que vous demandez à @Chubbypanda
    InformationsquelleAutor Aheho
  3. 17

    Dans les navigateurs modernes vous pouvez atteindre cet objectif par la redéfinition de la TR et TD tags comportement en CSS. Compte tenu de l'HTML dans votre question joindre la prochaine feuille de style CSS:

    CSS:

    table {
	display: table;
}
table tr {
	display: table-cell;
}
table tr td {
	display: block;
}

    HTML:

    <table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 2, cell 1</td>
    </tr>
    <tr>
        <td>row 1, cell 2</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

    • pourquoi ne pas afficher le tableau-ligne au lieu d'afficher le bloc?
    • Je me demandais pourquoi il n'est pas la solution la plus adaptée sur le web. Est-il a-il des inconvénients? @Istvan
    • Je le vois maintenant, il a des problèmes avec la taille des cellules. Toutes les cellules dans le nouveau cretaed ligne sont d'égale hauteur.
    InformationsquelleAutor Istvan
  4. 0

    Juste fait cela en utilisant un tas de uls rempli de lis, semblait beaucoup plus propre que ce que j'ai pu trouver. Vous aurez à faire quelque chose comme l'ajout d'une classe à tous les amt et la définition de son style display: inline-table.

    @* pseudo html/razor *@
@foreach(var col in columns){
    <ul class='tableColumn'>
        foreach(var data in col){
            <li>data</li>
        }
    </ul>    
}

    et certains style

    .tableColumn {
    border: 1px solid;
    display: inline-table;
}
    InformationsquelleAutor Fat Shogun
  5. -1

    J'ai été dans la même situation où je dois ajouter les données par colonne. Mais, ce problème est résolu dans une méthode simple. J'ai utilisé brindille dans cet exemple, mais vous obtiendrez facilement.

    <table>
<tr>
    <th>id</th>
    <th>title</th>
    <th>ISBN</th>
    <th>author_id</th>
    <th>publisher_id</th>
</tr>

{% for book in books %}   //for loop is used before the <tr> tag
    <tr>
        <td>{{ book.id }}</td>
        <td>{{ book.title }}</td>
        <td>{{ book.isbn }}</td>
        <td>{{ book.publisher.id }}</td>
        <td>{{ book.author.id }}</td>
    {% endfor %}
    </tr>

    Note:{{ il s'agit de données à imprimer }}

    • C'est vraiment mauvais. Ne pas le faire. Vous avez peut-être découvert quelque navigateur caprice des thats va obtenir patché et puis votre code html est juste ordures. Solde de vos tags. Ne comptez pas sur les bugs de ce genre.
    InformationsquelleAutor sandy