Tutorial HTML: Tablas básicas

Las tablas son uno de los sistemas más flexibles para la disposición de contenido (texto, imágenes).

Código básico de tabla

Las tablas se componen de muchas piezas, todas en el interior una de otra.

< table border="1">
<tr>
<td>Elemento 1</td>
<td>Elemento 2</td>
</tr>
<tr>
<td>Elemento 3</td>
<td>Elemento4</td>
</tr>
</table>

Esto nos da como resultado:

<table>, sonlos cimientos, todo va dentro, son los límites.
<tr>, comienza una nueva fila. Las filas terminan con un cierre </tr>.
<td>, cada caja es un td, el td se cierra igual que el <tr>. </td >.
</table>, termina la tabla.

No podemos poner cualquier cosa en una tabla que no esté dentro de un td y este dentro de un tr - es decir no podemos comenzar a escribir después de una etiqueta de tr, debemos poner en el td primero.

Debemos tener cuidado cuando cerramos la etiquetas. Puesto que el tr contiene el td, y todo esto la tabla, si olvidamos de algunas etiquetas del extremo, la tabla entera puede verse afectada en su visualización en los navegadores.

Cualidades de una tabla

El tamaño se puede fijar en cualquier valor, las tablas pueden ser con centro alineado, a la izquierda o a la derecha; la anchura se utiliza para especificar cómo la tabla es de ancha, en pixeles o en porcentaje de la anchura de la pantalla.

El cellpadding es el espacio alrededor de un elemento cualquiera dentro del td.

Por ejemplo:

* Sin cellpadding

Por ejemplo:

* Con un cellpadding de 10 px

El cellspacing es el espacio entre celdas.

Por ejemplo:

* Sin cellspacing

Por ejemplo:

* Con un cellspacing de 10px

Alineamiento de celdas

Podemos alinear no solamente la tabla entera al lado o al centro, además podemos también alinear el texto, o imágenes, o lo que haya dentro de un td, al lado, centro, o arriba o abajo. Por ejemplo:

Ponemos simplemente la cualidad de alinear en la etiqueta del td (o en el tr si deseamos afectar la fila entera). Como <td align="right">.

Tamaño de tablas y celdas

Podemos agregar la cualidad del width="x " y height="x" en la etiqueta de la tabla o en los td individuales.

La anchura que va a tener la tabla se la damos en píxeles la anchura sera absoluta, con esa medida independientemente del tamaño de la pantalla o del elemento que contenga la tabla, mientras que si le damos un valor en % la anchura sera relativa al tamaño de pantalla ó del elemento que contenga la tabla. Así, si queremos que la tabla ocupe toda la ventana del navegador, bastará con especificar WIDTH="100%".

El alto puede venir expresado como un entero (píxeles) ó como tanto por ciento (%). Este atributo nos permite determinar lo alta que va a ser la tabla, y con él ocurre ocurre igual que con WIDTH en lo que respecta a los valores abolutos (píxeles) y relativos (%). Normalmente el alto de la tabla no se especifica, ya que su valor lo va a determinar el texto o las imagenes que vayamos a introducir en las celdas.

Borde y colores en las tablas

Este atributo permite que veamos los bordes de la tabla y de las celdas que la componen.

Si no se usa este atributo no veremos los bordes, ya que su valor por defecto es BORDER=0.

Ejemplo:

<TABLE WIDTH="50%" BORDER="0">
<TR>
<TD>Elemento 1</TD>
<TD>Elemnto 2</TD>
</TR>
</TABLE>

Ejemplo:

<TABLE WIDTH="50%" BORDER="5">
<TR>
<TD>Elemento 1</TD>
<TD>Elemento 2</TD>
</TR>
</TABLE>

BGCOLOR= "color", es donde color va a venir expresado lo mismo que ocurría en BORDERCOLOR, es decir, o mediante su nombre web en inglés o mediante su código hexadecimal. Con este atributo podemos definir el color de fondo que va a tener la tabla.

Ejemplo:

<TABLE BORDER="3" bordercolor="#FF0000">
<TR>
<TD>Elemento 1</TD>
<TD>Elemento 2</TD>
</TR>
</TABLE>

Ejemplo:

<TABLE BGCOLOR="#66FFFF">
<TR>
<TD>Elemento 1</TD>
<TD>Elemento 2</TD>
</TR>
</TABLE>

BACKGROUND, (path de la imagen) es la imagen que nos va a permitir establecer una imagen de fondo para toda la tabla, y en donde "path imagen" va a ser la ruta de los directorios o una URL de Internet en la que se encuentra la imagen.

Así, si tenemos nuestra pagina colgando del directorio raíz de la aplicación web y dentro de este hay una carpeta "imagenes" que contiene a nuestra imagen de fondo "imagen.jpg", la sintaxis correcta sería:

<TABLE WIDTH="100%" HEIGHT="300px" BORDER="1" BACKGROUND="imagenes/imagen1.jpg">
<TR>
<TD>Elemento 1</TD>
<TD>Elemento 2</TD>
</TR>
</TABLE>

Enlaces amigos: Publicidad en Google

Otras webs: Popularidad