Wie verwenden Sie Colspan und Rowspan in HTML-Tabellen?

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

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

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:

• tdElement .
• thElement .
• tbodyElement .
• theadElement .
• tableElement .

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:

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

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

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

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

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>

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

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

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>

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

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

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>

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.

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>