¿Cómo se usa colspan y rowspan en tablas HTML?

No sé cómo combinar filas y columnas dentro de tablas HTML.

¿Puede ayudarme a crear una tabla de este tipo en HTML?

Sugeriría:

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>

Referencias:

• tdelemento .
• thelemento .
• tbodyelemento .
• theadelemento .
• tableelemento .

Si está confundido sobre cómo funcionan los diseños de tabla, básicamente comienzan en x = 0, y = 0 y se abren paso. ¡Expliquemos con gráficos, porque son muy divertidos!

Cuando comienzas una mesa, haces una cuadrícula. Su primera fila y celda estarán en la esquina superior izquierda. Piense en ello como un puntero de matriz, moviéndose hacia la derecha con cada valor incrementado de x, y moviéndose hacia abajo con cada valor incrementado de y.

Para su primera fila, solo está definiendo dos celdas. Una se extiende por 2 filas hacia abajo y la otra por 4 columnas de ancho. Entonces, cuando llegue al final de su primera fila, se verá así:

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

Ahora que la fila ha terminado, el "puntero de matriz" salta a la siguiente fila. Dado que la posición 0 de x ya está ocupada por una celda anterior, x salta a la posición 1 para comenzar a completar las celdas.* Consulte la nota sobre la diferencia entre intervalos de filas.

Esta fila tiene cuatro celdas que son todos bloques de 1x1, llenando el mismo ancho de la fila de arriba.

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

La siguiente fila son todas las celdas 1x1. Pero, por ejemplo, ¿qué pasa si agrega una celda adicional? Bueno, simplemente saldría por el borde de la derecha.

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

* Pero, ¿qué pasa si, en lugar de agregar la celda adicional, hacemos que todas estas celdas tengan un intervalo de filas de 2? Lo que debe considerar aquí es que, aunque no agregará más celdas en la siguiente fila, la fila aún debe existir (aunque sea una fila vacía). Si intenta agregar nuevas celdas en la fila inmediatamente después, notará que comenzará a agregarlas al final de la fila inferior.

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

¡Disfruta del maravilloso mundo de la creación de mesas!

Si alguien está buscando un tramo de filas tanto a la izquierda como a la derecha, así es como puede hacerlo:

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>

Alternativamente , si desea agregar IZQUIERDA y DERECHA a un conjunto de filas existente, puede lograr el mismo resultado lanzándolos con un colapso colspanintermedio:

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>

Úselo rowspansi desea extender las celdas hacia abajo y colspana lo ancho.

Puede usar rowspan="n"en un elemento td para que abarque nfilas y colspan="m"en un elemento td para que abarquem columnas.

Parece que su primer td necesita a rowspan="2"y el siguiente td necesita a colspan="4".

La propiedad que busca ese primer td es 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 y Rowspan Una tabla se divide en filas y cada fila se divide en celdas. En algunas situaciones, necesitamos que las celdas de la tabla abarquen (o se fusionen) más de una columna o fila. En estas situaciones, podemos usar los atributos Colspan o Rowspan.

Colspan El atributo colspan define el número de columnas que una celda debe extenderse (o fusionarse) horizontalmente. Es decir, desea fusionar dos o más celdas en una fila en una sola celda.

<td colspan=2 > 

¿Cómo 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>

Rowspan El atributo rowspan especifica el número de filas que una celda debe abarcar verticalmente. Es decir, desea fusionar dos o más celdas en la misma columna como una sola celda verticalmente.

<td rowspan=2 >

¿Cómo 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>

He usado ngIf para una de mis lógicas similares. es como sigue:

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

aquí, obtengo el valor de intervalo de filas de mi objeto modelo.

Es similar a tu mesa

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