Tablas

Las tablas son sin duda uno de los elementos ms potentes del HTML. Con pocos elementos se pueden conseguir efectos espectaculares. En el interior de las celdas de una tabla, que pueden ser con borde visible o invisible, se puede poner cualquier cosa: texto de cualquier tamao y color, imgenes, links... Por supuesto, adems de permitir cualquier contenido, tienen sus propios atributos de alineacin tanto horizontal como vertical, y atributos de dimensionado. Por defecto se autodimensionan, es decir, se adaptan en tamao a su contenido, pero tambin es posible definirlo de forma fija. Las tablas han sido utilizadas largo tiempo para maquetar el contenido de las pginas, y aunque las nuevas tendencias aconsejen hacer esto con bloques (capas XHTML), no es un elemento que vaya a desaparecer, y es mucho ms sencillo de utilizar.

El elemento bsico de definicin de tabla es <TABLE> </TABLE> y en su interior se disponen los sub elementos <TR> para definir una fila (Row) <TH> para definir una cabecera (Header) <TD> para definir una celda de datos (Data). Estos sub elementos tambin han de llevar sus correspondientes cierres: </TR> </TH> </TD>. Una cabecera <TH> es lo mismo que una celda de datos <TD> pero de forma automtica el texto de su contenido recibe los atributos de negrita y centrado. Slo es posible definirlas al principio de las filas, de las columnas o de ambas a la vez. He aqu una tabla-resumen de los elementos utilizados y los atributos que admite cada uno:
TABLE TR TD TH CAPTION BORDER BORDERCOLOR ROWSPAN COLSPAN ALIGN VALIGN WIDTH HEIGTH CELLPADDING CELLSPACING X X X X X X X X X X X X -

X X X X X -

NOWRAP EVENTS

X X

Resumen de tablas

Veamos el significado de cada atributo:

BORDER Indica el ancho de los bordes de la tabla. Se mide en pxels. Si no se escribe este atributo, es equivalente a BORDER=0 (por defecto). BORDERCOLOR Establece el color de los bordes de la tabla. No funciona igual en todos los navegadores. CELLSPACING Indica el nmero de pxels que separan una celda de otra. Aunque pueda parecerlo, no hace lo mismo que BORDER. Su valor por defecto es 2. CELLPADDING Indica los pxels de separacin entre el borde de la celda y su contenido. Su valor por defecto es 1. WIDTH Segn donde se escriba, sirve para controlar el ancho de toda la tabla o de sus columnas. Si se incluye en <TABLE> puede indicar el tamao tanto en pxels como en porcentaje respecto al ancho de la pantalla. ALIGN Indica la alineacin horizontal de los datos dentro de las celdas. Puede tener tres valores: LEFT (izquierda), RIGHT (derecha) y CENTER (centro). VALIGN Indica la alineacin vertical de los datos dentro de las celdas. Puede tener tres valores: TOP (arriba), BOTTOM (abajo) y MIDDLE (centro). ROWSPAN Se utiliza en la definicin de una celda (<TD>) o cabecera (<TH>) para indicar que su anchura o altura son equivalentes a un determinado nmero de filas. COLSPAN Se utiliza en la definicin de una celda (<TD>) o cabecera (<TH>) para indicar que su anchura o altura son equivalentes a un determinado nmero de columnas. NOWRAP Para impedir que las lneas de texto dentro de una celda se trunquen en los espacios en blanco. EVENTS Se pueden capturar todos los eventos tpicos de los navegadores en cualquiera de las partes de una tabla. Para ello es necesario JavaScript, y no es compatible con todos los navegadores. Por ejemplo: <TABLE BORDER onMouseOver="javascript:alert('Aviso')"> ... </TABLE>

Recientemente se han implementado al elemento <TABLE> algunos atributos muy interesantes que permiten definir qu bordes o lneas de la tabla se mostrarn: Este atributo sirve para definir qu bordes del marco de la tabla sern visibles: <TABLE FRAME="valor"> ... </TABLE> donde valor puede ser:
void - Ningn lado (por defecto). above - Slo el borde superior below - Slo el borde inferior. hsides - Slo los bordes superior e inferior. vsides - Slo los lados derecho e izquierdo. lhs - Slo el lado izquierdo. rhs - Slo el lado derecho. box - Los cuatro lados.

border - Los cuatro lados (no es lo mismo que el ya conocido) Y este otro sirve para definir qu bordes de la tabla sern visibles: <TABLE RULES="valor"> ... </TABLE> donde valor puede ser: none - Ninguna lnea de divisin (por defecto). groups - Slo aparecen lneas de divisin entre grupos de filas y grupos de columnas. cols - Slo aparecern lneas de divisin entre filas. rows - Slo aparece lneas de divisin entre columnas. Estos ltimos atributos no funcionan igual en todos los navegadores, y no funcionan en absoluto si no son de la ltima generacin. Segn el navegador de que se trate, puede que haya que combinar ms de un atributo para conseguir el efecto deseado. Lo mejor es hacer pruebas con algunas versiones para asegurarse.

Las posibilidades son tan amplias, que lo mejor es ver la pgina de ejemplos de tablas que encontrars en el ndice.

Ejemplos de tablas
Tabla bsica de 3x2 ABC DE F
<TABLE BORDER> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>

Dos ejemplos de lnea expandida <ROWSPAN> Item 1 Item 3 Item 2 Item 4 Item 5
<TABLE BORDER> <TR> <TD>Item 1</TD> <TD ROWSPAN=2>Item 2</TD> <TD>Item 3</TD> </TR> <TR> <TD>Item 4</TD> <TD>Item 5</TD> </TR> </TABLE>

Item 1

Item 2 Item 3 Item 4 Item 5 Item 6 Item 7

<TABLE BORDER> <TR> <TD ROWSPAN=2>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD> </TR> <TR> <TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD> </TR> </TABLE>

Ejemplo de columna expandida <COLSPAN> Item 1 Item 2 Item 3 Item 4 Item 5

<TABLE BORDER> <TR> <TD>Item 1</TD> <TD COLSPAN=2>Item 2</TD> </TR> <TR> <TD>Item 3</TD> <TD>Item 4</TD> <TD>Item 5</TD> </TR> </TABLE>

Tabla con cabeceras <TH> Head1 Head2 Head3 A D B E C F

<TH>Head1</TH> <TH>Head2</TH> <TH>Head3</TH> </TR> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>

<TABLE BORDER> <TR>

Combinacin de columna expandida y cabecera Head1 Head2 A B C D E F G H

<TABLE BORDER> <TR> <TH COLSPAN=2>Head1</TH> <TH COLSPAN=2>Head2</TH> </TR> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD> </TR> <TR> <TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD> </TR> </TABLE>

Combinacin de cabeceras mltiples y columnas expandidas Head1 Head2 Head 3 Head 4 Head 5 Head 6 A E B F C G D H
<TH COLSPAN=2>Head1</TH> <TH COLSPAN=2>Head2</TH> </TR> <TR> <TH>Head 3</TH> <TH>Head 4</TH> <TH>Head 5</TH> <TH>Head 6</TH> </TR> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD> </TR> <TR> <TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD> </TR> </TABLE>

<TABLE BORDER> <TR>

Cabeceras laterales Head1 Item 1 Item 2 Item 3 Head2 Item 4 Item 5 Item 6 Head3 Item 7 Item 8 Item 9
<TABLE BORDER> <TR><TH>Head1</TH> <TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD></TR> <TR><TH>Head2</TH> <TD>Item 4</TD> <TD>Item 5</TD> <TD>Item 6</TD></TR> <TR><TH>Head3</TH> <TD>Item 7</TD> <TD>Item 8</TD> <TD>Item 9</TD></TR> </TABLE>

Combinacin de cabeceras laterales y lneas expandidas Item 1 Item 2 Item 3 Item 4 Head1 Item 5 Item 6 Item 7 Item 8 Head2 Item 9 Item 10 Item 3 Item 11
<TABLE BORDER> <TR><TH ROWSPAN=2>Head1</TH> <TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD> </TR> <TR><TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD> <TD>Item 8</TD> </TR> <TR><TH>Head2</TH> <TD>Item 9</TD> <TD>Item 10</TD> <TD>Item 3</TD> <TD>Item 11</TD> </TR> </TABLE>

