Tablas en HTML

Las tablas fueron muy importantes en una época para maquetar páginas web. Hoy lo adecuado es utilizarlas solo para presentar información tabulada, es decir, colocada en una rejilla de filas y columnas.

Una tabla es un conjunto de celdas organizadas dentro de las cuales podemos alojar distintos contenidos.

HTML dispone de una gran variedad de etiquetas para crear tablas con sus atributos.

NOTA: durante un tiempo, gran parte de los diseñadores de páginas basaron su maquetación en este tipo de artilugios. En efecto, una tabla nos permite organizar y distribuir los espacios de la manera más adecuada. Nos puede ayudar a generar texto en columnas como los periódicos, prefijar los tamaños ocupados por distintas secciones de la página o poner de una manera sencilla, un pie de foto o una imagen.

Estamos en la segunda década del 2000 y hablar delas tablas como solución para maquetación ha pasado a la historia. Las webs de 1ª y 2ª generación, utilizaban este recurso intensivamente para maquetar contenidos en páginas web, además de otras barbaridades como los pixeles transparentes, para conseguir efectos como márgenes o espacios en blanco. Sin embargo, las webs actuales, a partir de la 3ª generación, han acabado con todas esas técnicas que no hacían más que ensuciar el código fuente de las páginas web, mezclando presentación y contenido. Actualmente toda la maquetación de una página se organiza con CSS, lo que nos da un mayor control de todos los elementos de la página y la posibilidad de separar todos los estilos para definir el aspecto de una web en un fichero aparte del HTML.

Por ello, en el momento actual las tablas se utilizan mucho menos que en el pasado, y realmente la recomendación es usarlas solo en los casos en los que necesitamos incluir en una página información tabulada, es decir, dispuesta en filas y columnas. Todo uso basado en tablas para procurar colocar elementos en determinadas posiciones de la página sería incorrecto en las técnicas actuales de diseño de páginas web.

ETIQUETAS BASICAS

Para crear una tabla sencilla, debemos seguir los siguientes pasos:

Las tablas por defecto tienen las celdas sin bordes “border=0” y los elementos dentro de las celdas aparecen alineados a la derecha. Esto puede modificarse mediante atributos y código CSS.

La etiqueta <th> se emplear igual que la etiqueta <td> y sustituto de esta para indicar que una celda es cabecera de tabla (se usa al principio de la fila o columna). Aunque en principio el resultado es el mismo que si se usa la etiqueta <td>, la diferencia es que <th> aparece en negrita.

La etiqueta <caption></caption> se emplea para insertar un título a la tabla, debe colocarse justo después de la etiqueta <table> y antes de la primera <tr>.

BORDES

Las celdas de la tabla aparecen por defecto sin ningún borde definido. Esto se puede cambiar usando el atributo “border” en la etiqueta <table>, el valor de este atributo es un número que nos indicara el número de grosor del borde medido en pixeles.

<table border=2>

El atributo “border” debe utilizarse únicamente con la etiqueta <table> ya que con las otras etiquetas de la tabla no tiene ningún efecto. Además, las celdas quedan separadas entre sí por un pequeño margen, el cual puede modificarse como ya veremos más adelante.

ATRIBUTOS PARA TABLAS, FILAS Y CELDAS

En cuanto a los atributos para <table> hay unos cuantos. Muchos los conoces ya de otras etiquetas como “width”, “height”, “align”, etc. Hay otros que son especialmente creados para la etiqueta <table>.

En cuanto a las etiquetas interiores de una tabla, nos referimos a <td> y <tr>, tenemos que tener en cuenta los siguientes aspectos:

Así pues, podemos especificar el formato de nuestras celdas a partir de etiquetas introducidas en su interior o mediante, atributos colocados dentro de la etiqueta de celda <td> o bien, en algunos casos, dentro de la etiqueta <tr>, si deseamos que el atributo sea válido para toda la línea. La forma más útil y actual de dar forma a las celdas es a partir de CSS.

Veamos a continuación algunos atributos útiles para la construcción de nuestras tablas:

Otros Atributos que pueden ser únicamente asignados a una celda y no al conjunto de celdas de una línea son:

NOTA: el atributo “height” no funciona en todos los navegadores, además su uso no está muy extendido. Las celdas por lo general tienen el alto que necesiten para que quepa todo el contenido que se le haya insertado, es decir, crecen lo suficiente para que quepa lo que hemos colocado dentro. El atributo “width” sí que funciona en todos los navegadores, y lo tendréis que utilizar constantemente. Si le asignamos un ancho as la celda, el ancho será respetado y si dicha celda tiene mucho texto o cualquier otro contenido, la celda crecerá hacia abajo todo lo necesario para que quepa lo que hemos colocado. Si definimos una celda de un ancho de 100px, y colocamos en la celda un contenido como una imagen que mida más de 100px, la celda crecerá en horizontal todo lo necesario para que la imagen quepa. Si el elemento, fuese más ancho de 100px y divisible (como un texto), el ancho seria respetado, y la celda crecería hacia abajo, o lo que es lo mismo, en altura.

Los últimos cuatro atributos escritos son de gran utilidad. Concretamente, “height” y “width” nos ayudan a definir las dimensiones de nuestras celdas de una forma absoluta (en pixeles o puntos de pantalla), o de una forma relativa, es decir, por porcentajes referidos al tamaño total de la tabla.

Como ejemplo, escribiremos <td width=”80”>, que dará una anchura de 80px a la celda. Sin embargo, <td width=”80%”>, dará una anchura a la celda del 80% de la anchura de la tabla.

Hay que tener en cuenta que definidas las dimensiones de las celdas, el navegador va a hacer lo que pueda para satisfacer al programador. Esto quiere decir que puede que en algunas ocasiones el resultado que obtengamos no sea el esperado. Concretamente, si el texto presenta una palabra excesivamente larga, puede que la anchura de la celda se vea aumentada para mantener la palabra en la misma línea. Por otra parte, si el texto resulta muy largo, la celda aumentara su altura para poder mostrar todo su contenido.

Análogamente, si por ejemplo definimos dos anchuras distintas a celdas de una misma columna, el navegador no sabrá a cual hacer caso. Es por ello, que resulta conveniente tener bien claro desde un principio como es la tabla que queremos diseñar.

Los atributos “rowspan” y “colspan” son también utilizados frecuentemente. Gracias a ellos es posible expandir celdas fusionando estas con sus vecinas. El valor que pueden tomar estos atributos es numérico. El número representa la cantidad de celdas fusionadas. Por ejemplo, <td colspan=”2”>, fusionara la celda en cuestión con la de la directa.

Del mismo modo, <td rowspan=”2”>, expandirá la celda hacia abajo, fusionándose con la celda inferior.

Como hemos visto se puede asignar un borde a las tablas, para ello utilizamos el atributo “border”, pero en HTML 4.0 existen otros atributos para definir como queremos que sean los bordes de las tablas.

BORDES EXTERNOS

El atributo para definir el tipo de borde externo se llama “frame” y se utiliza en la misma etiqueta <table>, y sus posibles valores son:

BORDES INTERNOS

<p>También podemos definir el aspecto interno de las tablas con HTML 4.0. El atributo se llama “rules”, y se utiliza en la etiqueta <table>, al borde de las celdas de las tablas, puesto que cuando se define un borde en una tabla no solo tiene borde la parte externa de la tabla, sino cada una de las celdas.

NOTA: fusión de celdas en la misma fila, como hemos visto todas las filas deben tener el mismo número de columnas (no de celdas), de no ser así, la tabla no se muestra correctamente. Cada atributo “colspan”, marca las columnas que ocupa la celda a la que pertenece. No se cuenta el número de celdas, sino el de columnas que ocupan las filas, que debe ser el mismo, por tanto si en una celda hay un atributo “colspan=’2’”, la celda está ocupando dos columnas, por lo que deberemos poner una celda menos para que el número de columnas sea el mismo que en las demás filas.

NOTA: fusión de la celda en la misma columna, podemos fusionar varias celdas contiguas que estén en la misma columna, para ello utilizaremos el atributo “rowspan”. Al igual que en la nota anterior, el valor del atributo será el numero de celdas que queremos fusionar.

NOTA: si una fila esta ya ocupada por una celda fusionada con otra de una fila superior, no debemos marcarla con ninguna etiqueta, ya que está indicada mediante el atributo “rowspan” de la fila superior.

FUSION DE CELDAS EN FILAS Y COLUMNAS

También se puede fusionar filas y columnas a la vez en la misma tabla, para ello solo hay que combinar los atributos “rowspan” y “colspan” para obtener celdas de diferentes tamaños y ocupando varias filas y columnas a la vez, según como queramos el diseño de la tabla.

Ejercicio-1

ejer44

Ejercicio-2

ejer45

Ejercicio-3

ejer46

Ejercicio-4

ejer47

Ejercicio-5

ejer48

Ejercicio-6

ejer49

Ejercicio-7

ejer50

Ejercicio-8

ejer51