|
Home / Docencia / Introducción a HTML | |
Fases de Diseño de un sitio Web: III. Fase Producción |
|
|
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. EjercicioTarea:Practica con el editor interactivo las etiquetas <table>...</table>, <tr>...</tr>, <td>...</td> y <th>...</th>relacionadas con las tablas en HTML Procedimiento:
|
Solución:
Deberia verse:
Observaciones:
|
|
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.
La siguiente imagen te puede ayudar a comprender mejor el significado de
algunos de los atributos: EjercicioTarea:Practica con los atributos WIDTH, BORDER, ALIGN, CELLSPACING y CELLPADING de la etiqueta <table> Procedimiento:
|
Solución:
Deberia verse:
Observaciones:
|
|
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.
EjercicioTarea: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:
|
Solución:
Debería verse:
Observaciones:
|
|
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>
EjercicioTarea:Practica con el editor interactivo el atributo BGCOLOR para el elemento <table> y para el elemento <td> Procedimiento:
|
|
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ácticaTareaUtiliza las etiquetas <table>, <tr> y <td> para construir una tabla que permita distribuir los elementos en pantalla. Procedimiento
|
Solución:
Observaciones
|
|
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:
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ácticaTareaConstruye 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
|
Solución:
Observaciones
|
|