Wie erstellt man Tabellen aus Spaltendaten anstelle von Zeilendaten in HTML?

Lesezeit: 6 Minuten

Wie erstellt man Tabellen aus Spaltendaten anstelle von Zeilendaten in
Dorf

Laut diesem Artikel bei W3 Schulen, kann man eine einfache Tabelle in HTML wie folgt erstellen:

<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>

Von oben sieht es so aus, als ob man Daten zeilenweise eingibt.

Ich habe eine Situation, in der ich alle Daten nach Spalten eingeben muss. Ist so etwas möglich?

<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>

  • Kann Ihre Software die <td> Stichworte? konnte es außerdem ids oder klassen lesen? z.B <td id="column_one">

    – Mal

    17. April ’13 um 23:36

  • Das Handbuch sagt keine Details darüber, wie viel HTML es kennt, aber ich fand, dass es auch CSS unterstützt, also unterstützt es vielleicht mehr, als ich vermutet hatte.

    – Dorf

    17. April ’13 um 23:44

  • Sie können es möglicherweise in das Programm zurückgeben “Säulen” indem du deine Zellen mit beschriftest id's oder classes

    – Mal

    17. April ’13 um 23:52

  • Ich bin mir nicht sicher, ob ich nichts über dieses mysteriöse Programm von dir weiß. Sie sagten, es kann grundlegendes HTML steuern, also habe ich eine Vermutung angestellt.

    – Mal

    18. Apr. ’13 um 23:30

  • @Village: Ich habe deine Rechtschreibfehler behoben von W3C Schools nur W3 Schools. Ein ziemlich wichtiger Unterschied, da W3Schools die meiste Zeit nicht einmal W3C-konform ist. W3Schools == W3Dummköpfe! Wenn Sie mehr über Tabellen erfahren oder die HTML-Online-Dokumentation lesen möchten, gelangen Sie direkt zur Quelle www.w3.org oder MDN – HTML LERNEN MDN ist eine großartige Quelle für HTML, JavaScript und mehr.

    – NÖ

    21. Apr. ’13 um 8:18


In modernen Browsern können Sie dies erreichen, indem Sie das Verhalten der TR- und TD-Tags in CSS neu definieren. Fügen Sie angesichts des HTML-Codes in Ihrer Frage den nächsten CSS-Stil hinzu:

table {
	display: table;
}
table tr {
	display: table-cell;
}
table tr td {
	display: block;
}
<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>

  • Warum nicht die Tabellenzeile anstelle des Anzeigeblocks anzeigen?

    – Der gestiefelte Kater

    23. Dezember ’18 um 23:16

  • Ich frage mich, warum es nicht die am besten geeignete Lösung im Web ist. Hat es Nachteile? @Istvan

    – Gurmeet Singh

    25. Januar ’19 um 12:54

  • Ich sehe es jetzt, es hat Probleme mit der Höhe der Zellen. Nicht alle Zellen in der neu erstellten Zeile sind gleich hoch.

    – Gurmeet Singh

    25. Januar ’19 um 13:00

Sie können Tabellen in Spalten rendern, indem Sie eine Tabelle in einer Tabelle verwenden…

<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>

  • Das einzige Problem ist, dass wir den Vorteil verlieren, die Höhenzeile nach Inhalten ausgerichtet zu haben.

    – Rubens Mariuzzo

    11.11.19 um 19:09

1641751926 415 Wie erstellt man Tabellen aus Spaltendaten anstelle von Zeilendaten in
Aheho

Am besten rendern Sie die Tabelle zeilenweise und verwenden dann Javascript, um die Tabelle zu invertieren

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

Der folgende Code invertiert eine Tabelle (dieser Beispielcode verwendet 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);
        });
    });

AKTUALISIEREN:

Hier ist eine Version, die auch mit den Elementen funktioniert:
http://jsfiddle.net/zwdLj/

  • nette Antwort, würde gerne sehen, dass Sie

    Elemente behalten

    – Chris

    8. Juli ’14 um 14:15

  • Ich habe eine zweite jsfiddle hinzugefügt, die

    -Elemente unterstützt

    – Aheho

    8. Juli ’14 um 16:36

  • Wie würde ich vorgehen, wenn ich die Überschriften oben belassen wollte?

    – TheChubbyPanda

    22. Juli ’18 um 14:56

  • Nicht sicher, was du fragst @Chubbypanda

    – Aheho

    22. Juli ’18 um 14:58

Ich habe dies gerade getan, indem ich ein paar mit lis gefüllte Uls verwendet habe, schien viel sauberer zu sein als alles, was ich finden konnte. Sie müssen zum Beispiel eine Klasse zu allen uls hinzufügen und ihren Stil für die Anzeige festlegen: inline-table.

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

und etwas Styling

.tableColumn {
    border: 1px solid;
    display: inline-table;
}

Sie können jederzeit ein übergeordnetes Element (die Tabelle) erstellen und dann innerhalb der Tabelle Inline-Blockelemente mit begrenzter Breite erstellen, die als Ihre Spalten dienen. Um das rasterartige Muster zu erstellen, stellen Sie einfach die Höhe der Elemente innerhalb der Spalte ein, z. B. Verwenden der Liste zum Anzeigen von Inhalten:

<div id="your_table">
    <span style="width: 25%" id="fist_column"> <ul></ul></span>
    <span style="width: 25%" id="second_column"><ul></ul></span>
    <span style="width: 25%" id="third_column"><ul></ul></span>
    <span style="width: 25%" id="fourth_column"><ul></ul></span>
</div>

1641751926 590 Wie erstellt man Tabellen aus Spaltendaten anstelle von Zeilendaten in
sandig

Ich war in der gleichen Situation, in der ich die Daten spaltenweise hinzufügen muss. Dieses Problem wird jedoch mit einer einfachen Methode gelöst. Ich habe in diesem Beispiel twig verwendet, aber Sie werden es leicht bekommen.

<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>

Hinweis:{{ Dies sind Daten zum Drucken }}

.

231770cookie-checkWie erstellt man Tabellen aus Spaltendaten anstelle von Zeilendaten in HTML?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy