Me parecio util...
Espero que les sirva!

Introducción a las tablas

Las tablas son una de las herramientas mas útiles de que disponemos en HTML, ya que nos van a permitir en cierto modo "maquetar" nuestro documento, ayudandonos a situar dentro del mismo los diferentes elementos que lo componen, siendo esta la única forma coherente de distribución que había antes de la introducción de las Hojas de Estilo y de las capas.

Es por esta facilidad a la hora de organizar con tablas nuestras paginas el que el 99% de las que veamos en Internet las usen, aunque muchas veces no las veamos directamente porque estan "ocultas".

Pero no todo es coser y cantar a la hora de trabajar con tablas, ya que a veces actúan un poco "a su aire", por lo que podemos llegar a desesperarnos al pasar varias horas intentando que una tabla se comporte como nosotros queremos. Esto es debido a que en el origen del lenguaje HTML las tablas fueron diseñadas por científicos de las universidades para contener y organizar información, no como una ayuda para el diseño grafico de la pagina, ya que en esa época el lenguaje y las paginas web se concebían como una forma de transmitir texto plano, en monitores monocromos y de poca resolución, y no fué hasta el posterior desarrollo de Internet, de la WWW y de la tecnología de ordenadores personales avanzados cuando se empezó a tener en cuenta la importancia del diseño visual de una pagina web como un medio global para transmitir no solo texto plano, si no tambien contenidos graficos y multimedia.

Para solucionar estas carencias hace falta conocer bien todas las etiquetas y atributos de que disponemos para la creación de tablas, así como unos cuantos truquillos que veremos mas en el desarrollo de este capítulo.

Las tablas estan formadas por filas, columnas y celdas. Cada espacio horizontal continuado es una fila y cada espacio vertical continuado es una columna, definiéndose una celda como el espacio formado por la intersección de una fila y una columna.

columna 1 columna 2 columna 3
fila 1 celda(1,1) celda(1,2) celda(1,2)
celda(2,1) celda(2,2) celda(2,3)
celda(3,1) celda(3,2) celda(3,3)

fila 2
fila 3

Lo primero que tenemos que hacer cuando queremos introducir una tabla es decirle al navegador dónde empieza y dónde acaba esta; esto se consigue mediante la etiqueta de inicio <TABLE> y su correspondiente de cierre </TABLE>.

Seguidamente debemos decirle cuantas filas vamos a tener en nuestra tabla, cosa que hacemos con las etiqueta de inicio de fila <TR>> y su correspondiente de cierre de fila</TR>, por lo que deberenos insertar una pareja de etiquetas por cada fila que queramos que tenga la tabla.

Por último, dentro de cada fila deberemos indicar cuantas celdas va a haber, que inicialmente deben corresponderse con el número de columnas que deseemos tenga la tabla. Esto se consigue mediante las parejas de etiquetas <TD> y </TD>.

De esta forma, y siguiendo con nuestra tabla inicial de Ejemplo, el esquema de etiquetas sería el siguiente:

<TABLE>
<TR> <TD>...</TD> <TD>...</TD> <TD>...</TD>
<TD>...</TD> <TD>...</TD> <TD>...</TD>
<TD>...</TD> <TD>...</TD> <TD>...</TD>
</TR>
<TR> </TR>
<TR> </TR>
</TABLE>

Este es el esquema general de toda tabla simple, que traducido a código HTML quedaría de la forma:


<TABLE>
<TR>
<TD> celda(1,1) </TD>
<TD> celda(1,2) </TD>
<TD> celda(1,3) </TD>
</TR>
<TR>
<TD> celda(2,1) </TD>
<TD> celda(2,2) </TD>
<TD> celda(2,3) </TD>
</TR>
<TR>
<TD> celda(3,1) </TD>
<TD> celda(3,2) </TD>
<TD> celda(3,3) </TD>
</TR>
</TABLE>


La visualización de una tabla se genera automaticamente a partir de las filas y las columnas definidas. Sin embargo para un navegador no es facil interpretar a tiempo como debe aparecer la tabla. Primero tiene que leer la tabla completa antes de poder visualizar alguna cosa. En caso de tablas muy grandes eso puede conducir a que en la pantalla aparecen espacios vacios desagradables mientras que la pagina se carga. HTML 4.0 ofrece una nueva sintaxis para comunicarle al navegador al principio de la tabla cuantas columnas tiene. De esta manera el navegador puede cargar la tabla mucho mas rapido, o sea que una parte de la tabla es visualizada antes de que la totalidad de la tabla haya sido leída. Esto se debe implementar mediante las etiquetas <COLGROUP>...</COLGROUP> y sus hijas <COLS>. No obstante, estas etiquetas, que veremos mas adelante, sólo son compatibles con Internet Explorer, cosa que las hace desaconsejables para nuestras paginas, pués debemos siempre crear paginas compatibles con todos los navegadores de cuarta generación y todas las resoluciones habituales.

Ademas de estas etiquetas basicas existen otras varias que nos van a permitir adaptar la tabla a nuestras necesidades. Y cada etiqueta posee ademas varios atributos, que van a modificar la forma en que se comportan, que empezaremos a ver en el próximo capítulo.

Etiqueta <TABLE> y sus atributos

<TABLE> y </TABLE> son las etiquetas principales de definición de una tabla, que acotan el espacio en el que podemos definir filas y celdas. Sus principales atributos son:

* WIDTH="p", donde p puede venir expresado en píxeles ó en tanto por ciento (%). Este atributo determina la anchura que va a tener la tabla. Si le damos un valor 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, bastara con especificar WIDTH="100%".

<TABLE WIDTH="100" BORDER="1">
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>
UNO DOS

<TABLE WIDTH="50%" BORDER="1">
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>
UNO DOS

<TABLE WIDTH="100%" BORDER="1">
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>
UNO DOS

* HEIGHT= "p", donde p 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 y/o las imagenes que vamos a introducir en las celdas de la misma.
Ejemplo-

<TABLE WIDTH="100" HEIGHT="100" BORDER="1">
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE> UNO DOS

* BORDER= "n", donde n es un número entero. Este atributo va a permitir que veamos los bordes de la tabla y de las celdas que la componen, que van a tener una anchura de n píxeles, Si no se usa este atributo no veremos los bordes, ya que su valor por defecto es BORDER=0.Las celdas sin contenido no apareceran con bordes, por lo que si queremos que se muestren deberemos insertar en la celda un gif transparente de 1x1 píxeles, un espacio (&nbsp o una etiqueta <BR>.
Ejemplo-

<TABLE WIDTH="100" BORDER="0">
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE> UNO DOS

<TABLE WIDTH="100" BORDER="5">
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE> UNO DOS

* BORDERCOLOR= "color", donde color puede venir expresado mediante su nombre web en inglés ó mediante su código hexadecimal. Nótense las comillas que encierran la definición del color.Este atributo nos permite definir el color en que se vera el borde, pero mientras que en Iexplorer se veran de ese color tanto los bordes exteriores de la tabla como los interiores de las celdas, en Nestcape sólo se veran del color especificado los bordes exteriores de la tabla, permaneciendo los interiores del color gris predeterminado. Otra diferencia entre ambos navegadores es que en Iexplorer se ven los bordes lisos, mientras que en Nestcape se ven con estilo sólido.Lógicamente, para que se vean los bordes de color esta etiqueta debe ir acompañada de BORDER=1,2,., es decir, tenemos que haber definido previamente un ancho de borde. Ademas, existen dos atributos de color de borde que sólo se ven en Internet Explorer:

- BORDECOLORDARK, que establece los colores exteriores del borde derecho y del borde inferior y los interiores del borde izquierdo y del borde superior.
- BORDECOLORLIGHT, que los establece al contrario.
Ejemplos.-

<TABLE BORDER="1" BORDERCOLOR="red" CELLSPACING="0">
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE> UNO DOS

<TABLE BORDER="5" BORDERCOLOR="#003366" CELLSPACING="0">
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>

Etiqueta <TABLE> y sus atributos. (continuación I...)

* BGCOLOR= "color", 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.
Ejemplos.-

<TABLE BORDER="1" BGCOLOR="red">
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE> UNO DOS

<TABLE BGCOLOR="#66FFFF">
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE> UNO DOS

* BACKGROUND= "ruta imagen", que nos va a permitir establecer una imagen de fondo para toda la tabla, y en donde "ruta imagen" va a ser la ruta de directorios o una URL de Internet en la que se encuentra la imagen . Así, si tenemos nuestra pagina colgando del directorio raiz de la aplicación web y dentro de este hay una carpeta "images" que contiene a nuestra imagen de fondo "fondo1.gif", la sintaxis correcta sería:
<TABLE WIDTH="200" HEIGHT="750" BORDER="1" BACKGROUND="images/fondo1.gif">
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE> UNO DOS

mientras que si la imagen se encuentra en un servidor web, deberemos escribir: (es solo un ejemplo, ya que la ruta depende del servidor):

<TABLE WIDTH="200" HEIGHT="750" BORDER="1"
BACKGROUND="http://www.miservidor.com/midirectorio/images/fondo1.gif"> <TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>

con lo que obtendríamos el mismo resultado que en el Ejemplo anterior, aunque no es recomendable utilizar imagenes que estén en directorios que no controlemos personalmente, ya que si la persona responsable del mismo elimina la imagen nuestra tabla no se vera correctamente.
* CELLSPACING= "n", donde n es un número entero. Nos permite establecer el espacio que va a haber entre las celdas, con lo que podemos dar una mayor o menor separación a las mismas, determinado por n=nº de píxeles entre ellas. Si la tabla esta definida con bordes, este atributo modificara en grosor del borde interior de la misma.

Ejemplos.-

<TABLE BORDER="1" CELLSPACING="0">
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE> UNO DOS


<TABLE BORDER="1" CELLSPACING="3">
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE> UNO DOS

* CELLPADDING= "n", con n=nº entero=nº de píxeles. Este valor nos va a determinar el espacio interior en las celdas, es decir, el espacio que habra entre los bordes de la celda y el texto, imagen o componente que hay dentro de esta.

Ejemplos.-
<TABLE BORDER="1" CELLPADDING="0">
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE> UNO DOS

<TABLE BORDER="1" CELLPADDING="10">
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE> UNO DOS

*ALIGN= "a". Este atributo nos va a permitir alinear la tabla respecto a la pantalla activa o respecto al elemento que contiene a la tabla, dependiendo de los posibles valores del atributo a, que son:
- a=LEFT alinea la tabla a la izquierda. Es el valos por defecto.
- a=CENTER situa la tabla en el centro .
- a=RIGHTsitua la tabla a la derecha del elemento contenedor.
Ejemplos.-

<TABLE BORDER="1" ALIGN="LEFT">
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>
UNO DOS

<TABLE BORDER="1" ALIGN="center">
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>
UNO DOS

<TABLE BORDER="1" ALIGN="right">
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>

Etiqueta <TABLE> y sus atributos. (continuación II...) * FRAME=" void / above / below / hsides /lhs / rhs / vsides / box /border ". Este atributo es complementario a BORDER y sólo funciona con Internet Explorer, y posibilita, en una tabla con bordes, especificar cual o cuales de los exteriores seran visibles. Podemos especificar pués:
- void - no se ven los bordes.
- above - borde superior.
- below - borde inferior.
- hsides - bordes superior e inferior.>
- lhs - borde izquierdo.
- rhs - borde derecho.
- vsides - bordes laterales.
- box - todos los bordes.
- border - todos los bordes.

Ejemplos.- (Sólo para Explorer)



<TABLE BORDER="1" CELLSPACING="0" FRAME="above">
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE> UNO DOS

<TABLE BORDER="1" CELLSPACING="0" FRAME="vsides">
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE> UNO DOS

*RULES= "none / groups / rows / cols / all ". Complementa al atributo BORDER, y permite especificar qué bordes internos se veran.Sólo funciona en Internet Explorer.
- none - no se ven los bordes interiores.
- groups - muestra los bordes entre los grupos de tabla, especificados mediante las etiquetas <THEAD> <TBODY>, <TFOOT> y <COLGROUP>.
- rows - muedtra los bordes entre filas
- cols - muestra los ordes entre columnas.
- all - muestra todos los bordes interiores.
- basic -genera líneas divisorias entre THEAD, TFOOT y TBODY.

Ejemplos.- (Sólo para Explorer)

<TABLE BORDER="1" RULES="rows">
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE> UNO DOS
UNO DOS


<TABLE BORDER="1" RULES="cols">
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE> UNO DOS
UNO DOS



* HSPACE= "p ", donde p=nº entero=nº píxeles. Permite especificar el espacio horizontal que habra entre la tabla y el texto circundante.Permite añadir mas espacio a la derecha y a la izquierda de la tabla, entre el borde y el contexto.
* VSPACE= "p ", donde p=nº entero=nº píxeles. Permite especificar el espacio vertical que habra entre la tabla y el texto circundante. Permite añadir mas espacio arriba y abajo de la tabla, entre el borde y el contexto.
* SUMMARY="descripcion". Permite introducir un resumen, o un comentario para especificar el objeto y / o contenido de la tabla. No se muestra en el navegador.
* CHAR= " char ", donde char es un caracter de determinado por nosotros. Este atributo define el el caracter que queremos usar como referencia para alinear el texto de las celdas de la tabla, es decir, especifica el caracter sobre el que se alineara la celda. Solamente vale si en ALIGN se ha puesto el valor "char".
* CHAROFF="n". Asume un valor cuantitativo (en unidades o porcentaje) que especifica la compensación del caracter de alineación. Solamente vale si en ALIGN se ha puesto el valor "char.
* STYLE="atributo:valor;atributo:valor;". Especifica información de estilo sobre un simple elemento del documento. Este atributo y sus parametros vienen de las especificaciones del W3C sobre Cascading Style Sheet (Hojas de Estilo en Cascada), y con él se puede modificar completamente la presentación de la tabla y de su contenido. Alguno de sus atributos y valores sólo se ven en Internet Explorer.
<TABLE BORDER="1" ALIGN="center" STYLE="background-color:yellow;font-size:12pt; text-align:center;">
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE> UNO DOS
UNO DOS


* TITLE="titulo", para titular un documento o una sección del mismo. Algunos programas visores pueden colocar el valor de este atributo como texto insertado o audio.
* CLASS="clase". En la actualidad se utiliza según las especificaciones del W3C para establecer una clase de estilos a la tabla y su contenido. Para mas información consultar manuales de CSS.
* ID="nombre". Analogo al atributo CLASS, pero identifica la tabla como un objeto único, con sus atributos de estilo definidos en línea mediante el atributo STYLE, en la cabecera del documento HTML o en un archivo externo de extensión .css. Ver manuales de CSS.
* DIR="direccion". Se usa para indicar la dirección del texto y de las columnas. Asume los valores: ltr (de izquierda a derecha) y rtl (derecha a izquierda). Cuando el valor es rtl, el ordenamiento de las columnas comenzara por el tope arriba a la derecha.

Etiqueta <TR> y sus atributos.

<TR></TR>. Esta pareja de etiquetas es necesaria para especificar y delimitar cada una de las filas que va a tener la tabla, y entre ellas iran las parejas de etiquetas <td></td> y <th></th>, que veremos mas adelante.
Sus principales atributos son:
* BGCOLOR= " color", donde color puede venir en su nombre web en inglés o en su valor hexadecimal. al igual que con la etiquetas <TaBLE> y <TR>, este atributo va a establecer el color del fondo de cada celda, prevaleciendo este color sobre el que hayamos definido para la tabla en conjunto y para la fila en general.

Ejemplos.-
<TaBLE BORDER="0" BGCOLOR="#CCFF00">
<TR BGCOLOR="orange">
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TaBLE> UNO DOS
UNO DOS

* aLIGN = " left /center /right / justify / char ". Este atributo va a definir si el texto o la imagen que va a ir en cada celda de esa fila van a estar alineados a la izquierda, en el centro o a la derecha de cada celda. Su valor por defecto es LEFT, por lo que si no especificamos nada las celdas de la fila apareceran alineadas a la izquierda.

Ejemplo-
<TaBLE BORDER="1" WIDTH="200">
<TR aLIGN = "center ">
<TD WIDTH="100">UNO</TD>
<TD WIDTH="100">DOS</TD>
</TR>
<TR aLIGN = "right ">
<TD WIDTH="100">UNO</TD>
<TD WIDTH="100">DOS</TD>
</TR>
</TaBLE> UNO DOS
UNO DOS


* VaLIGN = " top / middle / baseline / bottom ". Nos permite alinear verticalmente el contenido de las celdas de la fila en la parte superior, en medio, a la altura del texto de la celda colindante o abajo respectivamente.

Ejemplo-
<TaBLE BORDER="1" WIDTH="200" HEIGHT="150">
<TR WIDTH="100" VaLIGN = "top ">
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
<TR WIDTH="200" VaLIGN = "bottom ">
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TaBLE> UNO DOS
UNO DOS


* SUMMaRY="descripcion". Permite introducir un resumen, o un comentario para especificar el objeto y / o contenido de la fila de la tabla. No se muestra en el navegador.
* CHaR= " char ", donde char es un caracter de determinado por nosotros. Este atributo define el el caracter que queremos usar como referencia para alinear el texto de las celdas de la fila, es decir, especifica el caracter sobre el que se alineara la celda. Solamente vale si en aLIGN se ha puesto el valor "char".
* CHaROFF="n". asume un valor cuantitativo (en unidades o porcentaje) que especifica la compensación del caracter de alineación. Solamente vale si en aLIGN se ha puesto el valor "char.
* STYLE="atributo:valor;atributo:valor;". Especifica información de estilo sobre las celdas de la fila. Este atributo y sus parametros vienen de las especificaciones del W3C sobre Cascading Style Sheet (Hojas de Estilo en Cascada), y con él se puede modificar completamente la presentación de la tabla y de su contenido. alguno de sus atributos y valores sólo se ven en Internet Explorer.
<TaBLE BORDER="1" aLIGN="center">
<TR STYLE="background-color:yellow;font-size:12pt; text-align:center;">
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TaBLE> UNO DOS
UNO DOS


* TITLE="titulo", para titular un documento o una sección del mismo. algunos programas visores pueden colocar el valor de este atributo como texto insertado o audio.
* CLaSS="clase". En la actualidad se utiliza según las especificaciones del W3C para establecer una clase de estilos a la fila y su contenido. Para mas información consultar manuales de CSS.
* ID="nombre". analogo al atributo CLaSS, pero identifica la fila como un objeto único, con sus atributos de estilo definidos en línea mediante el atributo STYLE, en la cabecera del documento HTML o en un archivo externo de extensión .css. Ver manuales de CSS.
* DIR="direccion". Se usa para indicar la dirección del texto y de las columnas. asume los valores: ltr (de izquierda a derecha) y rtl (derecha a izquierda). Cuando el valor es rtl, el ordenamiento de las columnas comenzara por el tope arriba a la derecha.


7 <THEaD> <TBODY> <TFOOT> . La etiqueta <THEaD> introduce la cabecera de la tabla. Después de la etiqueta puede situarse una fila o mas de la tabla pertenecientes a la cabecera de la tabla, cerrandose luego la misma con la etiqueta</THEaD>.

El cuerpo de la tabla se introduce con la etiqueta<TBODY>. Después de la etiqueta puede anotar el campo para los datos de la tabla, o sea su cuerpo. Con </TBODY> se cierra el cuerpo de la tabla.

El pie de la tabla lo introduce con la etiqueta <TFOOT>. Después de la etiqueta puede anotar una fila o mas pertenecientes al pie de la tabla. Con </TFOOT> cierra el pie de la tabla.

La utilidad de estas etiquetas es mas bien estructural que practica, ya que su misión es subdividir en el código la tabla en secciones, con lo que resulta mas claro en su lectura.< /P>

Etiquetas <TD> <TH> y sus atributos.

<TD></TD>, <TH></TH>. Con esta pareja de etiquetas definiremos y delimitaremos cada una de las celdas de las filas de la tabla. Las dos parejas de etiquetas son equivalentes, siendo su diferencia que mediante <TH></TH> definiremos encabezados de columna, por lo que el texto que figure en su interior aparecera en negrita y centrado.
Los principales atributos son:
* BGCOLOR= " color", donde color puede venir en su nombre web en inglés o en su valor hexadecimal. Al igual que con la etiquetas <TABLE> y <TR>, este atributo va a establecer el color del fondo de cada celda, prevaleciendo este color sobre el que hayamos definido para la tabla en conjunto y para la fila en general.

Ejemplos.-
<TABLE BORDER="0" BGCOLOR="blue">
<TR BGCOLOR="orange">
<TD BGCOLOR="#003366">UNO</TD>
<TD>DOS</TD>
</TR>
<TR>
<TD>UNO</TD>
<TD BGCOLOR="red">DOS</TD>
</TR>
</TABLE> UNO DOS
UNO DOS

* BACKGROUND= " ruta de imagen ", donde ruta de imagen puede ser la ruta relativa en el directorio de archivos del servidor o una URL de Internet dónde se encuentra la imagen. Este atributo es del todo analogo al de las etiquetas <TABLE>> y <TR>, tiene sus mismas limitaciones respecto a especificar una ruta URL y nos permite definir una imagen de fondo para toda una fila.
Hay que tener mucho cuidado, ya que la imagen utilizada debe ser del mismo tamaño que la fila de la tabla, ya que si no el efecto no sera el correcto.

Ejemplo-
<TABLE BORDER="1">
<TR>
<TD BACKGROUND= "fondo1.gif ">UNO</TD>
<TD>DOS</TD>
</TR>
<TR>
<TD>UNO</TD>
<TD BACKGROUND= "fondo1.gif ">DOS</TD>
</TR>
</TABLE> UNO DOS
UNO DOS

* ALIGN = " left /center /right / justify / char ". Este atributo va a definir si el texto o la imagen que va a ir en la celda va a estar alineados a la izquierda, en el centro o a la derecha de cada celda. Su valor por defecto es LEFT, por lo que si no especificamos nada el contenido de la celda aparecera alineado a la izquierda.

Ejemplo-
<TABLE BORDER="1" WIDTH="200">
<TR >
<TD WIDTH="100" ALIGN = "center ">UNO</TD>
<TD WIDTH="100">DOS</TD>
</TR>
<TR >
<TD WIDTH="100">UNO</TD>
<TD WIDTH="100" ALIGN = "right ">DOS</TD>
</TR>
</TABLE> UNO DOS
UNO DOS


* VALIGN = " top / middle / baseline / bottom ". Nos permite alinear verticalmente el contenido de la celda en la parte superior, en medio, que todas las celdas sean alineadas a una línea base común (o sea, de tal manera que el primer renglón de cada celda comienza a una misma altura) o abajo respectivamente. Su valor por defecto es MIDDLE, situando el contenido de la celda verticalmente en medio de la misma

Ejemplo-
<TABLE BORDER="1" WIDTH="200" HEIGHT="150">
<TR>
<TD VALIGN = "top">UNO</TD>
<TD>DOS</TD>
</TR>
<TR>
<TD>UNO</TD>
<TD VALIGN = "bottom">DOS</TD>
</TR>
</TABLE> UNO DOS
UNO DOS


* WIDTH= "n", donde n=nº de píxeles ó tanto por ciento. Con este atributo se especifica el ancho que va a tener cada celda. Si queremos que las celdas sean del mismo tamaño es necesario que especifiquemos el ancho en tanto por ciento, ya que si no es así, dependiendo del espacio que necesite el contenido de la celda, esta se ampliara por sí sola.
* HEIGHT= "n", donde n=nº de píxeles ó tanto por ciento. Con este atributo se especifica el alto que va a tener cada celda. Normalmente el alto de la celda se suele dejar que lo coja ella misma, adptandose a las necesidades del texto o imagen que contiene. La especificación HEIGHT, al contrario de la especificación WIDTH, no es estandar HTML, sin embargo es interpretada por los navegadores que interpretan tablas.

Ejemplos.-
<TABLE WIDTH="50%" ALIGN="right" BORDER="1">
<TR>
<TD WIDTH="50%">UNO</TD>
<TD WIDTH="50%">DOS</TD>
</TR>
</TABLE>
UNO DOS


<TABLE WIDTH="75%" HEIGHT="40" ALIGN="center" BORDER="3">
<TR>
<TD WIDTH="25%">UNO</TD>
<TD WIDTH="75%">DOS</TD>
</TR>
</TABLE>
UNO DOS


*ROWSPAN= "n". donde n = nº entero. Este atributo nos permite combinar varias celdas en una sola, de tal forma que esta ocupara todo el espacio reservado para las que contiene.
*COLSPAN= "n". donde n = nº entero. Este atributo nos permite combinar varias columnas en una sola, de tal forma que esta ocupara todo el espacio reservado para las que contiene.
Estos dos últimos atributos son de los mas útiles de los que disponemos para crear tablas, pero su uso entraña ciertas dificultades, que sólo se evitan con un buen conocimiento y practica.

Ejemplos.-
<TABLE WIDTH="50%" CELLPADDING="5" CELLSPACING="0" BORDER="1">
<TR>
<TD COLSPAN="3" ALIGN="center">CELDA ESPANDIDA</TD>
</TR>
<TR>
<TD WIDTH="33%">UNO</TD>
<TD WIDTH="33%">DOS</TD>
<TD WIDTH="33%">TRES</TD>
</TR>
<TR>
<TD WIDTH="33%">UNO</TD>
<TD WIDTH="33%">DOS</TD>
<TD WIDTH="33%">TRES</TD>
</TR>
</TABLE>

CELDA ESPANDIDA
UNO DOS TRES
UNO DOS TRES



<TABLE WIDTH="75%" CELLPADDING="2" CELLSPACING="0" BORDER="1">
<TR>
<TD ROWSPAN="3">CELDA ESPANDIDA</TD>
<TD WIDTH="33%">UNO</TD>
<TD WIDTH="33%">UNO</TD>
</TR>
<TR>
<TD WIDTH="33%">UNO</TD>
<TD WIDTH="33%">DOS</TD>
</TR>
<TR>
<TD WIDTH="33%">UNO</TD>
<TD WIDTH="33%">DOS</TD>
</TR>
</TABLE>


CELDA ESPANDIDA UNO DOS
UNO DOS
UNO DOS

*NOWRAP. Este atributo evita que el texto de un parrafo contenido en la celda dé un salto de línea automatico cuando se llaga al límite derecho de la celda. Como conclusión, si se utiliza este atributo, cuando se llega al final de ancho especificado por WIDTH, la celda seguira abriéndose mas y mas, para dar cabida al texto que la contiene. Si no se utiliza NOWRAP, al llegar el texto al límite derecho de la celda se produce un salto de línea. Como observación, no siempre implementan muy bien este atributo los navegadores, comportandose a veces la tabla de una forma inesperada.

Ejemplo-
<TABLE WIDTH="30%" BORDER="1">
<TR>
<TD WIDTH="50%">SUPERCALIFRAGILISTICO<</TD>
<TD WIDTH="50%">DOS</TD>
</TR>
</TABLE>

SUPERCALIFRAGILIS
TICO DOS

<TABLE WIDTH="30%" BORDER="1" NOWRAP>
<TR>
<TD WIDTH="50%">SUPERCALIFRAGILISTICO<</TD>
<TD WIDTH="50%">DOS</TD>
</TR>
</TABLE>

SUPERCALIFRAGILISTICO DOS

* SUMMARY="descripcion". Permite introducir un resumen, o un comentario para especificar el objeto y / o contenido de la celda. No se muestra en el navegador.
* CHAR= " char ", donde char es un caracter de determinado por nosotros. Este atributo define el el caracter que queremos usar como referencia para alinear el texto de la celdas, es decir, especifica el caracter sobre el que se alineara la celda. Solamente vale si en ALIGN se ha puesto el valor "char".
* CHAROFF="n". Asume un valor cuantitativo (en unidades o porcentaje) que especifica la compensación del caracter de alineación. Con este atributo se puede especificar en que posición el símbolo debe aparecer por primera vez. Solamente vale si en ALIGN se ha puesto el valor "char.

NOTA: Ni Netscape niInternet Explorer interpretan esta especificación de alineación por símbolos en la versión 4.x de sus productos.


* STYLE="atributo:valor;atributo:valor; ...". Especifica información de estilo sobre la celda de la tabla. Este atributo y sus parametros vienen de las especificaciones del W3C sobre Cascading Style Sheet (Hojas de Estilo en Cascada), y con él se puede modificar completamente la presentación de la tabla y de su contenido. Alguno de sus atributos y valores sólo se ven en Internet Explorer.
<TABLE BORDER="1" ALIGN="center">
<TR>
<TD STYLE="background-color:yellow;font-size:12pt; text-align:center;">UNO</TD>
<TD>DOS</TD>
</TR>
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE> UNO DOS
UNO DOS


* TITLE="titulo", para titular un documento o una sección del mismo. Algunos programas visores pueden colocar el valor de este atributo como texto insertado o audio.
* CLASS="clase". En la actualidad se utiliza según las especificaciones del W3C para establecer una clase de estilos a la celda y su contenido. Para mas información consultar manuales de CSS.
* ID="nombre". Analogo al atributo CLASS, pero identifica la celda como un objeto único, con sus atributos de estilo definidos en línea mediante el atributo STYLE, en la cabecera del documento HTML o en un archivo externo de extensión .css. Ver manuales de CSS.
* DIR="direccion". Se usa para indicar la dirección del texto y de las columnas. Asume los valores: ltr (de izquierda a derecha) y rtl (derecha a izquierda). Cuando el valor es rtl, el ordenamiento de las columnas comenzara por el tope arriba a la derecha.

Mas etiquetas de tabla

<CAPTION></CAPTION>. Esta pareja de etiquetas permite asociar un titular a la tabla. Sólo admite el atibuto ALIGN, que puede tomar los valores TOP ,LEFT, RIGTH y BOTTOM, que situaran el títular arriba centrado (titulo de tabla),arriba a la izquierda, arriba a la derecha o abajo centrado (pie de tabla). El valor por defecto es TOP.

Ejemplos.-
<table width="150" cellpadding="2" border="1">
<caption align="bottom">Mi tabla</caption>
<tr>
<td>UNO</td>
<td>DOS</td>
</tr>
</table>
Mi tabla UNO DOS

<TABLE WIDTH="150" CELLPADDING="2" BORDER="1">
<CAPTION ALIGN="right">Mi tabla</CAPTION>
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>
Mi tabla UNO DOS

7 <COLGROUP>...</COLGROUP>. Se utilizan para comunicarle al navegador al principio de la tabla cuantas columnas tiene la misma, para que así pueda cargar la tabla mucho mas rapido, o sea que una parte de la tabla sea visualizada antes de que la totalidad de la tabla haya sido leída. Sin embargo navegadores antiguos (Netscape 3.x, MS Internet Explorer 3.x) no interpretan tales especificaciones. La etiqueta </COLGROUP> es opcional, pero se recomienda colocarla siempre, al igual que ocurre con las demas etiquetas, por claridad de código.

Ejemplo.-
<table border>
<colgroup>
<col width="80" bgcolor="red">
<col width="100" bgcolor="yellow">
<col width="220" bgcolor="blue">
</colgroup>
<tr>
<td>primer renglón, primera columna</td>
<td>primer renglón, segunda columna</td>
<td>primer renglón, tercera columna</td>
</tr>
</table>
primer renglón, primera columna primer renglón, segunda columna primer renglón, tercera columna

Si no se añaden las etiquetas <COL> con su anchura dada por WIDTH=" x ", entonces las anchura de cada columna sera la necesaria para contener lo que situemos en el interior de la celda mas ancha de ella.
Si queremos obtener una tabla con columnas de igual anchura deberemos añadir a la etiqueta <COLGROUP> los atributos SPAN="n" y WIDTH="x", con lo que obtendremos n columnas de x pixels cada una.

Ejemplo.-
<table border>
<colgroup span="3" width="200">
</colgroup>
<tr>
<td>primer renglón, primera columna</td>
<td>primer renglón, segunda columna</td>
<td>primer renglón, tercera columna</td>
</tr>
</table>
primer renglón, primera columna primer renglón, segunda columna primer renglón, tercera columna

Para especificar el ancho de las celdas mediante el atributo WIDTH disponemos de 3 opciones:

1) mediante un número, con lo que la anchura sera absoluta y vendra dada en píxeles.
2) mediante un tanto por ciento, con lo que la anchura sera relativa, viniendo determinado el ancho de cada columna por su % en relación al ancho total de la tabla.
3) mediante una relación de anchura relativa de las columnas entre sí, independientemente de la anchura de la tabla en relación con la ventana de visualización, dando al atributo de anchura un valor del tipo WIDTH="n*". La estrella es tan sólo una señal para el navegador, para que no interprete el número anterior como píxel. Este procedimiento debería funcionar bien, pero sólo lo hace en ocasiones.
También la etiqueta <col> puede contener el atributo span=. De tal forma no agrupa varias columnas en una, sino que los atributos de esa columna son validos para las próximas columnas dadas. Por ejemplo si añade <col span="3" width="100">, entonces esa y las siguientes 2 columnas obtienen una anchura de 100 píxeles.
La etiqueta <colgroup> puede contener ademas los atributos span= y width= ,si debajo de ella, son definidas etiquetas <col>. En tal caso la cantidad de etiquetas <col> definidas reemplaza las especificacionesque han sido hechas con la etiqueta <colgroup span= > y el atributo width= dentro de la etiqueta <col> tiene primacía sobre el atributo width= en la etiqueta<colgroup>.
También es permitido anotar varias etiquetas<colgroup>. Anotando por ejemplo dos comandos como <colgroup width=100 span=3> y <colgroup width="50" span="5"> uno tras del otro, puede definir 8 columnas de una tabla, en la cual las primeras 3 columnas tienen una anchura de 100 píxeles y las siguientes 5 una anchura de 50 píxeles.

