Curso de creación de sitios web - Lección 4 - Página 2

Estructura HTML de las tablas

Los ejemplos anteriores tienen una forma de representarse dentro de HTML. La estructura de una tabla inicialmente es muy sencilla, pero como todo, puede llegar a complicarse. Este nivel de complicacion, dependerá de la estructura de la misma, el diseño que hagamos y otros factores.

Para comenzar, vamos a ver qué estructura tiene una tabla cuando miramos su código:

<table>
<tr>
<td>Contenido de la celda 1</td>
<td>Contenido de la celda 2</td>
</tr>
</table>

No parece muy complicado y es que no lo es. Estudiemos el código paso a paso:

<table>: define el comienzo de la tabla.
<tr>: Define el comienzo de una nueva fila y por tanto, implica un salto de línea.
<td>: Define una nueva columna y contendrá los datos de una celda.

El resto de etiquetas son de cierre, es decir, aquellas que finalizan las etiquetas que acabamos de ver. Debemos fijarnos también que los contenidos de las celdas (en este caso el texto) se encuentra entre <td> y </td>.
El resultado sería el siguiente:

Nota: La tabla anterior se supone que es transparente porque no le hemos asignado ningún borde, sin embargo, lo hemos activado para poder visualizar mejor el resultado del código.

Ahora lo vamos a complicar un poco más, añadiendo una nueva fila y columnas.

<table>
<tr>
<td>Contenido de la celda 1</td>
<td>Contenido de la celda 2</td>
</tr>
<tr>
<td>Contenido de la celda 3</td>
<td>Contenido de la celda 4</td>
</tr>
</table>

Lo que hemos añadido nuevo está en color rojo, como ves abrimos una nueva fila y dentro metemos dos nuevas columnas que deben coincidir con las anteriores. El resultado es:

Atributos de las tablas y celdas

Al igual que los textos, las tablas también tienen atributos con los que poder diseñar su aspecto final.

Los atributos para la etiqueta <table> son los siguientes:

• Width: Define el ancho de una tabla. Puede ir en píxeles o bien en tantos por ciento con respecto al tamaño de la pantalla. Ej. width="80", width="100%". Si el valor se da en píxeles, no se añade nada y si se da en tantos por ciento, se añade el símbolo porcentual.
• Heigh: Altura de la tabla expresada en píxeles o en porcentaje, como width.
• Border: Indica el ancho del borde de la tabla. Ej. border="1".
• Align: Alineación de la tabla completa. Puede contener los parámetros left (izquierda), center (centro), right (derecha). Ej. align="center".
• Bgcolor: Define el color de la tabla completa. Ej. bgcolor="red".
• Background: Podemos añadir una imagen al fondo de una tabla con este atributo. Ej. background="fondo.gif".
• Cellspacing: Este atributo define la distancia en píxeles entre las celdas de la tabla. Ej. cellspacing="2".
• Cellpadding: Este otro atributo define la distancia entre el contenido de la celda y el borde de la misma. Ej. cellpadding="4".

Existen también otros atributos como borderColor o borderColorLight que repasaremos en la siguiente página de nuestro curso.

Para las celdas <td>, los atributos pueden ser los siguientes:

• Align: Define la alineación horizontal del contenido de la celda. Al igual que en la tabla, puede contener los parámetros left (izquierda), center (centro), right (derecha). Ej. align="center".
• Valign: Define la alineación vertical del contenido de una celda. Sus parámetros pueden ser top (arriba), middle (medio), bottom (abajo). Ej. valign="middle".
• Bgcolor: Indica el color del fondo de una celda.
• Background: Nos permite añadir una imagen de fondo a una celda en concreto.

Ejemplo de una tabla con atributos

Según lo que hemos visto anteriormente, vamos a crear una tabla dándole un poco de forma y diseño haciendo uso de los atributos. Veámoslo paso a paso.

1. Creamos una tabla con el fondo amarillo, un borde 2, el espacio entre el contenido de la celda y el borde de la misma será de 5 y el espacio entre celdas será de 4. Además, la tabla tendrá una anchura total del 80% de la página web que estamos creando y la alinearemos al centro de la misma. Todo esto se expresa con la siguiente línea:

<table bgcolor="yellow" border="2" cellpadding="5" cellspacing="4" width="80%" align="center">

2. Creamos una fila.

<tr>

3. Creamos una columna que contiene un texto. La cerramos después del texto.

<td>Esto es un texto de prueba en la columna 1</td>

4. Creamos otra columna como la anterior, para que queden dos celdas.

<td>Esto es un texto en la columna número 2</td>

5. Cerramos ahora la fila.

</tr>

6. Creamos una nueva fila, para complicar un poco las cosas...

<tr>

7. Creamos ahora una celda con <td> que tenga la siguiente estructura: alineación horizontal al centro, alineación vertical arriba y el color de fondo será verde claro:

<td align="center" valign="top" bgcolor="lime">Texto de prueba en la columna 1 fila 2</td>

8. Ahora crearemos una celda con algo que no habíamos visto aún y es la posibilidad que nos ofrece "background" de insertar una imagen de fondo. En este caso, la imagen que vamos a insertar es: .

<td background="http://mundopc.net/webmasters/cursos/web/images/4/fondo.gif">Texto de prueba en la columna 2 fila 2</td>

9. Cerramos la segunda fila creada.

</tr>

10. Cerramos finalmente la tabla:

</table>

El código en su conjunto es:

<table bgcolor="yellow" border="2" cellpadding="5" cellspacing="4" width="80%" align="center">
<tr>
<td>Esto es un texto de prueba en la columna 1</td>
<td>Esto es un texto en la columna número 2</td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="blue">Texto de prueba en la columna 1 fila 2</td>
<td background="http://mundopc.net/webmasters/cursos/web/images/4/fondo.gif">Texto de prueba en la columna 2 fila 2</td>
</tr>
</table>

Y el resultado:

Nuestro consejo es que a continuación, crees tu mism@ una tabla distinta a la anterior, aplicando los atributos anteriores con el diseño y colores que más te gusten. Así podrás ir practicando.

Pasemos a ver ahora en la siguiente página (4B), como crear tablas con Trellian Webpage.

Índice
Capítulo 1: 1 1A 1B
Capítulo 2: 2 2A 2B
Capítulo 3: 3
Capítulo 4: 4 4A 4B
Capítulo 5: 5 5A 5B
Capítulo 6: 6 6A 6B 6C 6D 6E
Capítulo 7: 7 7A