Combinacin de cabeceras superiores y laterales. Tabla centrada. Contenidos centrados. Ttulo al pie. TABLE TR TD TH CAPTION BORDER ROWSPAN COLSPAN ALIGN VALIGN WIDTH HEIGTH CELLPADDING X X X X X X X X X X X X X X X -

X - CELLSPACING Resumen de tablas

<CENTER> <TABLE BORDER> <CAPTION ALIGN=bottom>Resumen de tablas</CAPTION> <TR> <TD><TH>TABLE</TH><TH>TR</TH><TH>TD</TH><TH>TH</TH><TH>CAPTION</TH></T D> </TR> <TR ALIGN=CENTER> <TH>BORDER</TH><TD>X</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD>-</TD> </TR> <TR ALIGN=CENTER> <TH>ROWSPAN</TH><TD>-</TD><TD>-</TD><TD>X</TD><TD>X</TD><TD>-</TD> </TR> <TR ALIGN=CENTER> <TH>COLSPAN</TH><TD>-</TD><TD>-</TD><TD>X</TD><TD>X</TD><TD>-</TD> </TR>

<TR ALIGN=CENTER> <TH>ALIGN</TH><TD>-</TD><TD>X</TD><TD>X</TD><TD>X</TD><TD>X</TD> </TR> <TR ALIGN=CENTER> <TH>VALIGN</TH><TD>-</TD><TD>-</TD><TD>X</TD><TD>-</TD><TD>-</TD> </TR> <TR ALIGN=CENTER> <TH>WIDTH</TH><TD>X</TD><TD>-</TD><TD>X</TD><TD>-</TD><TD>-</TD> </TR> <TR ALIGN=CENTER> <TH>HEIGTH</TH><TD>X</TD><TD>-</TD><TD>X</TD><TD>-</TD><TD>-</TD> </TR> <TR ALIGN=CENTER> <TH>CELLPADDING</TH><TD>X</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD>-</TD> </TR> <TR ALIGN=CENTER> <TH>CELLSPACING</TH><TD>X</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD>-</TD> </TR> </TABLE> </CENTER>

Ejemplo con todos los elementos y parmetros Media Altura Peso Sexo Hombres 1.9 Mujeres 1.7 85 60

<TABLE BORDER> <TR> <TD><TH ROWSPAN=2></TH> <TH COLSPAN=2>Media</TH></TD> </TR> <TR> <TD><TH>Altura</TH><TH>Peso</TH></TD> </TR> <TR> <TH ROWSPAN=2>Sexo</TH> <TH>Hombres</TH><TD>1.9</TD><TD>85</TD> </TR> <TR> <TH>Mujeres</TH><TD>1.7</TD><TD>60</TD> </TR> </TABLE>

Otro ejemplo de lnea y columna expandidos 12 A 34 C D

<TABLE BORDER> <TR> <TD ALIGN=center ROWSPAN=2 COLSPAN=2>A</TD> <TD>1</TD> <TD>2</TD> </TR> <TR> <TD>3</TD> <TD>4</TD> </TR> <TR> <TD ALIGN=center ROWSPAN=2 COLSPAN=2>C</TD> <TD ALIGN=center ROWSPAN=2 COLSPAN=2>D</TD> </TR> <TR> </TR> </TABLE>

Ajustando mrgenes y bordes

Tabla sin bordes Item 1 Item 3 Item 2 Item 4 Item 5
<TABLE> <TR> 3</TD> </TR> <TR> </TR> </TABLE> <TD>Item 4</TD> <TD>Item 5</TD> <TD>Item 1</TD> <TD ROWSPAN=2>Item 2</TD> <TD>Item

Aqu no es visible el borde de las celdas debido a que se ha omitido el atributo BORDER del elemento <TABLE>. La omisin o no es equivalente a parametrizarlo; se consigue lo mismo as: BORDER=0, y como ya habrs deducido, el valor de BORDER puede ser variable. Mira el siguiente ejemplo:

Tabla con borde de 10 puntos Item 1 Item 2 Item 3 Item 4

<TABLE BORDER=10> <TR> <TD>Item 1</TD> <TD> Item 2</TD> </TR> <TR> <TD>Item 3</TD> <TD>Item 4</TD> </TR> </TABLE>

Dimensionado de celdas A D B E C F

<TABLE BORDER CELLPADDING=10 CELLSPACING=0> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>

A B C D E F
<TABLE BORDER CELLPADDING=0 CELLSPACING=10> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>

A D

B E

C F

<TABLE BORDER CELLPADDING=10 CELLSPACING=10> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>

<TABLE BORDER=5 CELLPADDING=10 CELLSPACING=10> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>

Alineacin, ttulos y subtablas

Lneas mltiples en un tabla Enero Febrero Marzo Otra celda Celda 3

Celda 1 Celda 2 Celda 4

y esta Celda 6 es la celda 5

<TH>Enero</TH> <TH>Febrero</TH> <TH>Marzo</TH> </TR> <TR> <TD>Celda 1</TD> <TD>Celda 2</TD> <TD>Otra celda<br> Celda 3</TD> </TR> <TR> <TD>Celda 4</TD> <TD>y esta<br>es la celda 5</TD> <TD>Celda 6</TD>

<TABLE BORDER> <TR>

</TR> </TABLE>

Alineado horizontal del contenido de las celdas. ALIGN=LEFT | RIGHT | CENTER Se puede aplicar individualmente a una celda o a toda la lnea Enero Todas alineadas al centro Febrero Celda 2 Marzo Otra celda Celda 3 Por defecto Alineado a la izquierda

Alineado a la derecha Alineado al centro

<TABLE BORDER> <TR> <TH>Enero</TH> <TH>Febrero</TH> <TH>Marzo</TH> </TR> <TR ALIGN=center> <TD>Todas alineadas al centro</TD> <TD>Celda 2</TD> <TD>Otra celda<br> Celda 3</TD> </TR> <TR> <TD ALIGN=right>Alineado a la derecha</TD> <TD ALIGN=center>Alineado al centro</TD> <TD>Por defecto<br>Alineado a la izquierdat</TD> </TR> </TABLE>

Alineado vertical del contenido de las celdas. VALIGN=TOP | BOTTOM | MIDDLE Se puede aplicar individualmente a una celda o a toda la columna Enero Febrero Todas alineadas arriba Esta es la Celda 2 Alineado arriba
<TABLE BORDER> <TR> <TH>Enero</TH> <TH>Febrero</TH> <TH>Marzo</TH> </TR> <TR VALIGN=top> <TD>Todas alineadas arriba</TD> <TD>Esta es la<br>Celda 2</TD> <TD>Celda 3</TD> </TR> <TR> <TD VALIGN=top>Alineado arriba</TD> <TD VALIGN=bottom>Alineado abajo</TD> <TD>Por defecto<br>Alineado al centro</TD> </TR> </TABLE>

Marzo Celda 3

Por defecto Alineado abajo Alineado al centro

Titulando las tablas. CAPTION=TOP | BOTTOM Ttulo arriba Enero Febrero Marzo Celda 1 Celda 2 Celda 3
<TABLE BORDER> <CAPTION ALIGN=top>Titulo arriba</CAPTION> <TR> <TH>Enero</TH> <TH>Febrero</TH> <TH>Marzo</TH> </TR> <TR> <TD>Celda 1</TD> <TD>Celda 2</TD> <TD>Celda 3</TD> </TR> </TABLE>

Enero Febrero Marzo Celda 1 Celda 2 Celda 3 Ttulo abajo

<TABLE BORDER> <CAPTION ALIGN=bottom>Titulo abajo</CAPTION> <TR> <TH>Enero</TH> <TH>Febrero</TH> <TH>Marzo</TH> </TR> <TR> <TD>Celda 1</TD> <TD>Celda 2</TD> <TD>Celda 3</TD> </TR> </TABLE>

