Construir tablas | Oloblogger En ocasiones, las tablas son muy prácticas para mostrar ciertos elementos o simplemente para alinearlos como queremos. Todo el código de las...

16 de diciembre de 2007

Construir tablas

En ocasiones, las tablas son muy prácticas para mostrar ciertos elementos o simplemente para alinearlos como queremos. Todo el código de las tablas está basado en HTML, que es en el que se sustentan la mayoría de páginas web.

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


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
FIL 1 COL 1FIL 1 COL 2
FIL 2 COL 1FIL 2 COL 2

Código del ejemplo. Ver/Ocultar [+/-]

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 1FIL 1 COL 2FIL 1 COL 3
FIL 2
FIL 3 COL 1FIL 3 COL 2FIL 3 COL 3

Código del ejemplo. Ver/Ocultar [+/-]
<table align="center" border="1"><tbody><tr><td>FIL 1 COL 1</td><td>FIL 1 COL 2</td><td>FIL 1 COL 3</td></tr><tr><td colspan="3" align="center">FIL 2</td></tr><tr><td>FIL 3 COL 1</td><td>FIL 3 COL 2</td><td>FIL 3 COL 3</td></tr></tbody></table>

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 C2rowspan=3 F1, F2 y F3 - C3F1 - C4
colspan=2, rowspan=2 F2 y F3 - C1 y C2F2 - C4
F3 - C4
F4 - C1F4 - C2F4 - C3F4 - C4

Código del ejemplo. Ver/Ocultar [+/-]
<table align="center" border="1"><tbody><tr><td colspan="2">colspan=2 F1 - C1 y C2</td><td rowspan="3">rowspan=3 F1, F2 y F3 - C3</td><td>F1 - C4</td></tr><tr><td colspan="2" rowspan="2">colspan=2, rowspan=2 F2 y F3 - C1 y C2</td><td>F2 - C4</td></tr><tr><td>F3 - C4</td></tr><tr><td>F4 - C1</td><td>F4 - C2</td><td>F4 - C3</td><td>F4 - C4</td></tr></tbody></table>

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




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.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

9 comentarios :

  1. 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

    ResponderEliminar
  2. a y detallando tu blog observe que cambiastes la B de blogger por un gif de tu blog, como puedes hacer eso, gracias

    ResponderEliminar
  3. Efectivamente. Dentro de una celda metes el HTML normal de mostrar una imagen IMG SRC...

    En general, en una celda puedes meter cualquier cosa: una imagen, texto, un enlace, una imagen con enlace, un feed, un elemento HTML, un SCRIPT,

    ResponderEliminar
  4. ...y sobre la B de Blogger, enseñamos a cambiarla en unos días.

    ResponderEliminar
  5. Demasiado fácil, de nuevo gracias por tan detallada y estupenda explicación, ahora uso la tabla en una galería de imágenes.

    ResponderEliminar
  6. Exelente este blog muy bueno, mil gracias por tanta informacion tan valiosa que me ha servido demasiado. :)

    ResponderEliminar
  7. Gracias por hacérmelo saber Felipe.

    ResponderEliminar
  8. Sigo aprendiendo de tus tutoriales.Gracias.
    Si 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.

    ResponderEliminar
    Respuestas
    1. 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