Como atributos de la etiqueta col podemos usar:

* width="unidad", que determina el ancho de la columna.

* bgcolor="color", que fija el color de fondo de todas las celdas de la columna.

align="right / left / center", que determina la alineación de todas las celdas de lacolumna.

valign="top / middle / bottom", que determina la alineación vertical de las celdas de la columna.

Tablas anidadas

Las tablas se pueden anidar unas con otras, es decir, podemos situar una tabla o tablas dentro de otra, para conseguir un efecto complejo de maquetación.
La forma de operar es teoricamente sencilla: basta con introducir una tabla con toda su estructura dentro de una celda de la tabla madre. Ahora bien, en la practica en un proceso un tanto lioso, por lo que es recomendable efectuar este proceso mediante un editor web de tipo visual, como Dreamweaver, Homesite o FrontPage, y luego limpiar el código que originan.
Un factor a tener en cuenta es, si no deseamos lo contrario, tener especial cuidado en fijar los atributos de BORDER, CELLSPACING Y CELLPADDING de la tabla hija a cero, para no producir efectos indeseados.
Se pueden anidar cuantas tablas queramos, pero es recomendable practicar antes, pues obtenemos un código denso y complicado, que puede marearnos bastante.

Ejemplo-
<TABLE WIDTH="200" BORDER="1">
<TR ALIGN="center">
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
<TR>
<TD>TRES</TD>
<TD>
<TABLE WIDTH=100%>
<TR>
<TD>HIJO 1</TD>
<TD>HIJO 2</TD>
</TR>
<TR>
<TD>HIJO 3</TD>
<TD>HIJO 4</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
UNO DOS
TRES HIJO 1 HIJO 2
HIJO 3 HIJO 4