Anidando tablas. La tabla ABCD dentro de la tabla 12345 3 12 AB C D 456

<TABLE BORDER> <TR> <!-- ROW 1, TABLE 1 --> <TD>1</TD> <TD>2</TD> <TD>3 <TABLE BORDER> <TR> <!-- ROW 1, TABLE 2 --> <TD>A</TD> <TD>B</TD> </TR> <TR> <!-- ROW 2, TABLE 2 --> <TD>C</TD> <TD>D</TD> </TR> </TABLE> </TD> </TR> <TR> <!-- ROW 2, TABLE 1 --> <TD>4</TD> <TD>5</TD> <TD>6</TD> </TR> </TABLE>

Longitud horizontal de las tablas

Tabla que ocupa el 50 % de la pantalla, y cuyas celdas estn dimensionadas al 50 % cada una respecto a la longitud total de la tabla Width=50% Celda 3 Width=50% Celda 4

<TABLE BORDER WIDTH="50%"> <TR><TD>Width=50%</TD><TD>Width=50%</TD> </TR> <TR><TD>Celda 3</TD><TD>Celda 4</TD> </TR> </TABLE>

Tabla dimensionada al 50 % de la pantalla, celdas sin dimensionar. Obsvese que se alargan ms de lo que lo haran sin forzar la longitud de la tabla Celda 1 Celda 3 2 4

<TABLE BORDER WIDTH="50%"> <TR><TD>Celda 1</TD><TD>2</TD> </TR> <TR><TD>Celda 3</TD><TD>4</TD> </TR> </TABLE>

El mismo efecto anterior, pero con la tabla dimensionada al 100 % WIDTH=100% 3

<TABLE BORDER WIDTH="100%"> <TR><TD>WIDTH=100%</TD><TD>Celda 2</TD> </TR> <TR><TD>3</TD><TD>Celda 4</TD> </TR> </TABLE>

Celda 2 Celda 4

Centrado de una tabla en la pgina A B D E

C F

<CENTER> <TABLE BORDER WIDTH="50%"> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE> </CENTER>

Tabla forzada al 50 % de la pgina, conteniendo otra tabla anidada en una de sus celdas. La segunda tabla est forzada a ocupar el 100 % de la celda receptora. Item 1 Item 2 Item A Item B Item 4

<TABLE BORDER WIDTH="50%"> <TR><TD>Item 1</TD><TD>Item 2</TD> </TR> <TR><TD> <TABLE BORDER WIDTH=100%> <TR><TD>Item A</TD><TD>Item B</TD> </TR> </TABLE> </TD> <TD>Item 4</TD> </TR> </TABLE>

Longitud vertical de las tablas

Tabla que ocupa el 50 % horizontal de la pantalla, y el 25 % vertical. HEIGHT=25% HEIGHT=25% 3 Item 2 4

<TABLE BORDER WIDTH="50%" HEIGHT="25%"> <TR><TD>HEIGHT=15%</TD> <TD>Item 2</TD> </TR> <TR><TD>3</TD><TD>4</TD> </TR> </TABLE>

Fondos de colores o grficos en las tablas

Una tabla de cuatro celdas. Cada una de un color. Texto ROJO Texto VERDE Texto AZUL Texto AMARILLO
<TABLE BORDER> <TR><TD BGCOLOR="RED">Texto ROJO</TD> <TD BGCOLOR="green">Texto VERDE</TD> </TR> <TR><TD BGCOLOR="blue">Texto AZUL</TD> <TD BGCOLOR="YELLOW">Texto AMARILLO</TD> </TR> </TABLE>

En este ejemplo se ha dado color individualmente a cada celda. El atributo BGCOLOR="color" puede utilizarse en cada elemento de la tabla para efectos globales. Por ejemplo, para hacer toda la tabla en rojo, slo sera necesario escribir:
<TABLE BORDER BGCOLOR="red"> .... .... </TABLE>

Para toda la lnea:

<TABLE BORDER> <TR BGCOLOR="red"><TD> texto </TD></TR> .... </TABLE>

Tambin se puede usar una imagen como fondo de toda la tabla:

<TABLE BORDER BACKGROUND="yellow_r.gif"> .... .... </TABLE>

De slo una celda:

<TABLE BORDER> <TR><TD BACKGROUND="yellow_r.gif"> texto </TD></TR> .... </TABLE>

O de toda la fila:

<TABLE BORDER > <TR BACKGROUND="yellow_r.gif"><TD> texto </TD></TR> .... </TABLE>

Bordes de colores en las tablas

Se puede cambiar el color de los bordes de una tabla, aunque este atributo no funciona igual en todos los navegadores, ya que en el IE el color afecta a todas las lneas de la tabla, y en Mozilla solamente a los bordes exteriores. Por ejemplo: Ejemplo de bordes de color rojo Ejemplo de bordes de color rojo
<TABLE BORDER=2 bordercolor="red" > <TR><TD> Ejemplo de bordes</TD><TD> de color rojo </TD></TR> <TR><TD> Ejemplo de bordes</TD><TD> de color rojo </TD></TR> </TABLE>

Atributos de ltima generacin

Tabla que solamente muestra los cuatro bordes ABC DEF
<TABLE FRAME="border" RULES="none"> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>

Tabla que solamente muestra los bordes superior e inferior ABC DEF
<TABLE FRAME="hsides" RULES="none"> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>

Tabla que solamente muestra los bordes izquierdo y derecho ABC DEF
<TABLE FRAME="vsides" RULES="none"> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>

Tabla que solamente muestra las lneas de divisin entre columnas ABC DEF
<TABLE FRAME="void" RULES="cols"> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>

Tabla que solamente muestra las lneas de divisin entre filas ABC DEF
<TABLE FRAME="void" RULES="rows"> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>

Ejemplo de tabla con agrupamientos de columnas y filas Ejemplo de grupos de columnas y lneas Columna1 Columna2 Columna3 Columna4 Columna5 Columna6 Columna7 C1L1 C2L1 C3L1 C4L1 C5L1 C6L1 C7L1 C1L2 C1L3 C1L4 C1L5 C1L6 C1L7 C2L2 C2L3 C2L4 C2L5 C2L6 C2L7 C3L2 C3L3 C3L4 C3L5 C3L6 C3L7 C4L2 C4L3 C4L4 C4L5 C4L6 C4L7 C5L2 C5L3 C5L4 C5L5 C5L6 C5L7 C6L2 C6L3 C6L4 C6L5 C6L6 C6L7 C7L2 C7L3 C7L4 C7L5 C7L6 C7L7

<TABLE border="1" frame="border" rules="groups"> <CAPTION>Ejemplo de grupos de columnas y lneas</CAPTION> <COLGROUP align="center"> <COLGROUP align="left"> <COLGROUP align="center" span="2"> <COLGROUP align="center" span="3"> <THEAD valign="top"> <TR> <TH>Columna1</TH> <TH>Columna2</TH> <TH>Columna3</TH> <TH>Columna4</TH> <TH>Columna5</TH> <TH>Columna6</TH> <TH>Columna7</TH></TR> <TBODY> <TR><TD>C1L1<TD>C2L1<TD>C3L1<TD>C4L1<TD>C5L1<TD>C6L1<TD>C7L1</TR> <TR><TD>C1L2<TD>C2L2<TD>C3L2<TD>C4L2<TD>C5L2<TD>C6L2<TD>C7L2</TR> <TR><TD>C1L3<TD>C2L3<TD>C3L3<TD>C4L3<TD>C5L3<TD>C6L3<TD>C7L3</TR> <TR><TD>C1L4<TD>C2L4<TD>C3L4<TD>C4L4<TD>C5L4<TD>C6L4<TD>C7L4</TR> <TBODY> <TR><TD>C1L5<TD>C2L5<TD>C3L5<TD>C4L5<TD>C5L5<TD>C6L5<TD>C7L5</TR> <TR><TD>C1L6<TD>C2L6<TD>C3L6<TD>C4L6<TD>C5L6<TD>C6L6<TD>C7L6</TR> <TFOOT> <TR><TD>C1L7<TD>C2L7<TD>C3L7<TD>C4L7<TD>C5L7<TD>C6L7<TD>C7L7</TR> </TABLE>

Como puedes ver, existe un agrupamiento desde la lnea 1 a la 4, y otro de la 5 a la 6. A su vez, las columnas 3 y 4 forman un grupo, y la 5, 6 y 7 otro.

Los dos agrupamientos de columnas se definen con las instrucciones:

<COLGROUP align="center" span="2"> <COLGROUP align="center" span="3">

Hay cuatro grupos de filas: La que aparece debajo de las cabeceras la escribe <THEAD> Las dos lneas que separan los grupos de filas centrales las producen las dos instrucciones <TBODY>, Y la ltima la produce <TFOOT>. Por supuesto, no es obligado que esten todas, puedes poner solamente las que necesites. Todo esto funciona solamente si en la definicin de la tabla se incluye el atributo rules="groups" Tablas con efectos compatibles con todos los navegadores... Como ya has podido ver, muchos de los efectos de ltima generacin mostrados no funcionan igual, o no funcionan en absoluto con todos los navegadores. Qu hacer entonces para conseguir tablas cuyas lneas de bordes se vean siempre bien? Pues la nica solucin es usar una tabla sin bordes. S, ya s que lo que buscas no es eso, pero si utilizando atributos de tabla para poner lneas de bordes donde queramos hay problemas con algunos navegadores, la solucin es utilizar otros recursos del HTML que sean admitidos por todos. No es ninguna solucin mgica: solamente tienes que crear un grfico con un punto (preferiblemente cuadrado) del color y grosor que quieras dar a tus lneas... y listo. Supongamos que queremos conseguir con una tabla representar un recuadro con bordes rojos. Para ello, utilizando cualquier editor de grficos creamos un fichero que contenga un punto de color rojo. Solamente uno, ser casi invisible. No necesitamos ms. Le llamaremos rojo.gif

Ejemplo de recuadro con ngulos rectos. Y este sera del cdigo necesario:
<table width="300" height="50" cellspacing="0" cellpadding="0" border="0" bgcolor="#6a7da5" align="center"> <tr> <td rowspan="3" width="1" height="50"> <img src="rojo.gif" width="1px" height="50" border="0" alt=""></td> <td colspan="4" height="1"> <img src="rojo.gif" width="300" height="1" border="0" alt=""></td> <td rowspan="3" width="1"> <img src="rojo.gif" width="1px" height="50" border="0" alt=""></td> </tr> <tr> <td colspan="4" align="center" height="48"> <font color="white"><b>Ejemplo de recuadro con ngulos rectos.</b></font></td> </tr> <tr> <td colspan="4" height="1"> <img src="rojo.gif" width="300" height="1" border="0" alt=""></td> </tr> </table>

Como puedes ver, el truco consiste en definir celdas alrededor de la celda que lleva el texto. Estas celdas que rodean a la principal solamente contienen el fichero grfico con el punto. Para conseguir que aparezcan las lneas, slo hay que "estirar" el punto contenido en nuestro fichero grfico rojo.gif. Esto nos permite "dibujar" las lneas que se quieran y donde se quieran, sin problemas de compatibilidad, ya que estos atributos del elemento <IMG> son completamente estandarizados (por lo menos de momento). Fjate en que adems de atributos propios del elemento IMG tambin se utiliza una instruccin de estilo: width="1px" para asegurar un grosor mnimo de la lnea. Este es el aspecto de la misma tabla con los bordes visibles: Horizontal arriba Vertical Ejemplo de recuadro Vertical izquierda con ngulos rectos. derecha Horizontal abajo --------------------

Utilizando una tcnica parecida, tambin se pueden conseguir recuadros con las esquinas redondeadas. Al igual que en el anterior ejemplo, es necesario tener un grfico previamente, pero este nos dar algo ms de trabajo. Con cualquier editor de grficos (el "Paint" de Windows, por ejemplo) generas un crculo del color que quieras, y con el borde transparente o de otro color. A continuacin lo cortas en cuatro porciones, como una tarta, y guardas cada trozo con un nombre cualquiera, por ejemplo, angulo1, angulo2, etc. As

Recuadro con ngulos redondeados

Y este es el cdigo necesario:

<table border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#DDE0FC" width="20"><img src="angulo1.gif" width="20" height="20"></td> <td bgcolor="#DDE0FC"> </td> <td bgcolor="#DDE0FC" width="20"><img src="angulo2.gif" width="20" height="20"></td> </tr> <tr> <td bgcolor="#DDE0FC" width="20"> </td> <td bgcolor="#DDE0FC">Recuadro con ngulos redondeados</td> <td bgcolor="#DDE0FC" width="20"> </td> </tr> <tr> <td bgcolor="#DDE0FC" width="20"><img src="angulo4.gif" width="20" height="20"></td> <td bgcolor="#DDE0FC"> </td> <td bgcolor="#E5E7FD" width="20"><img src="angulo3.gif" width="20" height="20"></td> </tr> </table>

Como puedes ver, para que el efecto sea completo hay que dar el mismo color que tienen los grficos como fondo de las celdas. Estos son los cuatro grficos necesarios: angulo1.gif angulo2.gif angullo4.gif angulo3.gif

taller
assaaa

[Espaa] 03/03/2011 14:47:19 Alejandra [Mxico] 01/02/2011 12:32:15 brian [Colombia] 26/10/2010 15:05:17
jhonny andres

jajajaja

eso no es especificamente lo qe pedi

en este tiempoyo como estudiante debo tener una base para mis tareas esta es una buena pagina

[Colombia] 03/07/2010 16:08:56 diana [Mxico] 19/02/2010 13:40:57 mary [Guatemala] 03/06/2009 9:48:08 Miguel Ruiz [Per] 24/05/2009 19:39:53

lo que busco son tablas un poco mas avanzadas ya que necesito subir mi pagina a la web

como puedo obtener el cdigo

bueno es algo muy interesante pero dificil de realizar ya que se necesita un poco mas de explicacion y ejemplos claros para que se puedan realizar mejor. ya le entendi pero me gustaria saber mas!!

HOla, otra vez. Olvid mencionar que

Celda Celda

Celda Celda

no es un ejemplo de tabla, sino un ejemplo del cdigo. El ejemplo de tabla sera la imagen misma de cmo se ver en la web el trabajo plasmado por el cdigo. Por ejemplo, la tabla que aparece en su "Comentarios". Ese es un ejemplo. Lgicamente, veo que no es el que corresponde al cdigo mencionado. Miguel Ruiz [Per] 24/05/2009 19:35:38 Muy muy buena su pgina. Muy didctica. Me gusta la tabla que usan para sus comentarios. Podran compartir conmigo el cdigo usado? Cuando he tratado una y otra vez de usar el cdigo de su pgina de frames, no funciona. No aparece nada en la pgina. Demorar mucho en dar en el clavo para realizar la bonita tabla de sus comentarios. Muchas gracias

Alberto [Mxico] 02/05/2008 17:19:50

Cuesta mucho usar las tablas, pero gracias por poner este excelente ejemplo de usar tablas, creo que ya lo entendi.

Hasta aqu la informacin que pretendamos transmitiros sobre las tablas en HTML. Sera importante ahora realizar algn ejemplo de realizacin de una tabla un poco compleja. Por ejemplo la siguiente:

Animales en peligro de extincin Nombre Ballena Oso Pardo Lince Tigre Cabezas Previsin 2010 Previsin 2020 6000 50 0 10 300 210 4000 1500

Se puede ver esta tabla en otra ventana, donde tambin podremos examinar su cdigo fuente. Otro ejemplo de tabla con el que podemos practicar:

Climas de Amrica del Sur Parte de arriba de Venezuela Amrica del Sur. Pases como: Colombia Ecuador Per Parte de abajo de Amrica del Sur. Pases como:

Argentina Chile Uruguay Paraguay

Bosque tropical, clima de sabana, clima martimo con inviernos secos.

Climas martimos con veranos secos, con inviernos secos, climas frios, clima de estepa, clima desrtico.