Una tabla está compuesta por columnas y filas que conforman un conjunto de celdas que permiten mostrar información de manera organizada. En una celda se puede incluir indistintamente texto, imágenes o cualquier otro elemento soportado por HTML.
Para crear tablas en HTML, se utiliza la etiqueta <TABLE> cuyos atributos principales son:
WIDTH ="95%" Ancho de la tabla con respecto al tamaño de la página. En este caso la tabla ocupará el 95%; o WIDTH ="600", con lo que la tabla tendrá un ancho de 600 píxeles.
BORDER ="1" Ancho en puntos de los bordes exteriores de la tabla. CELLSPACING ="0" Ancho en puntos entre los bordes de las celdas
CELLPADDING ="4" Espacio en puntos, que separa el borde de la celda de su contenido.
BGCOLOR ="#0000ff" Color del fondo de tabla. En el ejemplo azul.
En la etiqueta <TABLE> se definen las características principales de la tabla, pero no se dice de cuántas filas y columnas estará compuesta ni cuál será su contenido. En realidad existen tres etiquetas adicionales, que colocadas adecuadamente dentro de <TABLE> y </TABLE> permiten controlar el número de filas y columnas, además de otras características:
<TR> Se utiliza para definir una nueva fila.
<TD> Permite agregar una celda o columna dentro de una fila
<TH> Es similar a <TD>, con la diferencia de que el texto contenido en ella será escrito en negrilla.
Lo anterior significa que una tabla en HTML tendrá tantas filas como etiquetas <TR> contenga y una fila estará compuesta por un número de celdas igual al de etiquetas <TD> o <TH> que la misma tenga.
Las siguientes líneas ilustran el uso de estas etiquetas para crear una tabla sencilla, compuesta por dos filas y dos columnas:
Las etiquetas <TD> y <TH> tienen entre otros, atributos que permiten controlar: el color del fondo de la celda (BGCOLOR=”color”), la alineación del texto o de la imagen dentro de la celda (ALIGN=”alineación”), y que funcionan de manera idéntica a los utilizados con las etiquetas <H#>, <P> y <FONT>. Otro de los atributos importante de estas dos etiquetas, es el que permite indicar el número de columnas o de filas que ocupará una celda en particular. Suponga que se debe crear una tabla similar a la siguiente:
TÍTULO DE LA TABLA
Observe que la tabla está compuesta por dos filas y dos columnas, y que lacelda del título ocupa dos columnas. Cuando este es el caso, es decir que una celda está distribuida en dos o mas columnas o filas, se utiliza para su definición el Atributo COLSPAN=”X” o ROWSPAN=”X” respectivamente. X obviamente corresponde al número de columnas o filas sobre las que se distribuirá la celda.
Para crear la tabla que se muestra arriba, se debe escribir:
Y si lo que se desea es crear una tabla como la siguiente:
En ocasiones es necesario presentar información de manera ordenada mediante listas con viñetas o listas numeradas. Con HTML se pueden crear tres de estos tipos de listados: listas ordenadas o numeradas, listas con viñetas o listas de definición, cada una de ellas con sus variaciones.
LISTA ORDENADA <OL>
Considere el caso en el que debe presentar la lista numerada de algunas de
las dependencias de la empresa donde trabaja, comenzando con un número en particular:
4. Dirección de Informática
5. Planeación
6. Vicepresidencia Financiera
7. Comunicaciones
El listado anterior se consigue en HTML mediante el uso de las etiquetas <OL> (Ordered List) y <LI> (List Item):
<OL TYPE ="1" START ="4">
<LI>Dirección de Informática <LI>Planeación
<LI>Vicepresidencia Financiera <LI>Comunicaciones
</OL>
En la etiqueta <OL>, el atributo TYPE ="1" indica que la lista será
numérica (el número entre comillas puede ser cualquier entero y el resultado será el mismo), mientras que el atributo START ="4" hace que el primer elemento del listado esté precedido por el número 4, el segundo por el número
sucesivamente. Sí no se incluye ninguno de los dos atributos anteriores, el explorador desplegará la misma lista pero comenzando el listado en 1.
Sí se quiere presentar el mismo listado pero de la siguiente manera:
A. Dirección de Informática
B. Planeación
C. Vicepresidencia Financiera
D. Comunicaciones
Bastará con cambiar el 1 del atributo TYPE por una A y el 4 del atributo START por un 1, o simplemente omitir éste último:
<OL TYPE = "A" START ="1">
<LI>Dirección de Informática <LI>Planeación
<LI>Vicepresidencia Financiera <LI>Comunicaciones
</OL>
EJERCICIO PROPUESTO
Cambie la A mayúscula del tributo TYPEpor una i, luego por una I y finalmente por una a y observe los resultados.
LISTA CON VIÑETAS <UL>
Sí en lugar de una letra o un número precediendo los ítems del listado, lo que se quiere es que aparezca una viñeta, se debe entonces utilizar la etiqueta <UL> (Unorderd List) de la siguiente manera:
<UL TYPE = "circle">
<LI> Ítem 1
<LI> Ítem 2 <LI> Ítem 3 <LI> Ítem 4 </UL>
lo que producirá una lista similar a:
o Ítem 1 o Ítem 2 o Ítem 3 o Ítem 4
La etiqueta <UL> únicamente tiene el atributo TYPE, que se refiere al tipo de viñeta que presentará. Pruebe omitiendo este atributo o cambiando circle por disc o por square.
LISTA DE DEFINICIÓN <DL>
Esta etiqueta como su nombre lo indica, permite desplegar listas de palabras con su correspondiente definición. Se utiliza típicamente en la construcción de glosarios. Considere por ejemplo, la siguiente lista de términos que definen las funciones de algunas dependencias de la empresa:
PLANEACIÓN:
Encargada de ejecutar y revisar los planes de inversión.
INFORMÁTICA:
Encargada de diseñar, implementar y ejecutar los planes de desarrollo informático en la empresa.
RECURSOS HUMANOS:
Encargada de los asuntos relacionados con el recurso humano.
El listado anterior se comienza y termina con las etiquetas <DL> y </DL>. Cada uno de los términos a definir se precede con la etiqueta <DT>, mientras que a la definición en sí, se le antepone la etiqueta <DD>:
<DL>
<DT>PLANEACIÓN:
<DD>Encargada de ejecutar y revisar los planes de inversión. <DT>INFORMÁTICA:
<DD>Encargada de diseñar, implementar y ejecutar los planes de desarrollo informático
en la empresa.
<DT>RECURSOS HUMANOS.
<DD>Encargada de los asuntos relacionados con el recurso humano.
Hasta ahora se ha trabajado con páginas cuyos colores son: blanco para el fondo y negro para el texto escrito en ellas. Estos son los colores que HTML toma por defecto. El uso adecuado de la etiqueta <BODY>, que por supuesto tiene atributos, permite entre otras cosas cambiar o establecer: el color del texto, un color o una imagen de fondo y los colores de los enlaces que tendrá la página. La siguiente es la sintaxis completa de esta etiqueta:
nombre_imagen se refiere al nombre, o mejor la ubicación del archivo de unaimagenquesequiereaparezcacomofondodelapágina,color_fondo, color_texto, color_enlace, color_enlace_V y color_enlace_Acorresponden a los códigos olos nombres de los colores para el fondo de la página, el texto de la información, el texto de los enlaces no visitados, el texto de los enlaces visitados y el texto de los enlaces activos respectivamente. El manejo de estos tres últimos se verá más adelante en el capítulo correspondiente a enlaces.
El siguiente ejemplo desplegará una página con fondo negro (black) y texto de colorlima (#00ff00):
UBICACIÓN DE ARCHIVOS
Antes de comenzar a trabajar con imágenes, es indispensable entender el concepto de la ubicación relativa de archivos. Existen en HTML algunos atributos que indican la ruta o el camino donde se encuentran ubicados ciertos elementos y no un valor simple como un número o el código de un color. Tal es el caso del atributo background cuyo valor hace referencia a la ubicación y el nombre de una imagen que se quiere aparezca como fondo en la página (BACKGROUND=”ruta”).
Cualquieraqueseaelsistemaoperativoqueseutilice,losprogramas, aplicaciones,archivosydocumentosseguardanfísicamenteenunaunidadde almacenamiento, dentro de una jerarquía de directorios y subdirectorios conocida como Sistema de Archivos.
Undirectoriopuede contenerarchivosyotrosdirectoriosdenominados subdirectorios. Dependiendo de la ubicación de las páginas y las imágenes u otros objetos dentro del sistema de archivos, el valor o ruta de los atributos, cambia. Existen tres posibilidades (ver gráfica de Ejemplo de sistema de Archivos):
La imagen se encuentra en un subdirectorio ubicado en el mismo nivel o por debajodel subdirectorio que contiene la página (ejemplos: Página 3 e Imagen 1, Página 3 e Imagen 2 y Página 1 e Imagen 2).
La imagen se encuentra en un subdirectorioarriba del que contiene la página (ejemplos: Página 2 e Imagen 1, Página 2 e Imagen3 y Página 1 e Imagen 3).
El ejemplo más sencillo se tiene cuando, tanto la imagen de fondo como la página residen en el mismo directorio o subdirectorio. En este caso la ruta se reduce al nombre de la imagen:
Si la imagen de fondo reside en un subdirectorio al mismo nivel o por debajo del directorio que contiene la página, la ruta además del nombre de la imagen debe estar compuesta por el o los nombresde los subdirectorios que la contienen, separados por un slash (/). Si por ejemplo, se desea que “Imagen 2” aparezca como fondo de la Página 3, la ruta será: “D2/D3/Imagen 2”, con lo que la etiqueta BODY será similar a:
La última posibilidad que existe es que la imagen se encuentre ubicada uno o mas niveles por encima del directorio que contiene la página. En este caso la ruta estará compuesta por el nombre de la imagen, precedida por un conjunto de dos puntos y un slash (../)por cada nivel que sea necesario subir para alcanzar el directorio donde está ubicada la imagen. Con los siguientes ejemplos se ilustra esta situación:
La “Imagen 1”, ubicada un nivel por encima debe aparecer como fondo de la “Pagina 2” . La ruta será: “../Imagen 1” y la etiqueta BODY debe ser:
Ahora se quiere que“Imagen 3” sea el fondo de la “Pagina 2”:
Es importante mencionar que HTML soporta sólo ciertos formatos de imagen. Básicamente se pueden mostrar imágenes creadas en formato GIF y JPG. Las últimas versiones de navegadores soportan el formato PNG de MACROMEDIA ®.