A veces el uso de tablas anidadas es la única solución de que disponemos para conseguir esa pagina que deseamos, pero casi siempre hay una alternativa al uso de esta técnica, siendo casi siempre posible construir la pagina que deseamos mediante una única tabla. Las ventajas que obtenemos con una tabla única son muchas: mejor control sobre el contenido de la misma, mayor velocidad de carga de la pagina, etc. Este factor de la velocidad de carga es debido a que el navegador debe leer e interpretar todo el contenido de una tabla antes de mostrarla, por lo que con tablas anidadas se produce un efecto acumulativo que va retardando progresivamente la carga y presentación de la tabla completa.

Si decidimos usar tablas anidadas y en un momento dado estamos confundidos sobre dónde acaba una tabla padre y dónde empieza una tabla hijo, es recomendable asignar temporalmente un borde unidad a cada tabla sucesivamente, con lo que podremos apreciar el espacio y distribución real de cada una de ellas en nuestra pagina.

Uso de las tablas (I)

7 MAQUETACION.

Una de las principales aplicaciones de las tablas va a ser permitirnos maquetar y distribuir adecuadamente el contenido de nuestras paginas web, de una forma analoga a como se maquetan los periodicos. Esa forma de operar sólo se podía conseguir con tablas hasta la entrada en vigor de las Hojas de Estilo en Cascada, CSS, y mas concretamente de CSS-Positioning.
De esta forma, si queremos distribuir el contenido de una pagina en columnas tendremos que crear un tabla que tenga tantas celdas en una fila como columnas deseemos en nuestra pagina, y en cada una de las celdas colocaremos el contenido de cada columna. Eso sí, deberemos tener especial cuidado en no sobrepasar con el contenido en alto de cada celda en la pagina, ya que si no es así se nos descolocara todo, al intentar adaptarse la celda a su contenido. Por esto, es conveniente siempre establecer una alineación vertical a las celdas, para evitar descompensaciones, mediante el atributo VALIGN="top". Introduciremos por ahora un valor CELLPADDING="8", para que no se nos junten los bloques de texto.
Conviene comenzar asignando un borde de 1 píxel a la tabla, para referenciarnos bien, y cuando hayamos finalizado le quitamos el borde. Esto es lo que se llama una "tabla oculta".

