Tablas en HTML

Creando una tabla

Para crear las tablas será necesario usar una nueva etiqueta: TABLE, que significa, en inglés, tabla. Esta etiqueta consta de instrucción de inicio, <table> , e instrucción de fin, </table> . Entre ambas debemos introducir otras tres etiquetas, que definirán la estructura de la tabla. Estas etiquetas son:

  • <tr> ... </tr> .- La etiqueta Table Row nos permitirá insertar filas en la tabla. La tabla tendrá tantas filas como apariciones de esta etiqueta haya entre <table> ... </table>. La instrucción de inicio, <tr>, marca el comienzo de la línea, la instrucción de fin, </tr>, marca su final. La instrucción de fin es optativa, si no se usa se considera que una línea ha acabado cuando comienza otra o cuando acaba la tabla. Entre el comienzo y el fin de la línea debemos insertar las celdas de la tabla.
    • <th> ... </th> .- Este es el primero de los dos tipos de celdas existentes en el lenguaje HTML. El nombre de la etiqueta proviene del inglés Table Header (encabezado de tabla). Al igual que la etiqueta anterior el comienzo del encabezado viene dado por la instrucción de inicio, <th> y finaliza con la instrucción de fin, </th> , o con el comienzo de otra celda. En general entre el comienzo y el fin se suele insertar texto, que será mostrado en negrita o subrayado y centrado.
    •<td> ... </td> .- Este es el segundo tipo de celda de las tablas HTML. El nombre de la etiqueta, Table Data (Datos de tabla), nos induce a pensar que su función será introducir todos los datos que queramos en las celdillas definidas de esta forma. Y así será, de hecho podemos insertar cualquier elemento de HTML: imágenes, listas, texto formateado e incluso otras tablas. La diferencia de esta celda con la anterior es pequeña, y su existencia separada sólo tiene sentido si consideramos el carácter descriptivo del HTML. En la práctica la diferencia principal es que el texto de los encabezados de tabla aparecerá resaltado y centrado y el de las celdas normales (td) no.

Esquema básico de una tabla

  1. En primer lugar ponemos la instrucción de inicio y fin de la etiqueta TABLE dejando un espacio entre ellas para insertar posteriormente el resto de etiquetas:
  2. A continuación insertamos las filas. La tabla que nos hemos propuesto crear consta de dos filas. Por tanto debemos usar las etiquetas <tr> ... </tr> dos veces. Lo que insertemos en la primera (entre la instrucción de inicio y la instrucción de fin) será el contenido de la primera fila y lo que insertemos en la segunda será el contenido de la segunda fila:
  3. El tercer paso será definir el contenido de cada fila. Como nos habíamos propuesto que la tabla tuviese dos columnas en cada fila debemos insertar dos celdas en cada una. Como hemos explicado antes, para crear una celda debemos usar las etiquetas <td> ...</td>. Entre la instrucción de inicio y la instrucción de fin de está etiqueta será donde insertaremos el verdadero contenido de la tabla. En este primer ejemplo sencillo será simplemente texto, pero puede ser cualquier otro elemento web como imágenes o listas. Volviendo a nuestro ejemplo, para cada fila debemos escribir el siguiente código:
  4. El cuarto paso es ponerlo todo junto, repitiendo el código anterior para cada fila. El código final de la tabla será:

Visto desde nuestro navegador:

Ya tenemos nuestra primera tabla, aunque es muy sencilla,  podemos observar que por defecto no se dibujan los bordes.

Añadiendo bordes

El siguiente paso en el aprendizaje de las tablas consiste en añadirles un borde. Esto es tan sencillo como añadir un nuevo atributo a la instrucción de inicio de la etiqueta TABLE. El atributo del que hablamos es border, que significa borde en inglés. Este atributo puede tomar un valor en píxeles que representa el grosor del borde a mostrar. Si incluimos border sin ningún valor su equivalente sería border="1". Repitamos el segundo de los ejemplos vistos antes pero añadiéndole un borde de grosor 5.

Ahora nuestro navegador nos muestra un borde definido:

Encabezados

Llamamos encabezado a las celdas situadas en la primera fila o en la primera columna. Por ejemplo si estamos haciendo una agenda de contactos, las primeras celdas serían los nombres de los campos:

Con el añadido de los encabezados nuestro listado quedaría:

Observamos que hemos completado «Fila1, Columna3» y «Fila2, Columna3«. Vemos el resultado en nuestro navegador:

Observamos que el encabezado se muestra, por lo general, centrado y resaltado.

Insertar un título para la tabla

El siguiente elemento importante a destacar en las tablas y del que todavía no hemos hablado es el título. Este será un texto que acompaña a la tabla podrá estar situado encima o debajo de ella. Para insertarlo haremos uso de una nueva etiqueta: <caption> ... </caption> (título), que deberá ser usada entre las instrucciones <table> ... </table > , añadimos a nuestro listado el título de la siguiente manera:

Resultado:

Los títulos de la tabla serán mostrados por defecto en la parte superior de esta, pero la etiqueta <caption> permite el uso de un atributo (cuyo nombre nos resultará familiar), align , que nos permitirá elegir que dichos títulos sean mostrados como pie de la tabla. El atributo align, puede tomar dos valores top y bottom. El primero de ellos, top, significa en inglés arriba o parte superior y su efecto será que el título sea mostrado encima de la tabla, bottom, por su parte puede ser traducido como abajo o parte inferior. El uso de este atributo provocará el efecto antes comentado: el título será mostrado al pie de la tabla. El siguiente código es un ejemplo del uso este tipo de alineamiento del título:

Visto desde un navegador:

Aplicar formato a las tablas

Podemos cambiar el ancho, color o la distancia entre unas y otras celdas, además de otras cosas. Además, al igual que hacíamos con los párrafos «<p> ... </p>«, también podemos aplicar en las celdas alineaciones (centrado, izquierda, derecha o justificado).

Ancho y alto de las tablas

Podemos establecer el alto que tendrá la tabla mediante el atributo height de la etiqueta <table>:

Donde height indica la altura total de la tabla en píxeles (puntos). Para ello, deberá poner después del igual «=» la cantidad de píxeles que quieras que tenga de altura, por ejemplo:

<table height=350>

Tambien podemos indicarle el tamaño de la tabla en porcentaje de pantalla. Por ejemplo:

<table height=80%>

La tabla ocupará el 80% del alto de la ventana de nuestro navegador.  Veamos unos ejemplos:

Este listado nos ofrece esta visión en el navegador sin atributos:

Añadimos el atributo «height» con 300 puntos de altura:

Las tablas quedarían así:

Ahora vemos como poner el atributo height como porcentaje:

Veamos el resultado:

Ejemplo para el atributo width:

Resultando:

Cuando se establece el ancho y el alto de una tabla en porcentaje, si se hace más grande o más pequeña la ventana del navegador la tabla se adapta al nuevo ancho de la ventana. Eso no pasará si las medidas se establecen en píxeles.

Ancho y alto de las celdas

Se usan los mismos atributos (height y width) aplicados en la etiqueta <td> del siguiente modo:

Donde n es el alto o ancho de la celda. También podemos establecer el ancho y el alto en porcentajes, pero esta vez relativo al tamaño de la tabla. Por ejemplo, si se especifica que el ancho de una celda sea del 50%, con esto el navegador interpreta que ocupará la mitad del espacio asignado a nuestra tabla. Por ejemplo:

Con este listado estamos construyendo una tabla que ocupa el 80% de la ventana de nuestro navegador con una fila y cuatro columnas.

Observamos que las celdas se han adaptado al contenido de las mismas. Veamos como hacer que las celdas aparezcan uniformemente en nuestro navegador:

 Hemos añadido la etiqueta de comentario para hacer el listado un poco más comprensible, esta etiqueta se compone de «<!-- tu comentario -->«, el navegador no mostrará nada que esté escrito entre las etiquetas de comentario.

Veamos la interpretación en el navegador de lo que se ha añadido al listado anterior.

En este ejemplo hemos utilizado la anchura de cada celda (25%) mostrando la tabla más equilibrada; otro ejemplo:

En este listado intentamos definir varios anchos de celdas en la misma columna…

… ¿Que ha ocurrido? Resulta que HTML no permite especificar diferentes tamaños en la misma columna, y lo que hace el navegador es coger el mayor tamaño definido en el caso del listado coge el valor de 80%.

Lo mismo ocurre con la altura dentro de una misma fila que no se pueden definir celdas de diferentes alturas. Resumiendo, todas las celdas pertenecientes a una misma fila deben tener la misma altura, y todas las celdas que pertenezcan a una misma columna deben tener el mismo ancho. La solución sería crear dos tablas independientes, vemos el resultado:

  • Según lo mostrado en esta imagen, haz el listado para que sea algo parecido o igual que lo que muestra nuestro navegador de arriba.

Espacio entre celdas

Antes de nada es conveniente comentar que el lenguaje HTML considera a cada celda como un elemento individual con sus propios bordes que no comparte con las celdas adyacentes. Basándonos en esta forma de ver las tablas podemos cambiar la distancia que existe entre los bordes de las células adyacentes usando el atributo cellspacing (espaciado de celdas). El valor por defecto de este atributo es 1. En general se suele usar para eliminar el espaciado entre celdas  o para aumentarlo para crear un efecto como el del siguiente ejemplo:

Vemos el resultado:

Observamos que entre celda y celda tenemos 10 píxeles de separación ya que cellspacing controla el espaciado entre los bordes de cada una de las celdas de la tabla.

Una segunda propiedad de las tablas de gran importancia es el margen que existe entre los elementos de las celdas y sus bordes. Esta separación es nula por defecto, pero puede aumentarse usando el atributo cellpadding. La forma de usar este atributo queda descrita en el siguiente ejemplo:

En este listado hemos creado dos tablas para mostrar la diferencia entre los atributos cellspacing y cellpadding. Los comentarios serán de ayuda a la hora de comprender el listado.

Alineación de las tablas

A veces nos interesa posicionar una tabla dentro de la ventana de nuestro navegador. Podemos hacer que la tabla aparezca esté centrada, a la izquierda o a la derecha:

Entre los comentarios, vemos el listado para las distintas opciones de alineación de una tabla.

  • Cambia el texto, donde pone «Ancho 75%», escribe en cada celda Alineado a… (izquierda, derecha o centro dependiendo de donde se halle situada la tabla. Tal y como se muestra en la figura de abajo.

También hay otro modo de alinear las tablas y es colocar la tabla entre las etiquetas de párrafo «<p> ...</p>«:

Alineación en las celdas

Hasta ahora hemos estudiado el alineamiento de las tablas con respecto a la ventana del navegador. El siguiente paso será aprender los diferentes tipos de alineamiento de los elementos de las diferentes celdas con respecto a estas. Estos tipos de alineamiento se dividen en dos: alineamiento vertical y alineamiento horizontal.

Las etiquetas <td> ... </td> y <th>... </th> funcionan de un modo similar a la etiqueta <p> ... </p>, ya que también permiten que el texto que el texto de su interior aparezca centrado, a izquierda,  derecha o justificado. La sintaxis para conseguir ese efecto de alineación es:

Donde alineación es uno de los siguientes valores:

  • center.- El texto de los valores aparece centrado.
  • left .- El texto aparece pegado a la izquierda (por defecto aparece alineado por la izquierda).
  • right .- El texto aparece alineado a la derecha, es decir, todos los finales de línea del párrafo están pegados al borde derecho de la celda.
  • justify .- El texto aparece alineado a la derecha y a la izquierda, por lo que todos los finales de línea del párrafos están pegados al borde derecho de la celda y los principios de línea a la izquierda.

Veamos un ejemplo:

Vista en nuestro navegador:

Vemos la tabla con las alineaciones propuestas en el listado HTML.

  • Alineamiento horizontal .- Para seleccionar el tipo de alineamiento horizontal de las celdas hay que usar el atributo align de las etiquetas <th> o <td> en función del tipo de celda. Este atributo permitirá seleccionar entre un alineamiento a la izquierda (align="left"), centrado (align="center"), a la derecha (align="right"). o justificado (align="justify")
  • Alineamiento vertical .- En este caso usaremos un nuevo atributo: valign (Vertical Align, alineamiento vertical). Las diferentes opciones con este tipo son para la parte superior de la celda (valign="top"), alineamiento en medio de la celda (valign="middle") y alineamiento con la parte inferior de la celda (valign=" bottom").
    Por defecto las celdas de encabezado (th) están centradas tanto horizontal como verticalmente, mientras que las celdas normales (td) están alineadas a la izquierda y verticalmente se sitúan en el centro de la celda.

Veamos otro ejemplo con lo estudiado en esta sección:

Vista desde el navegador de nuestro listado.

Imágenes en las celdas

Dentro de las celdas podemos colocar imágenes. Con la etiqueta <img src="fichero de la imagen"> entre las etiquetas <td> ... </td>.

Veamos un ejemplo:

En el listado de arriba he elegido algunos gráficos de mi disco duro, solo tienes que elegir tus gráficos para este ejemplo. Como las imágenes son grandes he utilizado los parámetros width y height para ajustar la imagen en las celdas, en este caso se ha definido con 150 píxeles de alto y de ancho. Las celdas se adaptaran al tamaño original de las imágenes. Veamos el resultado del listado en nuestro navegador.

Tablas dentro de una celda

Entre <td> ... </td>también podemos insertar tablas, esto nos será útil para dividir una celda en varios apartados.

Resultado:

Fusión de celdas

Podemos fusionar celdas para que abarquen otras celdas, podemos utilizar las etiquetas <td> ... </td> y <th> ... </th>. El atributo rowspan=n indica que esa celda se extiende n filas y el atributo colspan=n indica que esa celda se extiende n columnas. Por ejemplo si ponemos <td colspan=2>, éste código quiere decir que la celda actual se extiende a lo ancho de dos celdas. Algo parecido ocurre si escribimos <td rowspan=3>, la celda ocupará el alto de 3 celdas normales.

Vemos como resultado:

  • Modifica el listado y en la celda «Coches europeos» y «Coches americanos» haz que aparezcan centrado, centrado arriba y centrado abajo.

Dar color al borde

Podemos definir el color que tendrán las líneas de la tabla. El primero de los atributos, bordercolor , nos permitirá cambiar el color del borde. El color puede indicarse tanto con el número hexadecimal RGB (por ejemplo #99CC99) o bien usando uno de los nombres predeterminados. La sintaxis es:

Donde color_predefinido es uno de los colores que vemos en la tabla de abajo.

o bien representado en formato RGB:

Colores en la celda

Tanto <td> ... </td> como <th> ... </th>, aceptan el parámetro bgcolor=color. Después de bgcolor debe ir un código que nos indique el color que vamos a utilizar (ver tabla de arriba).

Visto desde el navegador:

  • Ensaya con el listado cambiando los colores a tu gusto.

Color de fondo en la tabla

Tambien <table> acepta el parámetro bgcolor, del mismo modo que acabamos de ver. Así, por ejemplo añadiremos un fondo verde a la tabla:

  • Experimenta con los distintos colores para el fondo de la tabla.

Imagen de fondo en la tabla

 

Además de poner un color de fondo en una tabla, HTML nos permite poner una imagen de fondo. El navegador muestra la imagen y sobre ella se muestra la tabla. En caso de que la imagen no abarque el ancho y alto del navegador, este la repetirá en modo mosaico, hasta completar toda el área ocupada por la tabla.

A la etiqueta <table> le añadimos la propiedad background="nuestra_imagen.jpg", en mi caso tengo una imagen que se llama «fondo1.jpg«:

Con un vistoso resultado desde nuestro navegador.

Vemos en este ejemplo que la tabla tiene un fondo de estucado amarillo.

Imagen de fondo sólo en una celda

También las celdas admiten imágenes de fondo. Su resultado es similar a insertar una imagen en la tabla aunque existe una diferencia; si la imagen está insertada como fondo, el texto que tenga la celda se mostrará encima de la imagen, mientras que si la imagen estuviera insertada en la celda (no como fondo), el texto se mostraría al lado, tal y como vimos anteriormente.

  • Modifica el listado para que muestre la vista de arriba en nuestro navegador (la imagen no tiene que ser la misma).

Al igual que ocurría con <table>, para establece el fondo de una celda se utiliza también el atributo background="nuestra_imagen.jpg" en la etiqueta <td>. Este parámetro lo podemos utilizar también en <th> y en <tr>. En este último caso, la imagen aparecería como fondo de toda esa fila de tabla.

  • Haz un listado para que coloque una imagen de fondo en las celdas mostradas en la imagen:
  • Haz un listado de manera que se use una imagen de fondo en la celda con el contenido «Ford».