Lección 11: ... y más tablas
El título "... y más tablas" puede sonar algo aburrido. Pero míralo por el lado bueno; cuando domines las tablas, nada de nada en HTML te podrá dejar K.O.
Entonces, ¿qué más queda por conocer?
Los atributos colspan y rowspan se usan cuando queremos crear tablas elaboradas.
Colspan es la abreviatura de "column span" (expandir columna). Colspan se usa con la etiqueta <td> para especificar cuántas columnas ocupará la celda:
Ejemplo 1:
<table border="1">
<tr>
<td colspan="3">Celda 1</td>
</tr>
<tr>
<td>Celda 2</td>
<td>Celda 3</td>
<td>Celda 4</td>
</tr>
</table>
que se visualizará así en el navegador:
| Celda 1 | ||
| Celda 2 | Celda 3 | Celda 4 |
Al establecer el atributo colspan a "3", la celda de la primera fila ocupa tres columnas. Si hubiésemos establecido colspan a "2", la celda sólo habría ocupado dos columnas y habría sido necesario insertar una celda adicional en la primera fila para que la cantidad de columnas sea igual en las dos filas.
Ejemplo 2:
<table border="1">
<tr>
<td colspan="2">Celda 1</td>
<td>Celda 2</td>
</tr>
<tr>
<td>Celda 3</td>
<td>Celda 4</td>
<td>Celda 5</td>
</tr>
</table>
que se verá así en el navegador:
| Celda 1 | Celda 2 | |
| Celda 3 | Celda 4 | Celda 5 |
¿Y el atributo rowspan?
Como ya habrás adivinado, rowspan especifica cuántas filas debería ocupar una celda:
Ejemplo 3:
<table border="1">
<tr>
<td rowspan="3">Celda 1</td>
<td>Celda 2</td>
</tr>
<tr>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
</tr>
</table>
que se verá así en el navegador:
| Celda 1 | Celda 2 |
| Celda 3 | |
| Celda 4 |
En el ejemplo anterior el atributo rowspan se establece con el valor "3" en la Celda 1. Esto especifica que la celda debe expandirse a lo largo de tres filas (o sea, ocupa la suya propia y dos más). La Celda 1 y la Celda 2 , por tanto, están en la misma fila, mientra que la Celda 3 y la Celda 4 forman dos filas independientes.
¿Confundido? Bueno, la verdad es que no es sencillo, y es fácil perderse. Por lo tanto, sería una buena idea dibujar la tabla sobre un trozo de papel antes de empezar a escribir el código HTML.
¿Que no estas confuso? Pues sigue adelante y crea un par de tablas tú solo usando los atributos colspan y rowspan.