Ejemplo,-
<TABLE WIDTH="100%" BORDER="0" CELLPADDING="8">
<TR VALIGN="top">
<TD WIDTH="33%">Este es el contenido de la primera columna de nuestra maravillosa pagina web...</TD>
<TD WIDTH="33%">Seguimos con el contenido de la segunda columna, para que nos quede un acabado profesional....</TD>
<TD WIDTH="33%">Y acabamos con todo lo que queramos poner en la última columna. ?A que ha quedado todo muy bonito?.</TD>
</TR>
</TABLE>
Este es el contenido de la primera columna de nuestra maravillosa pagina web... Seguimos con el contenido de la segunda columna, par que nos quede un acabado profesional.... Y acabamos con todo lo que queramos poner en la última columna. ?A que ha quedado todo muy bonito?.


? Y si queremos que entre las columnas haya una línea vertical de color?.

Bueno, podríamos pensa que mediante el atributo BORDERCOLOR Podríamos lograr algo parecido, pero esta no es la solución adecuada, ya que los atributos de borde de color sólo los posee Internet Explorer, y si los quisieramos de color gris, asequibles para ambos navegadores, se nos pintarían todos los bordes, con lo que no conseguiríamos el efecto deseado.
La solución correcta pasa por introducir celdas que contengan una imagen en formato gif, del color que deseemos, que tenga un ancho igual al que nosotros deseemos para la línea de separación y un ancho igual al alto de la celda. El inconveniente de este método es que según la resolución de pantalla y del navegador usado, la línea puede aparecer un poco mas alta o un poco mas baja.

Otra posible solución sería mediante el atributo BGCOLOR, situando una celda de ancho 1 ó 2 píxeles entre cada celda de texto, y dandole un color de fondo, pero en este caso deberemos introducir un gif de 1x1 píxeles, de color transparente, en cada una de estas celdas. El motivo de esto se explica mas abajo.

