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

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

Ejemplo

¿Podrías ayudarme a crear una tabla de este tipo en HTML?

Mar 23 '12 04:03 Max Frai

Si no sabe cómo funcionan los diseños de tablas, básicamente comienzan en x=0, y=0 y avanzan. ¡Vamos a explicarlo 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, que se mueve hacia la derecha con cada valor incrementado de x y hacia abajo con cada valor incrementado de y.

Para tu primera fila, solo estás definiendo dos celdas. Uno abarca 2 filas hacia abajo y el otro abarca 4 columnas de ancho. Entonces, cuando llegue al final de la primera fila, se verá así:

Vista previa #0001

<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 llenar las celdas. * Ver 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.

Vista previa #0002

<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 de 1x1. Pero, por ejemplo, ¿qué pasaría si añadieras una celda extra? Bueno, simplemente saldría del borde de la derecha.

Vista previa #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>

* Pero, ¿qué pasaría si, en lugar de agregar la celda adicional, hiciéramos que todas estas celdas tuvieran una extensión de 2 filas? Lo que debes considerar aquí es que aunque no vayas a 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 posterior, notará que comenzará a agregarlas al final de la fila inferior.

Vista previa #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>

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

Mar 22 '2012 21:03 animuson

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

Expandir fragmento

Referencias:

tdelemento .
thelemento .
tbodyelemento .
theadelemento .
tableelemento .

Mar 22 '2012 21:03 David Thomas

Si alguien está buscando un intervalo 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>

Expandir fragmento

Alternativamente , si desea agregar IZQUIERDA y DERECHA a un conjunto de filas existente, puede lograr el mismo resultado colocándolas con un espacio colapsado colspanen el medio:

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>

Expandir fragmento

Mar 08 '2014 20:03 Lane

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

Mar 22 '2012 21:03 Wadester