Las tablas están formadas por filas (horizontal) y columnas (vertical). El cruce de filas y columnas configuran las celdas. Cada tabla lleva una etiqueta TABLE, cada fila una TR y cada columna una TD. Así, una tabla de una sola fila y una sola columna se formará con:
<table> <-- Comienza una TABLA
<tr> <-- Comienza una FILA
<td> <-- Comienza una COLUMNA
UNA CELDA <-- Contenido de la CELDA
</td> <-- Fin de COLUMNA
</tr> <-- Fin de FILA
</table> <-- Fin de TABLA
<tr> <-- Comienza una FILA
<td> <-- Comienza una COLUMNA
UNA CELDA <-- Contenido de la CELDA
</td> <-- Fin de COLUMNA
</tr> <-- Fin de FILA
</table> <-- Fin de TABLA
| UNA CELDA |
Las tablas pueden anidarse. Esto quiere decir que se puede meter una tabla dentro de otra, tal y como se ve en este ejemplo:
ESTO ESTA EN LA PRIMERA TABLA
|
Código del ejemplo. Ver/Ocultar [+/-]
<table><tr><td align="center">ESTO ESTA EN LA PRIMERA TABLA<table><tr><td>FIL 1 COL 1</td><td>FIL 1 COL 2</td></tr><tr><td>FIL 2 COL 1</td><td>FIL 2 COL 2</td></tr></table></td></tr></table>
Si alguna celda no contiene elemento alguno, pero quereis que se quede el hueco, hay que introducir en ella un salto de línea <br/> para que todo cuadre bien.
Sin embargo, si lo que quereis es que una celda en concreto tenga el ancho o el alto de varias celdas, entonces hay que usar COLSPAN y ROWSPAN. COLSPAN sirve para indicar cuantas columnas ocupará en concreto una celda. ROWSPAN es idéntico, pero para indicar cuantas filas.
Supongamos una tabla con tres filas y tres columnas y que la fila de enmedio la queremos de 3 columnas de ancho. Habría que formular el TR correspondiente, de la siguiente manera:
<tr><td colspan="3">FIL 2</td></tr>
| FIL 1 COL 1 | FIL 1 COL 2 | FIL 1 COL 3 |
| FIL 2 | ||
| FIL 3 COL 1 | FIL 3 COL 2 | FIL 3 COL 3 |
Para no liarnos mucho, es mejor poner ambas instrucciones en las TD correspondientes, porque esto se puede complicar tanto como queramos. Tened en cuenta que si en una fila anterior ya indicamos que cierta columna tenía dos filas de alto, cuando lleguemos a la celda correspondiente de la siguiente fila, no hará falta crear esa celda.
| colspan=2 F1 - C1 y C2 | rowspan=3 F1, F2 y F3 - C3 | F1 - C4 | |
| colspan=2, rowspan=2 F2 y F3 - C1 y C2 | F2 - C4 | ||
| F3 - C4 | |||
| F4 - C1 | F4 - C2 | F4 - C3 | F4 - C4 |
Cuando se escribe el código de una tabla seguido (sin saltos de línea), queda muy enmarañado. Para no liarnos, es mejor redactarlo separando por líneas los TD y los TR, pero sin olvidar una vez que esté terminado, que hay que borrar dichos saltos. Esto es porque el intérprete de código los transforma en molestos saltos que nos descuadran todo. Ejemplo:
Todos los espacios en blanco que hay a continuación son provocados por el código de la tabla. La diferencia de anchos y altos de las celdas, también.
| F1 - C1 | F1 - C2 |
| F2 - C1 | F2 - C2 |
<!-- Por no escribir todo en la misma linea --> <table> <tr> <td>F1 - C1</td> <td>F1 - C2</td> </tr> <tr> <td>F2 - C1</td> <td> F2 - C2 </td> </tr> </table>
Como veis, el tamaño de la celda se adapta automáticamente al ancho y alto del contenido con mayor tamaño. Por eso en estos ejemplos las filas y las columnas no tienen todas el mismo tamaño. Para arreglar eso y otras cuestiones de presentación en pantalla, no os perdais la próxima entrada sobre tablas.
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
ola oloman, soy yo, jejeje, para colocar las imagenes en las celdas se agrega un html normal al igual que imagenes con links, espero respuesta y saludes
ResponderEliminara y detallando tu blog observe que cambiastes la B de blogger por un gif de tu blog, como puedes hacer eso, gracias
ResponderEliminarEfectivamente. Dentro de una celda metes el HTML normal de mostrar una imagen IMG SRC...
ResponderEliminarEn general, en una celda puedes meter cualquier cosa: una imagen, texto, un enlace, una imagen con enlace, un feed, un elemento HTML, un SCRIPT,
...y sobre la B de Blogger, enseñamos a cambiarla en unos días.
ResponderEliminarDemasiado fácil, de nuevo gracias por tan detallada y estupenda explicación, ahora uso la tabla en una galería de imágenes.
ResponderEliminarExelente este blog muy bueno, mil gracias por tanta informacion tan valiosa que me ha servido demasiado. :)
ResponderEliminarGracias por hacérmelo saber Felipe.
ResponderEliminarSigo aprendiendo de tus tutoriales.Gracias.
ResponderEliminarSi quisiera poner una tabla en un gadget y dentro de cada celda una imagen con una url sería posible?
O no seria efectivo por el hecho de tardar en cargar.
Sin ningún problema Asdf. Técnicamente dentro de una celda puedes meter lo que quieras, hasta El Quijote. Pero eso sí, como dices, si metes muchas cosas será como si en un post lo hicieras: tardará más en cargar cuanto más contenido lleve.
Eliminar