Ejemplo,- Creamos una imagen "linea.gif", de 10px de alto y 1px de ancho. Luego le daremos el alto que nos convenga...

<TABLE WIDTH="100%" BORDER="0" CELLPADDING="8">
<TR VALIGN="top">
<TD><IMG SRC="images /linea.gif" WIDTH="1" HEIGHT="70" BORDER="0"></TD>
<TD WIDTH="33%">Este es el contenido de la primera columna de nuestra maravillosa pagina web...</TD>
<TD><IMG SRC="images /linea.gif" WIDTH="1" HEIGHT="70" BORDER="0"></TD>
<TD WIDTH="33%">Seguimos con el contenido de la segunda columna, para que nos quede un acabado profesional....</TD>
<TD><IMG SRC="images /linea.gif" WIDTH="1" HEIGHT="70" BORDER="0"></TD>
<TD WIDTH="33%">Y acabamos con todo lo que queramos poner en la última columna. ?A que ha quedado todo muy bonito?.</TD>
<TD><IMG SRC="images /linea.gif" WIDTH="1" HEIGHT="70" BORDER="0"></TD>
</TR>
</TABLE>
Este es el contenido de la primera columna de nuestra maravillosa pagina web... Seguimos con el contenido de la segunda columna, par que nos quede un acabado profesional.... Y acabamos con todo lo que queramos poner en la última columna. ?A que ha quedado todo muy bonito?.


Hemos visto arriba que al introducir un valor CELLPADDING= "8"para separar las celdas el resultado obtenido no es el deseado. Si queremos dejar espacio entre las columnas deberemos olvidarnos de los atributos CELLSPACING o CELLPADDING, ya que el resultado no sera el deseado, pues las celdas se nos abriran por todos lados.

La solución pasa por dejar una columna (celda) de ancho la separación que deseemos entre cada columna de texto. Pero si situamos celdas vacias no siempre nos cogeran el ancho que deseemos, ya que entonces los navegadores no reconocen con exactitud el atributo WIDTH. Para solucionar esto, situaremos dentro de las celdas de separación un espacio ( ) o un gif transparente o del color del fondo de 1x1 píxeles. El código y su resultado seran:


<TABLE WIDTH="90%" BORDER="0" CELLPADDING="8">
<TR VALIGN="top">
<TD WIDTH="32%">Este es el contenido de la primera columna de nuestra maravillosa pagina web...</TD>
<TD WIDTH="20"> </TD>
<TD WIDTH="32%">Seguimos con el contenido de la segunda columna, para que nos quede un acabado profesional....</TD>
<TD WIDTH="20"> </TD>
<TD WIDTH="32%">Y acabamos con todo lo que queramos poner en la última columna. ?A que ha quedado todo muy bonito?.</TD>
</TR>
</TABLE>
Este es el contenido de la primera columna de nuestra maravillosa pagina web... Seguimos con el contenido de la segunda columna, par que nos quede un acabado profesional.... Y acabamos con todo lo que queramos poner en la última columna. ?A que ha quedado todo muy bonito?.


Otra cuestión que podemos resolver con tablas es cuando queremos una distribución de pagina tal que tenga unas cabeceras digamos a 5 píxeles del extremo izquierdo y luego una serie de celdas abajo cuyo contenido se situe mas a la izquierda, digamos a 20 píxeles. Para conseguir esto introduciremos una imagen en unas celdas de separación. En el siguiente ejemplo vamos a introducir una imagen de 1x1 píxeles, de color rojo para que la podais ver, aunque en un caso real la pondríamos transparente, para que no se apreciara, con lo que el efecto conseguido sería el correcto.

El código necesario para lograr esto sera del tipo:
<TABLE CELLSPACING="0" CELLPADDING="5" BORDER="0">
<TR>
<TD COLSPAN="2">Cabecera</TD>
</TR>
<TR>
<TD WIDTH="5"><IMG SRC="images/punto.gif" WIDTH="1" HEIGHT="1" BORDER="0"></TD>
<TD>Texto 1º</TD>
</TR>
<TR>
<TD WIDTH="5"><IMG SRC="images/punto.gif" WIDTH="1" HEIGHT="1" BORDER="0"></TD>
<TD>Texto 2º</TD>
</TR>
<TR>
<TD WIDTH="5"><IMG SRC="images/punto.gif" WIDTH="1" HEIGHT="1" BORDER="0"></TD>
<TD>Texto 3º</TD>
</TR>
</TABLE>

Esquema Cabecera
Texto 1º
Texto 2º
Texto 3º
Resultado Cabecera
Texto 1º
Texto 2º
Texto 3º



Notas:
La imagen "punto.gif" debe ser transparente o del mismo color del fondo, y en este caso debe ser de un color de paleta web. Recordemos que Nestcape posee por defecto una paleta con 256 colores únicamente. Si el color no pertenece a esta paleta, el punto se vera de otro color que el fondo, estropeando el efecto que buscamos.
El atributo de tabla CELLPADDING debe tener el valor que deseemos que tenga de separación la cabecera del margen izquierdo.
Por lo tanto, el ancho de las celdas de la imagen debe ser= 20(que queríamos)-(5+5) que nos da el CELLPADDING en la celda de imagen-5 que nos da el CELLPADDING en las celdas de los textos. Resumiendo, con un poco de entrenamiento obtendremos el resultado deseado siguiendo este método.

* Si queremos una disposición de pagina en la que haya columnas con bloques de texto separados por una línea horizontal entre ellos, podemos hacer dos cosas:
Establecer celdas horizontales que contengan una imagen de 1 píxel de alto y de ancho igual al de la celda.
Establecer bloques verticales de texto, introduciendo al final de cada uno un salto de línea y una imagen como la del apartado anterior.
Ejemplo-
<TABLE WIDTH="100%" CELLPADDING="8" BORDER="0">
<TR VALIGN="top">
<TD WIDTH="30%">Este es el contenido de la primera columna de nuestra maravillosa pagina web...
<BR>
<IMG SRC="images/puntorojo.gif" WIDTH="200" HEIGHT="1" BORDER="0">
<BR>
y ahora continuamos con e texto que queramos...
</TD>
<TD WIDTH="30%">Seguimos con el contenido de la segunda columna, para que nos quede un acabado profesional....
<BR>
<IMG SRC="images/puntorojo.gif" WIDTH="200" HEIGHT="1" BORDER="0">
<BR>
y ahora continuamos con el texto de la segunda...
</TD>
<TD WIDTH="30%">Y acabamos con todo lo que queramos poner en la última columna.
<BR>
<IMG SRC="images/puntorojo.gif" WIDTH="200" HEIGHT="1" BORDER="0">
<BR>
?A que ha quedado todo muy bonito?.
</TD>
</TR>
</TABLE>
Este es el contenido de la primera columna de nuestra maravillosa pagina web.
Y ahora continúa la primera columna... Seguimos con el contenido de la segunda columna, para que nos quede un buen acabado.
Y continúa la segunda... Y acabamos con todo lo que queramos poner en la última columna.
Pués si te gusta...! A practicar!

Si no queremos usar una imagen podemos situar una línea horizontal mediante la etiqueta <HR>, pero entonces sólo podremos darle color para Internet Explorer, usando hojas de estilo, pero en Nestcape se vera siempre del color grís estandar.

Uso de las tablas (I)

7 MAQUETACION.

Una de las principales aplicaciones de las tablas va a ser permitirnos maquetar y distribuir adecuadamente el contenido de nuestras paginas web, de una forma analoga a como se maquetan los periodicos. Esa forma de operar sólo se podía conseguir con tablas hasta la entrada en vigor de las Hojas de Estilo en Cascada, CSS, y mas concretamente de CSS-Positioning.
De esta forma, si queremos distribuir el contenido de una pagina en columnas tendremos que crear un tabla que tenga tantas celdas en una fila como columnas deseemos en nuestra pagina, y en cada una de las celdas colocaremos el contenido de cada columna. Eso sí, deberemos tener especial cuidado en no sobrepasar con el contenido en alto de cada celda en la pagina, ya que si no es así se nos descolocara todo, al intentar adaptarse la celda a su contenido. Por esto, es conveniente siempre establecer una alineación vertical a las celdas, para evitar descompensaciones, mediante el atributo VALIGN="top". Introduciremos por ahora un valor CELLPADDING="8", para que no se nos junten los bloques de texto.
Conviene comenzar asignando un borde de 1 píxel a la tabla, para referenciarnos bien, y cuando hayamos finalizado le quitamos el borde. Esto es lo que se llama una "tabla oculta".

