En las dos últimas entregas presentamos los atributos colspan y rowspan , que nos permitían combinar celdas contiguas en una tabla. Quiero proponerte ahora un ejercicio avanzado que estoy seguro sabrás resolver si has comprendido lo hasta ahora explicado.
Se trata de escribir el código HTML que genera la siguiente tabla:
Tómate el tiempo que necesites para resolver el problema.
¿Atascado en alguna parte? ¿Algún concepto un tanto difuso aún? Si, a pesar de todo, te cuesta hallar la solución, sigue leyendo, entonces…
Recordemos el procedimiento para diseñar este tipo de tablas sin problemas:
1) Procesar los elementos fila a fila, comenzando por la primera, y de izquierda a derecha, es decir, del mismo modo que realizamos la lectura de un libro.
2) No debemos incluir celdas que pertenezcan a una extensión ya iniciada en una definición anterior.
Según esto, en la primera fila nos encontraríamos con tres definiciones de datos: la primera (alfa) extiende la celda tres columnas horizontalmente, la segunda (bravo) es normal y la tercera (charlie) extiende dos filas verticalmente.
<tr>
<td colspan="3">alfa</td><td>bravo</td><td rowspan="2">charlie</td>
</tr>La segunda fila contiene cuatro definiciones, pues su última celda pertenece a una extensión que se realizó en la primera fila.
<tr>
<td>delta</td><td>echo</td><td>foxtrot</td><td>golf</td>
</tr>La tercera fila es suculenta: contiene tres definiciones y la segunda (india) es peculiar, pues contiene una expansión tanto horizontal como vertical.
<tr>
<td>hotel</td><td colspan="3" rowspan="2">india</td><td>juliet</td>
</tr>Presta mucha atención a cómo hemos incluido, dentro de la misma etiqueta td, tanto el atributo colspan como rowspan.
En la cuarta fila debemos definir sólo dos elementos, uno al principio y otro al final, pues las tres hipotéticas celdas centrales pertenecen a una extensión que se inició en la fila anterior.
<tr>
<td>kilo</td><td>lima</td>
</tr>Por último, la quinta fila es completamente normal, con sus cinco definiciones de datos, una para cada columna. Me he permitido incluirla en el diseño para que se reflejen bien los límites de cada columna y se dimensionen con claridad todas las extensiones anteriores.
<tr>
<td>mike</td><td>november</td><td>oscar</td><td>papa</td><td>quebec</td>
</tr>Este es el código completo del diseño:
<table border="1">
<tr>
<td colspan="3">alfa</td><td>bravo</td><td rowspan="2">charlie</td>
</tr>
<tr>
<td>delta</td><td>echo</td><td>foxtrot</td><td>golf</td>
</tr>
<tr>
<td>hotel</td><td colspan="3" rowspan="2">india</td><td>juliet</td>
</tr>
<tr>
<td>kilo</td><td>lima</td>
</tr>
<tr>
<td>mike</td><td>november</td><td>oscar</td><td>papa</td><td>quebec</td>
</tr>
</table>Y, colorín colorado, esta tabla se ha acabado…
Javier Montero Gabarró
El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)
El Club del Autodidacta