Wie verwenden Sie Colspan und Rowspan in HTML-Tabellen?

97

Ich weiß nicht, wie man Zeilen und Spalten in HTML-Tabellen zusammenführt.

Beispiel

Können Sie mir bitte helfen, eine solche Tabelle in HTML zu erstellen?

Max Frai
quelle
Zusammenführen, oder? Du meinst colspan?
animuson
@ DavidThomas Ich kann eine Tabelle mit 5 Zeilen und 3 Spalten erstellen. Aber ich weiß nicht wirklich, wo ich Rowspan usw. anwenden soll
Max Frai
14
@DAvid: Es scheint ziemlich klar zu sein, dass der Fragesteller nicht weiß, wo er anfangen soll. Manchmal ist es schwierig, wenn Sie nicht einmal wissen, ob ein Attribut vorhanden ist, nach dem Sie suchen (in diesem Fall Rowspan)
Chris Sobolewski
6
Wenn Sie das Glück haben, einen visuellen Editor wie Dreamweaver zu haben, können Sie sich darauf stützen, indem Sie das grundlegende Tabellenraster erstellen und dann die erforderlichen Zellen zusammenführen. Überprüfen Sie dann den erstellten Code. Sie werden sehen, wo die verschiedenen Zellen zusammengeführt werden und wie es mit Code gemacht wird. Dreamweaver erzeugt normalerweise sauberen und kompatiblen Code und ist daher ein gutes Beispiel für einen Lernenden.
Surreale Träume

Antworten:

112

Ich würde vorschlagen:

table {
    empty-cells: show;
    border: 1px solid #000;
}

table td,
table th {
    min-width: 2em;
    min-height: 2em;
    border: 1px solid #000;
}
<table>
    <thead>
        <tr>
            <th rowspan="2"></th>
            <th colspan="4">&nbsp;</th>
        </tr>
        <tr>
            <th>I</th>
            <th>II</th>
            <th>III</th>
            <th>IIII</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
         </tr>
    </tbody>
</table>

Verweise:

David sagt, Monica wieder einsetzen
quelle
2
Vergessen Sie nicht, die hübschen Farben hinzuzufügen.
Blazemonger
31
In diesem Fall lasse ich die 'hübschen Farben' als Übung für den Leser.
David sagt, Monica am
Wenn jemand interessiert ist, wie dies im Allgemeinen funktioniert, siehe @ animousons ausgezeichnete Erklärung unten stackoverflow.com/a/9830847/362951
mit
117

Wenn Sie sich nicht sicher sind, wie Tabellenlayouts funktionieren, beginnen sie grundsätzlich bei x = 0, y = 0 und arbeiten sich quer durch. Lassen Sie uns mit Grafiken erklären, weil sie so viel Spaß machen!

Wenn Sie eine Tabelle starten, erstellen Sie ein Raster. Ihre erste Zeile und Zelle befindet sich in der oberen linken Ecke. Stellen Sie sich das wie einen Array-Zeiger vor, der sich mit jedem inkrementierten Wert von x nach rechts und mit jedem inkrementierten Wert von y nach unten bewegt.

Für Ihre erste Zeile definieren Sie nur zwei Zellen. Eine erstreckt sich über 2 Zeilen und eine über 4 Spalten. Wenn Sie also das Ende Ihrer ersten Reihe erreichen, sieht es ungefähr so ​​aus:

Vorschau # 0001

<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="4"></td>
    </tr>
</table>

Nachdem die Zeile beendet ist, springt der "Array-Zeiger" zur nächsten Zeile. Da x-Position 0 bereits von einer vorherigen Zelle belegt ist, springt x zu Position 1, um mit dem Ausfüllen der Zellen zu beginnen. * Siehe Hinweis zum Unterschied zwischen Zeilenbereichen.

Diese Zeile enthält vier Zellen, die alle 1x1-Blöcke sind und die gleiche Breite der darüber liegenden Zeile ausfüllen.

Vorschau # 0002

<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="4"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

Die nächste Zeile enthält alle 1x1-Zellen. Aber was ist zum Beispiel, wenn Sie eine zusätzliche Zelle hinzugefügt haben? Nun, es würde einfach rechts vom Rand abspringen.

Vorschau # 0003

<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="4"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

* Aber was ist, wenn wir stattdessen (anstatt die zusätzliche Zelle hinzuzufügen) dafür sorgen, dass alle diese Zellen einen Zeilenumfang von 2 haben? Die Sache, die Sie hier berücksichtigen müssen, ist, dass, obwohl Sie in der nächsten Zeile keine weiteren Zellen hinzufügen, die Zeile immer noch vorhanden sein muss (obwohl es sich um eine leere Zeile handelt). Wenn Sie unmittelbar danach versucht haben, neue Zellen in die Zeile einzufügen, werden Sie feststellen, dass diese am Ende der unteren Zeile hinzugefügt werden.

Vorschau # 0004

<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="4"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

Genießen Sie die wunderbare Welt der Tischgestaltung!

animuson
quelle
14

Wenn jemand links und rechts nach einer Reihe sucht, können Sie dies folgendermaßen tun:

table { 
    border-collapse: collapse;
}

td {
    padding: 20px; 
    border: 1px solid black; 
    text-align: center;
}
<table>
    <tbody>
    <tr>
        <td rowspan="2">LEFT</td>
        <td> 1 </td>
        <td> 2 </td>
        <td> 3 </td>
        <td> 4 </td>
        <td rowspan="2">RIGHT</td>
    </tr>
    <tr>
        <td> 5 </td>
        <td> 6 </td>
        <td> 7 </td>
        <td> 8 </td>
    </tr>
    <tr>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
    </tr>
    </tbody>
</table>

Wenn Sie alternativ LINKS und RECHTS zu einem vorhandenen Rowset hinzufügen möchten, können Sie dasselbe Ergebnis erzielen, indem Sie sie mit einem colspandazwischen reduzierten Satz einwerfen :

table {
    border-collapse: collapse;
}

td {
    padding: 20px; 
    border: 1px solid black; 
    text-align: center;
}
<table>
    <tbody>
    <tr>
        <td rowspan="3">LEFT</td>
        <td colspan="4" style="padding: 0; border-bottom: solid 1px transparent;"></td>
        <td rowspan="3">RIGHT</td>
    </tr>
    <tr>
        <td> 1 </td>
        <td> 2 </td>
        <td> 3 </td>
        <td> 4 </td>
    </tr>
    <tr>
        <td> 5 </td>
        <td> 6 </td>
        <td> 7 </td>
        <td> 8 </td>
    </tr>
    <tr>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
    </tr>
    </tbody>
</table>

Fahrbahn
quelle
5

Verwenden rowspanSie diese Option, wenn Sie Zellen nach unten und colspanquer erweitern möchten .

Wadester
quelle
3

Sie können rowspan="n"ein td-Element verwenden, um nZeilen zu überspannen , und colspan="m"ein td-Element, um mSpalten zu überspannen .

Sieht so aus, als ob Ihr erster td einen rowspan="2"und der nächste td einen braucht colspan="4".

Surreale Träume
quelle
2

Die Eigenschaft, nach der Sie zuerst suchen, lautet rowspan: http://www.angelfire.com/fl5/html-tutorial/tables/tr_code.htm

<table>
<tr><td rowspan="2"></td><td colspan='4'></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>
Chris Sobolewski
quelle
2
<style type="text/css">
     table { border:2px black dotted; margin: auto; width: 100%; }
    tr { border: 2px red dashed; }
    td { border: 1px green solid; }
</style>
<table>
    <tr>
        <td rowspan="2">x</td> 
        <td colspan="4">y</td>
    </tr>
    <tr>
        <td>I</td>
        <td>II</td>
        <td>III</td>
        <td>IV</td>
    </tr>
    <tr>
        <td>nothing</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
hjpotter92
quelle
0
<body>
<table>
<tr><td colspan="2" rowspan="2">1</td><td colspan="4">2</td></tr>
<tr><td>3</td><td>3</td><td>3</td><td>3</td></tr>
<tr><td colspan="2">1</td><td>3</td><td>3</td><td>3</td><td>3</td></tr>
</table>
</body>
Wadester
quelle
0

Colspan und Rowspan Eine Tabelle ist in Zeilen und jede Zeile in Zellen unterteilt. In einigen Situationen müssen sich die Tabellenzellen über mehrere Spalten oder Zeilen erstrecken (oder zusammengeführt werden). In diesen Situationen können wir Colspan- oder Rowspan-Attribute verwenden.

Colspan Das Attribut colspan definiert die Anzahl der Spalten, die eine Zelle horizontal überspannen (oder zusammenführen) soll. Das heißt, Sie möchten zwei oder mehr Zellen hintereinander zu einer einzigen Zelle zusammenführen.

<td colspan=2 > 

Wie Colspan?

<html>
<body >
    <table border=1 >
        <tr>
            <td colspan=2 >
                Merged
            </td>
        </tr>
        <tr>
            <td>
                Third Cell
            </td>
            <td>
                Forth Cell
            </td>
        </tr>
    </table>
</body>
</html>

Zeilenbereich Das Attribut Zeilenbereich gibt die Anzahl der Zeilen an, die eine Zelle vertikal umfassen soll. Das heißt, Sie möchten zwei oder mehr Zellen in derselben Spalte wie eine einzelne Zelle vertikal zusammenführen.

<td rowspan=2 >

Wie Rowspan?

<html>
<body >
    <table border=1 >
        <tr>
            <td>
                First Cell
            </td>
            <td rowspan=2 >
                Merged
            </td>
        </tr>
        <tr>
            <td valign=middle>
                Third Cell
            </td>
        </tr>
    </table>
</body>
</html>
Fel
quelle
0

Ich habe ngIf für eine meiner ähnlichen Logik verwendet. es ist wie folgt:

<table>
<tr *ngFor="let object of objectData; let i= index;">
<td *ngIf="(i%(object.rowSpan))==0" [attr.rowspan]="object.rowSpan">{{object.value}}</td>
</tr>
</table>

Hier erhalte ich einen Zeilenbereichswert von meinem Modellobjekt.

Amulya Koppula
quelle
-1

Es ist ähnlich wie bei Ihrem Tisch

  <table border=1 width=50%>
<tr>
    <td rowspan="2">x</td> 
    <td colspan="4">y</td>
</tr>
<tr>
    <td bgcolor=#FFFF00 >I</td>
    <td>II</td>
    <td bgcolor=#FFFF00>III</td>
    <td>IV</td>
</tr>
<tr>
    <td>empty</td>
    <td bgcolor=#FFFF00>1</td>
    <td>2</td>
    <td bgcolor=#FFFF00>3</td>
    <td>4</td>
</tr>

Ha3Ha3Ha3
quelle