rowspan - tablas con imagenes en html ejemplos
¿Cómo se usa colspan y rowspan en tablas HTML? (10)
No sé cómo combinar filas y columnas dentro de tablas HTML.
¿Pueden ayudarme a crear una tabla de este tipo en HTML?
Colspan y Rowspan Una tabla se divide en filas y cada fila se divide en celdas. En algunas situaciones, necesitamos que las celdas de tabla abarquen (o 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 abarcar (o fusionar) horizontalmente. Es decir, desea fusionar dos o más celdas seguidas 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>
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>
La propiedad que está buscando esa primera 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>
Puede usar rowspan="n" en un elemento td para hacer que se extienda en n filas, y colspan="m" en un elemento td para hacerlo abarcar m columnas.
Parece que tu primer td necesita un rowspan="2" y el siguiente td necesita un colspan="4" .
Si alguien está buscando un rowspan tanto a la izquierda como a la derecha, aquí está cómo 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 arrojándolos con un colspan colapsado entre ellos:
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>
Si está confundido sobre cómo funcionan los diseños de tabla, básicamente comienzan en x = 0, y = 0 y se abren camino. Vamos a explicar con gráficos, ¡porque son muy divertidos!
Cuando comienzas una tabla, haces una grilla. Su primera fila y celda estarán en la esquina superior izquierda. Piénselo como un puntero de matriz, moviéndose hacia la derecha con cada valor incrementado de xy bajando con cada valor incrementado de y.
Para su primera fila, solo está definiendo dos celdas. Uno abarca 2 filas hacia abajo y uno abarca 4 columnas. Cuando llegas al final de tu primera fila, se ve así:
<table>
<tr>
<td rowspan="2"></td>
<td colspan="4"></td>
</tr>
</table>
Ahora que la fila ha finalizado, el "puntero de matriz" salta a la siguiente fila. Como la posición 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 rowspans.
Esta fila tiene cuatro celdas, que son bloques de 1x1, que completan 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 es todas las celdas 1x1. Pero, por ejemplo, ¿qué pasa si agregaste una celda extra? Bueno, simplemente saltaría desde el borde hacia 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é ocurre si, en su lugar (en lugar de agregar la celda extra), todas estas celdas tienen un rowspan de 2? Lo que debe tener en cuenta aquí es que, aunque no vaya 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 después, notará que comenzaría 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 el maravilloso mundo de crear tablas!
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"> </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
Use rowspan si quiere extender celdas hacia abajo y colspan para extenderse.
<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>
<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>