Ejemplo,-
<TABLE WIDTH="100%" BORDER="0" CELLPADDING="8">
<TR VALIGN="top">
<TD WIDTH="33%">Este es el contenido de la primera columna de nuestra maravillosa pagina web...</TD>
<TD WIDTH="33%">Seguimos con el contenido de la segunda columna, para que nos quede un acabado profesional....</TD>
<TD WIDTH="33%">Y acabamos con todo lo que queramos poner en la última columna. ?A que ha quedado todo muy bonito?.</TD>
</TR>
</TABLE>
Este es el contenido de la primera columna de nuestra maravillosa pagina web... Seguimos con el contenido de la segunda columna, par que nos quede un acabado profesional.... Y acabamos con todo lo que queramos poner en la última columna. ?A que ha quedado todo muy bonito?.


? Y si queremos que entre las columnas haya una línea vertical de color?.

Bueno, podríamos pensa que mediante el atributo BORDERCOLOR Podríamos lograr algo parecido, pero esta no es la solución adecuada, ya que los atributos de borde de color sólo los posee Internet Explorer, y si los quisieramos de color gris, asequibles para ambos navegadores, se nos pintarían todos los bordes, con lo que no conseguiríamos el efecto deseado.
La solución correcta pasa por introducir celdas que contengan una imagen en formato gif, del color que deseemos, que tenga un ancho igual al que nosotros deseemos para la línea de separación y un ancho igual al alto de la celda. El inconveniente de este método es que según la resolución de pantalla y del navegador usado, la línea puede aparecer un poco mas alta o un poco mas baja.

Otra posible solución sería mediante el atributo BGCOLOR, situando una celda de ancho 1 ó 2 píxeles entre cada celda de texto, y dandole un color de fondo, pero en este caso deberemos introducir un gif de 1x1 píxeles, de color transparente, en cada una de estas celdas. El motivo de esto se explica mas abajo.

Ejemplo,- Creamos una imagen "linea.gif", de 10px de alto y 1px de ancho. Luego le daremos el alto que nos convenga...

<TABLE WIDTH="100%" BORDER="0" CELLPADDING="8">
<TR VALIGN="top">
<TD><IMG SRC="images /linea.gif" WIDTH="1" HEIGHT="70" BORDER="0"></TD>
<TD WIDTH="33%">Este es el contenido de la primera columna de nuestra maravillosa pagina web...</TD>
<TD><IMG SRC="images /linea.gif" WIDTH="1" HEIGHT="70" BORDER="0"></TD>
<TD WIDTH="33%">Seguimos con el contenido de la segunda columna, para que nos quede un acabado profesional....</TD>
<TD><IMG SRC="images /linea.gif" WIDTH="1" HEIGHT="70" BORDER="0"></TD>
<TD WIDTH="33%">Y acabamos con todo lo que queramos poner en la última columna. ?A que ha quedado todo muy bonito?.</TD>
<TD><IMG SRC="images /linea.gif" WIDTH="1" HEIGHT="70" BORDER="0"></TD>
</TR>
</TABLE>
Este es el contenido de la primera columna de nuestra maravillosa pagina web... Seguimos con el contenido de la segunda columna, par que nos quede un acabado profesional.... Y acabamos con todo lo que queramos poner en la última columna. ?A que ha quedado todo muy bonito?.


Hemos visto arriba que al introducir un valor CELLPADDING= "8"para separar las celdas el resultado obtenido no es el deseado. Si queremos dejar espacio entre las columnas deberemos olvidarnos de los atributos CELLSPACING o CELLPADDING, ya que el resultado no sera el deseado, pues las celdas se nos abriran por todos lados.

La solución pasa por dejar una columna (celda) de ancho la separación que deseemos entre cada columna de texto. Pero si situamos celdas vacias no siempre nos cogeran el ancho que deseemos, ya que entonces los navegadores no reconocen con exactitud el atributo WIDTH. Para solucionar esto, situaremos dentro de las celdas de separación un espacio ( ) o un gif transparente o del color del fondo de 1x1 píxeles. El código y su resultado seran:


<TABLE WIDTH="90%" BORDER="0" CELLPADDING="8">
<TR VALIGN="top">
<TD WIDTH="32%">Este es el contenido de la primera columna de nuestra maravillosa pagina web...</TD>
<TD WIDTH="20">&nbsp;</TD>
<TD WIDTH="32%">Seguimos con el contenido de la segunda columna, para que nos quede un acabado profesional....</TD>
<TD WIDTH="20">&nbsp;</TD>
<TD WIDTH="32%">Y acabamos con todo lo que queramos poner en la última columna. ?A que ha quedado todo muy bonito?.</TD>
</TR>
</TABLE>
Este es el contenido de la primera columna de nuestra maravillosa pagina web... Seguimos con el contenido de la segunda columna, par que nos quede un acabado profesional.... Y acabamos con todo lo que queramos poner en la última columna. ?A que ha quedado todo muy bonito?.


Otra cuestión que podemos resolver con tablas es cuando queremos una distribución de pagina tal que tenga unas cabeceras digamos a 5 píxeles del extremo izquierdo y luego una serie de celdas abajo cuyo contenido se situe mas a la izquierda, digamos a 20 píxeles. Para conseguir esto introduciremos una imagen en unas celdas de separación. En el siguiente ejemplo vamos a introducir una imagen de 1x1 píxeles, de color rojo para que la podais ver, aunque en un caso real la pondríamos transparente, para que no se apreciara, con lo que el efecto conseguido sería el correcto.

El código necesario para lograr esto sera del tipo:
<TABLE CELLSPACING="0" CELLPADDING="5" BORDER="0">
<TR>
<TD COLSPAN="2">Cabecera</TD>
</TR>
<TR>
<TD WIDTH="5"><IMG SRC="images/punto.gif" WIDTH="1" HEIGHT="1" BORDER="0"></TD>
<TD>Texto 1º</TD>
</TR>
<TR>
<TD WIDTH="5"><IMG SRC="images/punto.gif" WIDTH="1" HEIGHT="1" BORDER="0"></TD>
<TD>Texto 2º</TD>
</TR>
<TR>
<TD WIDTH="5"><IMG SRC="images/punto.gif" WIDTH="1" HEIGHT="1" BORDER="0"></TD>
<TD>Texto 3º</TD>
</TR>
</TABLE>

Esquema Cabecera
Texto 1º
Texto 2º
Texto 3º
Resultado Cabecera
Texto 1º
Texto 2º
Texto 3º



Notas:
La imagen "punto.gif" debe ser transparente o del mismo color del fondo, y en este caso debe ser de un color de paleta web. Recordemos que Nestcape posee por defecto una paleta con 256 colores únicamente. Si el color no pertenece a esta paleta, el punto se vera de otro color que el fondo, estropeando el efecto que buscamos.
El atributo de tabla CELLPADDING debe tener el valor que deseemos que tenga de separación la cabecera del margen izquierdo.
Por lo tanto, el ancho de las celdas de la imagen debe ser= 20(que queríamos)-(5+5) que nos da el CELLPADDING en la celda de imagen-5 que nos da el CELLPADDING en las celdas de los textos. Resumiendo, con un poco de entrenamiento obtendremos el resultado deseado siguiendo este método.

