68
No sé cómo combinar filas y columnas dentro de las tablas HTML.¿Cómo se usa colspan y rowspan en tablas HTML?
¿Me podría ayudar con la fabricación de dicha tabla en HTML?
A
Respuesta
88
me gustaría sugerir:
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:
+2
No olvides agregar los bonitos colores. – Blazemonger
+27
Dejo los 'bonitos colores' como un ejercicio para el lector en este caso. –
3
Puede utilizar rowspan="n" en un elemento td para que sea abarcan n filas y colspan="m" en un elemento td para que sea abarcan m columnas.
Parece que su primer td necesita un rowspan="2" y el siguiente td necesita un colspan="4".
5
Utilice rowspan si desea extender celdas hacia abajo y colspan para ampliar.
2
La propiedad que busca que la 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>
1
<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>
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>
94
Si usted está confundido cómo funcionan las disposiciones de la tabla, que, básicamente, comienzan a partir de x = 0, y = 0 y se abren camino a través. Vamos a explicar con gráficos, ¡porque son muy divertidos!
Cuando inicia una tabla, crea una cuadrícula. 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. Así que cuando llegue al final de su primera fila, se ve algo como esto:
<table>
<tr>
<td rowspan="2"></td>
<td colspan="4"></td>
</tr>
</table>
Ahora que la fila ha terminado, la "matriz de punteros" 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 filas.
Esta fila tiene cuatro celdas que son todos bloques de 1x1, rellenando 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 células de 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 ¿y si en lugar (en lugar de añadir la celda adicional) hizo todas estas células tienen una 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>
Disfrute del maravilloso mundo de la creación de tablas!
+4
Considere utilizar PNG en lugar de JPG para ilustraciones. –
+0
Gracias un millón. Nunca he tratado demasiado con las tablas, pero ahora tropecé con un problema en el que los verdaderos datos tabulares deben presentarse en una estructura de tablas bastante complicada. Gracias a su explicación, finalmente descubrí cómo funcionan realmente los tramos de filas/columnas. –
+0
Las imágenes de vista previa se han roto. – hyip
0
Es similar a su 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>
9
Si alguien está buscando un rowspan tanto a la izquierda ya la derecha, aquí es 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 a izquierda y derecha a un conjunto de filas existentes, se puede lograr el mismo resultado por tirarlos en una colapsado colspan en 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>Cuestiones relacionadas
- 1. Analizando una tabla con rowspan y colspan
- 2. Cómo configurar colspan y rowspan en JSF panelGrid?
- 3. Añadir colspan y rowspan en la mesa sobre la marcha
- 4. Tabla HTML "normalizar" con rowspan
- 5. cabecera de la tabla HTML usando rowspan
- 6. Cómo establecer los valores de rowspan y colspan en gwt ¿Celda de cuadrícula que contiene un widget?
- 7. Cosas que puede dibujar con tablas HTML
- 8. ¿Existe una clase decente de generador de tablas HTML en PHP?
- 9. Html multilines tables (rowspan): ¿cómo cebrar de la manera correcta?
- 10. Correo electrónico HTML - ¿Está permitido colspan?
- 11. Colspan en IE7/8 no se respeta
- 12. Analizando tablas HTML con BeautifulSoup
- 13. ¿Cómo se usa O, Y en condicionales?
- 14. Tablas ordenables de arrastrar y soltar HTML
- 15. ¿Cómo se usa `element.offsetParent` con elementos HTML SVG?
- 16. HTML a tablas CALS?
- 17. ¿Por qué no se aplica Colspan como se esperaba?
- 18. colspan gridview rows
- 19. ¿Cómo representar un árbol binario con tablas (html)?
- 20. ¿Qué es GenericParameterHelper y cómo se usa?
- 21. Sustitución Colspan = "2" con Colspan = "4" utilizando Jquery
- 22. android table layout rowspan
- 23. ¿Cómo se usa `to_sql` en AREL cuando se usa` average() `?
- 24. io_service, ¿por qué y cómo se usa?
- 25. Python ORM que autogenera/actualiza tablas y usa SQLite?
- 26. ¿Cómo producir tablas HTML y el CSS que lo acompaña usando R Markdown o HTML Sweave?
- 27. Cómo modificar el atributo ROWSPAN con jQuery?
- 28. Colspan abarca 2.5 columnas?
- 29. MySQL: ¿Cómo encontrar dónde se usa una clave primaria específica como clave externa en otras tablas?
- 30. ¿Cómo lograría este diseño basado en tablas utilizando CSS en lugar de tablas HTML?
fusionarlos ¿derecho? ¿Quieres decir 'colspan'? – animuson
@DavidThomas Puedo hacer una tabla con 5 filas y 3 columnas. Pero realmente no sé dónde aplicar rowspan, etc. – Ockonal
@DAvid: Parece bastante claro que el asker no sabe por dónde empezar, a veces es difícil cuando ni siquiera sabes si un atributo que estás buscando para existe (rowspan en este caso) –