Introducción a HTML. Módulo 7



	Localización \| Personal \| Docencia \| Investigación \| Novedades \| Intranet

Home / Docencia / Introducción a HTML

Fases de Diseño de un sitio Web: III. Fase Producción

Índice

Tablas
Atributos de la etiqueta <table>
Atributos de filas y celdas de datos
Atributos de estilo
Proyecto: Tablas
Proyecto: Combinación Listas y Tablas

1. Tablas

Las tablas en HTML se representan mediante la etiqueta <table>...</table>. Esta etiqueta tiene otras etiquetas asociadas como la etiqueta <tr>...</tr> (del inglés Table Row) para la definición de filas y la etiqueta <td>...</td> (del inglés Table Data) para la definición de celdas dentro de cada fila que son las que contienen los datos de la tabla. También existe la etiqueta <th>...</th> (del inglés Table Header) para la definición de las celdas decabecera de la tabla. Las tablas se utilizan tanto para presentar información en forma de filas y columnas como para conseguir algunos efectos o una determinada distribución espacial en los elementos que componen un documento HTML.

Dentro de las etiquetas <table>...</table>, puede haber múltiples pares de etiquetas <tr>...</tr>, donde cada par define una fila. Asimismo, dentro de cada fila puede haber múltiples pares de etiquetas <td>...</td>, donde cada par define una celda. El código entre las etiquetas <td>...</td>, o entre <th>...</th>, se presenta en formato de tabla. Todo lo que no está dentro de un par <td>...</td> o dentro de un par <th>...</th> se presenta fuera de la tabla.

Ejercicio

Tarea:

Practica con el editor interactivo las etiquetas <table>...</table>, <tr>...</tr>, <td>...</td> y <th>...</th>relacionadas con las tablas en HTML

Procedimiento:

Abre el editor interactivo pulsando aquí.

Escribe en el lado izquierdo el siguiente código HTML:

<HTML>
 <body>
  <h3>Tablas sencillas</h3>
  <table border="1">
   <tr>
    <td>Elemento 1.1</td>
    <td>Elemento 1.2</td>
   </tr>
   <tr>
    <td>Elemento 2.1</td>
    <td>Elemento 2.2</td>
   </tr>
  </table>
 </body>
</HTML>

Pulsa el botón submit y comprueba el resultado

Solución:

Deberia verse:

Tablas sencillas

Elemento 1.1	Elemento 1.2
Elemento 2.1	Elemento 2.2

Observaciones:

Observa que el navegador calcula automáticamente el tamaño que debe tener la tabla (si no tiene ningún atributo que indique otra cosa)
Si olvidas la etiqueta </table> o la escribes incorrectamente, no se mostrará la tabla
Sustituye las etiquetas correspondientes a las celdas de datos <td>...</td> por las etiquetas de cabecera <th>...</th>.
Observa que la ubicación de los elementos es la misma pero las fuentes aparecen en negrita y el texto aparece centrado con respecto a la celda.

2. Atributos de la etiqueta <table>

La etiqueta <table>. Tiene varios atributos que nos permiten declarar con más precisión el aspecto con que se presentará la información en pantalla.Algunos de los atributos más importantes se reflejan en la siguiente tabla, y en la imagen que se muestra a continuación.

Atributo Valor del atributo Estilo Ejemplo

ALIGN <table ALIGN="left">...</table> Tabla alineada a la izquierda

a b

<table ALIGN="right">...</table> Tabla alineada a la derecha

a b

<table ALIGN="center">...</table> Tabla centrada

a b

BORDER <table BORDER="0">...</table> Anchura del marco exterior. Valor="0" indica que no hay marco (coincide con el valor por defecto cuando no aparece el atributo BORDER)

a b

<table BORDER="3">...</table> Anchura del marco exterior = 3pixel . Puede tomar cualquier valor numérico

a b

WIDTH <table WIDTH="50">...</table> Anchura de la tabla en pixels.(No recomendado). Puede tomar cualquier valor numérico.

a b

<table WIDTH="50%">...</table> Anchura de la tabla en % (Recomendado para que mantenga aspecto similar para distintas resoluciones de pantalla). El valor por defecto el el mínimo necesario para que se vea la información. Puede tomar cualquier valor (0%-100%)

a b

HEIGHT <table HEIGHT="50">...</table> Altura de la tabla en pixels.(No recomendado). Puede tomar cualquier valor numérico.

a b

<table HEIGHT="50%">...</table> Altura de la tabla en % (Recomendado para que mantenga aspecto similar para distintas resoluciones de pantalla). El valor por defecto el el mínimo necesario para que se vea la información. Puede tomar cualquier valor (0%-100%)

a b

CELLSPACING <table CELLSPACING="0">...</table> Espacio en pixels entre las celdas (por defecto=0). Puede tomar cualquier valor numérico

a b

<table CELLSPACING="3">...</table> Espacio entre celdas = 3 pixels

a b

CELLPADING <table CELLPADDING="0">...</table> Espacio en pixels alrededor del contenido de las celdas (por defecto =0). Puede tomar cualquier valor numérico

a b

<table CELLPADDING="3">...</table> Espacio entre el contenido y su celda = 3 pixels

a b

La siguiente imagen te puede ayudar a comprender mejor el significado de algunos de los atributos:

Ejercicio

Tarea:

Practica con los atributos WIDTH, BORDER, ALIGN, CELLSPACING y CELLPADING de la etiqueta <table>

Procedimiento:

Abre el editor interactivo pulsando aquí.

Escribe en el lado izquierdo el siguiente código HTML:

<HTML>
 <body>
  <h3>Tablas con Atributos</h3>
  <table width="100%" BORDER="1" ALIGN="center" CELLPADING="3" CELLSPACING="3">
   <tr>
    <td>Elemento 1.1</td>
    <td>Elemento 1.2</td>
   </tr>
   <tr>
    <td>Elemento 2.1</td>
    <td>Elemento 2.2</td>
   </tr>
  </table>
 </body>
</HTML>

Pulsa el botón submit y comprueba el resultado. Debe coincidir con el que se presenta a continuación
Modifica los valores de los atributos BORDER, CELLSPACING Y CELLPADDING asignando distintos valores entre 0 y 10 y observa los cambios producidos.
Modifica el valor del atributo WIDTH asignando distintos valores entre 0 y 100 y entre 0% y 100% y observa los cambios producidos.

Solución:

Deberia verse:

Tablas con Atributos

Elemento 1.1	Elemento 1.2
Elemento 2.1	Elemento 2.2

Observaciones:

Observa que si no ponemos el atributo WIDTH el navegador calcula automáticamente el tamaño que debe tener la tabla para que se vea correctamente todo su contenido.
Observa el valor por defecto que toma cada uno de los atributos mencionados. Para hacerlo puedes construir dos tablas. Una de ellas sin atributos y la otra modificando el valor de los atributos hasta que tenga el mismo aspecto que la primera.
Observa que los atributos se pueden colocar en cualquier orden dentro de la etiqueta <table>.
Observa que al igual que las listas las tablas se pueden anidar entre sí tantas veces como se quiera, es decir podemos definir una tabla como contenido de la celda de otra sin más que añadir la etiqueta <table>...</table> dentro de la celda correspondiente <td>...</td> como se muestra en el siguiente dibujo:

3. Atributos de filas y celdas de datos

Las etiquetas <tr> y <td>. Tienen varios atributos. La siguiente tabla muestra algunos de los más importantes. Cuando aplicamos el atributo al elemento <tr> su valor afecta a todas las celdas de la fila indicada. Cuando lo aplicamos a la etiqueta <td> afecta únicamente a la celda seleccionada. En la tabla se presenta como ejemplo la aplicación del atributo a la fila. La aplicación del atributo a una celda individual sería equivalente sustituyendo las etiquetas <tr>...</tr> por <td>...</td>. Los atributos ALIGN y VALIGN se aplican a filas y celdas individuales. los atributos COLSPAN y ROWSPAN se aplican únicamente a celdas individuales.

Atributo Valor del atributo Estilo Ejemplo

ALIGN <tr ALIGN="left">...</tr>
Contenido de la fila alineado horizontalmente a la izquierda

a b

<tr ALIGN="right">...</tr> Contenido de la fila alineado horizontalmente a la derecha

a b

<tr ALIGN="center">...</tr> Contenido de la fila centrado horizontalmente.

a b

VALIGN <tr VALIGN="top">...</tr> Contenido de la fila alineado verticalmente en la parte superior

a b

<tr VALIGN="middle">...</tr> Contenido de la fila centrado verticalmente

a b

<tr VALIGN="bottom">...</tr> Contenido de la fila alineado verticalmente en la parte inferior

a b

<tr VALIGN="baseline">...</tr> Contenido de la fila alineado verticalmente siguiendo la base de la primera línea de texto.

a b

COLSPAN <td colspan="2">...</td> Se utiliza para variar la anchura de una celda respecto a las otras. Su valor indica el número de celdas contiguas por la derecha que se expande. "a" se ha expandido 2 columnas y "b" se ha expandido 3.

a

c d

<td colspan="3">...</td>

b

c d e

ROWSPAN <td rowspan="2">...</td> Se utiliza para variar la altura de una celda respecto a las otras. Su valor indica el número de celdas contiguas hacia abajo que se expande. "a" se ha expandido 2 filas y "b" se ha expandido 3.

a b

c

<td rowspan="2">...</td>

a c

d

b

Ejercicio

Tarea:

Practica con el editor interactivo los atributos ALIGN y VALING con los elementos <td>...</td> y <tr>...</tr> y los atributos COLSPAN y ROWSPAN con el elemento <td>...</td>.

Procedimiento:

Abre el editor interactivo pulsando aquí.

Escribe en el lado izquierdo el siguiente código HTML. Este código corresponde a una tabla de 4 filas y 4 columas en la que hemos expandido 3 a lo largo de 3 columnas el elemento 1.1 y a lo largo de dos filas el elemento 2.1.

<HTML>
 <body>
  <h3>Atributos de filas y columnas</h3>
  <table BORDER="1" ALIGN="center">
   <tr>
    <td colspan="3">Elemento 1.1</td>
    <td>Elemento 1.2</td>
    <td>Elemento 1.3</td>
    <td>Elemento 1.4</td>
   </tr>
   <tr>
    <td rowspan="2">Elemento 2.1</td>
    <td>Elemento 2.2</td>
    <td>Elemento 2.3</td>
    <td>Elemento 2.4</td>
   </tr>
   <tr>
    <td>Elemento 3.1</td>
    <td>Elemento 3.2</td>
    <td>Elemento 3.3</td>
    <td>Elemento 3.4</td>
   </tr>
   <tr>
	<td>Elemento 4.1</td>
    <td>Elemento 4.2</td>
    <td>Elemento 4.3</td>
    <td>Elemento 4.3</td>
   </tr>
  </table>
 </body>
</HTML>

Pulsa el botón submit y comprueba el resultado.Deberia verse:

Atributos de filas y columnas

Elemento 1.1			Elemento 1.2	Elemento 1.3	Elemento 1.4
Elemento 2.1	Elemento 2.2	Elemento 2.3	Elemento 2.4
Elemento 2.1	Elemento 3.1	Elemento 3.2	Elemento 3.3	Elemento 3.4
Elemento 4.1	Elemento 4.2	Elemento 4.3	Elemento 4.3

Como puedes ver el resultado no tiene aspecto de una tabla de 4 filas y 4 columnas como esperábamos. Esto es así porque hemos expandido el elemento 1.1 a lo largo de las celdas 1.2 y 1.3 sin eliminar estas previamente para dejar espacio. Del mismo modo hemos expandido el elemento 2.1 hacia la casilla que tiene debajo 3.1 pero sin eliminar ésta.

Repite el ejercicio eliminando en el código HTML las casillas que corresponden a la zona de expansión tal y como se muestra en el siguiente código HTML:

<HTML>
 <body>
  <h3>Atributos de filas y columnas</h3>
  <table BORDER="1" ALIGN="center">
   <tr>
    <td colspan="3">Elemento 1.1</td>
    <td>Elemento 1.4</td>
   </tr>
   <tr>
    <td rowspan="2">Elemento 2.1</td>
    <td>Elemento 2.2</td>
    <td>Elemento 2.3</td>
    <td>Elemento 2.4</td>
   </tr>
   <tr>
    <td>Elemento 3.2</td>
    <td>Elemento 3.3</td>
    <td>Elemento 3.4</td>
   </tr>
   <tr>
	<td>Elemento 4.1</td>
    <td>Elemento 4.2</td>
    <td>Elemento 4.3</td>
    <td>Elemento 4.3</td>
   </tr>
  </table>
 </body>
</HTML>

Prueba el atributo de alineación horizontal ALIGN aplicándoselo a la celda que contiene el elemento 1.1
Prueba el atributo de alineación vertical aplicándoselo a la celda que contiene el elemento 2.1

Solución:

Debería verse:

Atributos de filas y columnas

Elemento 1.1			Elemento 1.4
Elemento 2.1	Elemento 2.2	Elemento 2.3	Elemento 2.4
Elemento 2.1	Elemento 3.2	Elemento 3.3	Elemento 3.4
Elemento 4.1	Elemento 4.2	Elemento 4.3	Elemento 4.3

Observaciones:

Observa en el código HTML del punto 5 como hemos eliminado las celdas sobre las que se produce la expansión.
Observa que las etiquetas de alineación horizontal y vertical no tienen ningún efecto cuando la celda es del mismo tamaño que el contenido, ya que en ese caso todas las alineaciones coinciden. Para comprobarlo puedes aplicar los atributos ALIGN y VALIGN a la celda que contiene el elemento 1.4

4. Atributos de estilo

HTML tiene atributos que nos permiten añadir tanto a las tablas como a cada una de las celdas de forma individual un color de fondo. Desde la versión 4.0 de HTML se recomienda utilizar las hojas de estilo para producir este efecto pero hasta que conozcamos las hojas de estilo vamos a ver cómo aplicar el atributo BGCOLOR (del inglés BackGround Color) para dar un color de fondo a las tablas <table BGCOLOR="valor">...</table> o a las celdas individuales <td BGCOLOR="valor">...</td>

Atributo Valor del atributo Estilo Ejemplo

BGCOLOR <table BGCOLOR="aqua">...</table>
Color de fondo de la tabla especificado mediante un nombre en inglés

a b

<table BGCOLOR="#00FFFF">...</table>
Color de fondo de la tabla indicado mediante un número en hexadecimal

a b

BGCOLOR <td BGCOLOR="red">...</td>
Color de fondo de la celda que contiene la "a" especificado mediante un nombre en inglés

a b

<table BGCOLOR="#FF0000">...</table>
celda que contiene la "a" indicado mediante un número en hexadecimal.

a b

Ejercicio

Tarea:

Practica con el editor interactivo el atributo BGCOLOR para el elemento <table>y para el elemento <td>

Procedimiento:

Abre el editor interactivo pulsando aquí.

Escribe en el lado izquierdo el siguiente código HTML.

<HTML>
 <body>
  <h3>Colores de Fondo</h3>
  <table BORDER="1" ALIGN="center">
   <tr>
	<td>Elemento 1.1</td>
	<td>Elemento 1.2</td>
   </tr>
  </table>
 </body>
</HTML>

Prueba a añadir distintos colores de fondo a las distintas celdas y a la tabla. Puedes seleccionar los colores de entre los que aparecen en esta tabla. Puedes encontrar una lista más completa de colores pulsando sobre este enlace