* Si queremos una disposición de pagina en la que haya columnas con bloques de texto separados por una línea horizontal entre ellos, podemos hacer dos cosas:
Establecer celdas horizontales que contengan una imagen de 1 píxel de alto y de ancho igual al de la celda.
Establecer bloques verticales de texto, introduciendo al final de cada uno un salto de línea y una imagen como la del apartado anterior.
Ejemplo-
<TABLE WIDTH="100%" CELLPADDING="8" BORDER="0">
<TR VALIGN="top">
<TD WIDTH="30%">Este es el contenido de la primera columna de nuestra maravillosa pagina web...
<BR>
<IMG SRC="images/puntorojo.gif" WIDTH="200" HEIGHT="1" BORDER="0">
<BR>
y ahora continuamos con e texto que queramos...
</TD>
<TD WIDTH="30%">Seguimos con el contenido de la segunda columna, para que nos quede un acabado profesional....
<BR>
<IMG SRC="images/puntorojo.gif" WIDTH="200" HEIGHT="1" BORDER="0">
<BR>
y ahora continuamos con el texto de la segunda...
</TD>
<TD WIDTH="30%">Y acabamos con todo lo que queramos poner en la última columna.
<BR>
<IMG SRC="images/puntorojo.gif" WIDTH="200" HEIGHT="1" BORDER="0">
<BR>
?A que ha quedado todo muy bonito?.
</TD>
</TR>
</TABLE>
Este es el contenido de la primera columna de nuestra maravillosa pagina web.
Y ahora continúa la primera columna... Seguimos con el contenido de la segunda columna, para que nos quede un buen acabado.
Y continúa la segunda... Y acabamos con todo lo que queramos poner en la última columna.
Pués si te gusta...! A practicar!

Si no queremos usar una imagen podemos situar una línea horizontal mediante la etiqueta <HR>, pero entonces sólo podremos darle color para Internet Explorer, usando hojas de estilo, pero en Nestcape se vera siempre del color grís estandar.

Uso de las tablas (II)

7 RECUADROS CON BORDE.

Otro uso de las tablas es cuando queremos obtener una cuadrado enmarcado por un borde de color. Este efecto no se puede conseguir adecuadamente con los atributos de borde de tabla ni con los de color de fondo; ni siquiera aplicando "capas" (<DIV> o <SPAN&gt con bordes, ya que Nestcape no admite bien estas propiedades. Para conseguirlo, deberemos crear una tabla que tenga una celda superior, una inferior y dos laterales, con una imagen de 1 píxel del color que queramos, quedando una celda en el interior para colocar el contenido de celda deseado. Y esto lo logramos mediante los atributos COLSPAN y ROWSPAN.
La idea es crear una tabla de 3 filas x 6 columnas, y luego espandir celdas o columnas para quedarnos con una única celda interior enmarcada. Deberemos establecer CELLPADDING="0" y CELLSPACING="0", para que no se nos abran las celdas de borde.
Ejemplo.-
Esquema de la tabla (observa que he introducido una imagen de 1 píxel para que las celdas cogan su tamaño adecuado. Esta imagen esta en todas las celdas, al no tener estas ningún contenido en el esquema):







El código HTML correspondiente es:

<TABLE WIDTH="380" HEIGHT="50" CELLSPACING="0" CELLPADDING="0" BORDER="0"
BGCOLOR="#6a7da5" ALIGN="center">
<TR>
<TD ROWSPAN="3" WIDDTH="1" HEIGHT="50">
<IMG SRC="images/puntorojo.gif" WIDTH="380" HEIGHT="1" BORDER="0" ALT="">
</TD>
<TD COLSPAN="4" HEIGHT="1">
<IMG SRC="images/puntorojo.gif" WIDTH="380" HEIGHT="1" BORDER="0" ALT="">
</TD>
<TD ROWSPAN="3" WIDDTH="1" HEIGHT="50">
<IMG SRC="images/puntorojo.gif" WIDTH="380" HEIGHT="1" BORDER="0" ALT="">
</TD>
</TR>
<TR>
<TD COLSPAN="4" ALIGN="center" HEIGHT"48">
<FONT COLOR="white"><B>Texto de tabla</B></FONT> </TD>
</TR>
<TR>
<TD COLSPAN="4" HEIGHT="1">
<IMG SRC="images/puntorojo.gif" WIDTH="380" HEIGHT="1" BORDER="0" ALT="">
</TD>
</TR>
</TABLE>



Y el resultado obtenido:



Texto de tabla



Hay que observar:

El alto de la tabla nos lo va a determinar al atributo HEIGHT de las imagenes laterales.
El ancho de la tabla lo fijamos en píxeles en el atributo WIDTH de <TABLE> y le damos el mismo ancho a las imagenes de las celdas superior e inferior.
A la celda expandida central le damos un ancho de 2 píxeles menos que a la tabla en general, para descontar los dos píxeles que suman las dos imagenes laterales.
Hay que fijar bordes de tabla y espacios entre celdas y celdas y contenido en cero píxeles.
Si damos color de fondo a la celda central, obtendremos un bonito resultado.

Uso de las tablas (III)

7 SEGMENTACIÓN DE IMaGENES.

Otro uso de las tablas es la división de imagenes de gran tamaño o peso en una serie de partes, que luego podremos ir colocando en celdas de una tabla, de forma que la suma de todas las piezas nos muestre la imagen total.
Esto es muy útil cuando tenemos imagenes que por su tamaño o peso van a tardar mucho en descargarse del servidor, lo que puede originar que nuestro visitante se canse de esperar y nos deje. Una solución alternativa a este problema es el uso de imagenes con interlazado o descarga progresiva.
También es útil este método cuando queremos crear un gif animado con una imagen de gran tamaño en la que sólo una/unas partes van a tener animación. Podemos entonces establecer unas partes fijas para la imagen y otras con animación, con lo que el tiempo de carga sera mucho menor.
Asímismo, podemos crear una especie de mapa de imagen, en la que cada pieza de la imagen enlazara con una pagina diferente.

Para conseguir todas estas opciones, los pasos a seguir son:
hacernos un esquema de división de la imagen y otro de la tabla que deberemos crear para esa forma de división, procurando que sean compatibles.
cargar la imagen en un programa grafico, procediendo a su división, teniendo muy en cuenta el tamaño en píxeles que tiene cada una de ellas, para poder construir luego la tabla a su medida.
por último, construir la tabla que va a contener las pieza, teniendo en cuenta que la tabla debe tener como atributos BORDER="0", CELLSPACING="0" y CELLPADDING="0", para que las pieza encajen con exactitud.

Ejemplo.- Supongamos que queremos "partir" la siguiente imagen:

para lo que usamos el esquema:




Cargamos la imagen en un programa grafico (PhotoShop, Corel Draw, Adobe Ilustrator, etc.) y la dividimos en las 4 partes del esquema, teniendo especial cuidado en anotar sus dimensiones, para dimensionar luego la tabla adecuadamente.
Una vez hecho obtenemos las siguientes piezas.





Ahora construimos el código HTML de la tabla, que tendra 2 filas y 3 columnas, y en la que vamos a expandir varias celdas, de acuerdo con nuestras necesidades:

<TABLE WIDTH="175" height="250" BORDER="0" CELLPADDING="0" CELLPADDING="0" ALIGN="center">
<TR>
<TD ROWSPAN="2" WIDTH="59" HEIGHT="250" VALIGN="top">
<img src="images/pieza_1.jpg" width="59" height="250" border="0" alt="pieza 1">
</TD>
<TD COLSPAN="2" WIDTH="116" HEIGHT="1020" VALIGN="top">
<img src="images/pieza_2.jpg" width="59" height="250" border="0" alt="pieza 1">
</TD>
</TR>
<TR>
<TD WIDTH="74" HEIGHT="148" VALIGN="top">
<img src="images/pieza_3.jpg" width="59" height="250" border="0" alt="pieza 1">
</TD>
<TD WIDTH="41" HEIGHT="148" VALIGN="top">
<img src="images/pieza_4.jpg" width="59" height="250" border="0" alt="pieza 1">
</TD>
</TR>
</TABLE>

Con lo que obtendremos nuestra imagen "entera".






Si hubiéramos situado un enlace en cada pieza de la imagen, ahora tendríamos una especie de "mapa de imagen" casero.

Al principio tenia dudas de donde colocarlo pero al final lo coloque aqui por lo de las etiketas definiciones