Nombre de los colores más frecuente en inglés
y sus correspondientes valores en hexadecimal
*	black = "#000000"	*	green = "#008000"
*	silver = "#C0C0C0"	*	lime = "#00FF00"
*	gray = "#808080"	*	olive = "#808000"
*	white = "#FFFFFF"	*	yellow = "#FFFF00"
*	maroon = "#800000"	*	navy = "#000080"
*	red = "#FF0000"	*	blue = "#0000FF"
*	purple = "#800080"	*	teal = "#008080"
*	fuchsia = "#FF00FF"	*	aqua = "#00FFFF"

5. Proyecto: Tablas

Vamos a comenzar la edición de la página Fotos.html que requiere una distribución espacial más compleja. En esta página queremos incluir inicialmente sólo tres fotos con sus descripciones pero el número de fotos se ampliará en el futuro.

Para darle un poco más de dinamismo a la página intercalaremos las fotos con sus descripciones. La página contendrá un título y una tabla 3x2 (3 filas y 2 columnas) que iremos ampliando añadiendo una nueva fila por cada foto que queramos incluir.

En la siguiente figura se muestra un fragmento de la página resultante:

Aplicación práctica

Tarea

Utiliza las etiquetas <table>, <tr> y <td> para construir una tabla que permita distribuir los elementos en pantalla.

Procedimiento

Observa la página de fotos del web de telémaco.
Abre con el wordpad el fichero.html de tu sitio web que contenga una colección de elementos que requieran una distribución espacial compleja.
Situate en el cuerpo del documento (en el espacio comprendido entre las etiquetas <body>...</body>).
Crea la tabla donde situarás cada uno de los elementos de tu página. Para hacerlo:
- Utiliza las etiquetas <table>...</table> para marcar el comienzo y final de la tabla.
  - Si quieres que se vean los bordes de la tabla utiliza el atributo border dentro de la etiqueta <table border="x"> con x mayor o igual que 1. Cuanto mayor sea el valor de x más gruesas serán las líneas de separación entre filas y columnas.
  - Si quieres que no se vean los bordes de la tabla utiliza <table border="0"> .
- Utiliza las etiquetas <tr>...</tr> para marcar el comienzo y final de cada fila.
- Utiliza las etiquetas <td>...</td> para marcar cada una de las celdas.
  - Si quieres que una celda ocupe más de una columna de la tabla puedes utilizar el atributo colspan dentro de la etiqueta <td colspan="x"> donde x es el número de columnas que ocupará la celda
  - Si quieres que una celda ocupe más de una fila de la tabla puedes utilizar el atributo rowspan dentro de la etiqueta <td rowspan="y"> donde y es el número de filas que ocupará la celda
Guarda el fichero.html y ábrelo con el navegador (Internet Explorer o Netscape Navigator) para comprobar el resultado.
Si el resultado no es como esperabas revisa de nuevo el contenido de tu página y comprueba si todas las etiquetas se abren y se cierran correctamente.
Si tienes alguna duda coméntala con tus compañeros en el foro titulado "HTML"

Solución:

Observaciones

Comprueba el aspecto de la página de Telémaco en el navegador pulsando sobre este enlace.
Puedes consultar el código HTML de esta página (o de cualquier página que consultes en Internet) desde tu navegador para hacerlo:
- Si utilizas Internet Explorer: Selecciona la opción de menú (Ver|Código Fuente)
- Si utilizas Netscape Navigator: Selecciona la opción de menú (Ver|Origen de la página)

6. Proyecto: Combinación Listas y Tablas

Vamos a comenzar la edición de la página Aficiones.html. El objetivo de esta página será coleccionar un conjunto de enlaces relacionados con las aficiones de Telémaco que sirva como punto de referencia para la gente con intereses similares. En esta página utilizaremos:

Una lista no numerada para representar la colección de enlaces de cada sección.
Se ha creado una tabla por cada sección para poder distribuir mejor los elementos en pantalla. Las filas de la tabla que contienen un título de sección se han dividido en varias celdas. El objetivo es reservar un espacio para incluir más adelante un icono característico de cada sección antes del título propiamente dicho. A veces se utilizan estas celdas para incluir una imagen de fondo después del título con un degradado que de un aspecto más profesional a la página. Puedes ver ese efecto en los titulares de las secciones de las páginas personales del departamento de telemática.

En la siguiente figura se muestra un fragmento de la página resultante. Las lineas de separación entre las filas y columnas se han representado mediante una línea roja para que se vea más claramente como se han utilizado para distribuir el espacio aunque en la versión final de la página estas líneas estarán ocultas. Aunque aún no se han incluido las imágenes se ha introducido un color de fondo en las filas (<tr>) y celdas (<td>) que componen la cabecera de cada sección mediante el atributo bgcolor.

Aplicación práctica

Tarea

Construye una página para tu sitio web que combine listas y tablas utilizando las tablas (etiquetas <table>, <tr> y <td>) para distribuir los elementos en pantalla y las listas (etiquetas <ul> y <li>) para las colecciones de elementos.

Procedimiento

Observa la página Aficiones.html del web de telémaco.
Abre con el wordpad el fichero.html de tu sitio web que contenga una colección de elementos con una distribución espacial compleja.
Situate en el cuerpo del documento (en el espacio comprendido entre las etiquetas <body>...</body>).
Crea la tabla donde situarás cada uno de los elementos de tu página. La creación de la tabla puede hacerse de lo general a lo particular o viceversa. El primer procedimiento fue el que utilizamos para construir la página Fotos.html (primero construimos la tabla, luego cada una de las filas de la tabla y por último cada una de las celdas de cada fila). Para construir la tabla de lo particular a lo general el procedimiento sería el inverso: primero marcaríamos las celdas, luego las agruparíamos en filas y por último agruparíamos las filas en tablas tal y como se describe a continuación:
- Utiliza las etiquetas <td>...</td> para marcar cada una de las celdas.
  - Si quieres que una celda ocupe más de una columna de la tabla puedes utilizar el atributo colspan dentro de la etiqueta <td colspan="x"> donde x es el número de columnas que ocupará la celda
  - Si quieres que una celda ocupe más de una fila de la tabla puedes utilizar el atributo rowspan dentro de la etiqueta <td rowspan="y"> donde y es el número de filas que ocupará la celda
- Utiliza las etiquetas <tr>...</tr> rodeando todas las celdas que formen una fila.
- Utiliza las etiquetas <table>...</table> rodeando todas las filas que formen una tabla.
  - Si quieres que se vean los bordes de la tabla utiliza el atributo border dentro de la etiqueta <table border="x"> con x mayor o igual que 1. Cuanto mayor sea el valor de x más gruesas serán las líneas de separación entre filas y columnas.
  - Si quieres que no se vean los bordes de la tabla utiliza <table border="0"> .
Añade una lista no numerada para cada sección de tu página que contenga una colección de elementos. Para hacerlo rodea cada uno de los elementos de la lista con las etiquetas <li>...</li> y el principio y final de la lista con las etiquetas <ul>...</ul>
Guarda el fichero.html y ábrelo con el navegador (Internet Explorer o Netscape Navigator) para comprobar el resultado.
Si el resultado no es como esperabas revisa de nuevo el contenido de tu página y comprueba si todas las etiquetas se abren y se cierran correctamente.
Si tienes alguna duda coméntala con tus compañeros en el foro titulado "HTML"

Solución:

Observaciones

Comprueba el aspecto de la página de Telémaco en el navegador pulsando sobre este enlace.
Puedes consultar el código HTML de esta página (o de cualquier página que consultes en Internet) desde tu navegador para hacerlo:
- Si utilizas Internet Explorer: Selecciona la opción de menú (Ver|Código Fuente)
- Si utilizas Netscape Navigator: Selecciona la opción de menú (Ver|Origen de la página)

inicio | mapa del web | contacta

Last Revision: