Tablas

Guía práctica de HTML

Ejemplos de Tablas

Tabla de tres columnas y dos filas.

<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>

A B C

D E F

Dos ejemplos de ROWSPAN.

1.- Tabla con la celda 2 expandida dos filas.

<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

2.- Tabla con la celda 1 expandida dos filas.

Item 1 Item 2 Item 3 Item 4

Item 5 Item 6 Item 7

Ejemplo de COLSPAN

Tabla con la celda 2 expandida dos columnas.

<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>

Item 1 Item 2

Item 3 Item 4 Item 5

Tabla con HEADERS <TH ...>

<TABLE BORDER>
<TR>
<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>

Head1 Head2 Head3

A B C

D E F

Ejemplo de COLSPAN más HEADERS que se expanden dos columnas.

<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>

Head1 Head2

A B C D

E F G H

Head1	Head2
A	B	C	D
E	F	G	H

Tabla de múltiples HEADERS, más COLSPAN, con un par expandido en dos columnas.

<TABLE BORDER> <TR>
<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>

Head1 Head2

Head 3 Head 4 Head 5 Head 6

A B C D

E F G H

Head1	Head2
Head 3	Head 4	Head 5	Head 6
A	B	C	D
E	F	G	H

Ejemplos de tablas con HEADERS laterales

<TABLE BORDER>
<TR> <TH>Head1</TH>
<TD>Item 1</TD> <TD>Item 2</TD> <TD>Item3</TD></TR>
<TR> <TH>Head2</TH>
<TD>Item 4</TD> <TD>Item 5</TD> <TD>Item6</TD></TR>
<TR> <TH>Head3</TH>
<TD>Item 7</TD> <TD>Item 8</TD> <TD>Item9</TD></TR>
</TABLE>

Head1 Item 1 Item 2 Item 3

Head2 Item 4 Item 5 Item 6

Head3 Item 7 Item 8 Item 9

Head1	Item 1	Item 2	Item 3
Head2	Item 4	Item 5	Item 6
Head3	Item 7	Item 8	Item 9

Ejemplos de HEADERS laterales, más ROWSPAN, con un HEADER expandiéndose en dos filas.

<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>

Head1 Item 1 Item 2 Item 3 Item 4

Item 5 Item 6 Item 7 Item 8

Head2 Item 9 Item 10 Item 3 Item 11

Head1	Item 1	Item 2	Item 3	Item 4
Item 5	Item 6	Item 7	Item 8
Head2	Item 9	Item 10	Item 3	Item 11

Tabla de ejemplo, combinando todo lo anterior

<TABLE BORDER=1>
<TR> <TH ROWSPAN=4>Promedio</TH>
</TR>
<TR>
<TD COLSPAN=2> <TD> <TH>Altura</TH> <TH>Peso</TH>
</TR>
<TR> <TH ROWSPAN=2>Género</TH>
<TH>Hombres</TH> <TD>1.9</TD> <TD>0.003</TD>
</TR>
<TR> <TH>Mujeres</TH> <TD>1.7</TD> <TD>0.002</TD>
</TR>
</TABLE>

Promedio

Altura Peso

Género Hombres 1.9 0.003

Mujeres 1.7 0.002

Promedio
	Altura	Peso
Género	Hombres	1.9	0.003
Mujeres	1.7	0.002

Utilizando márgenes y bordes

Una tabla sin BORDES

<TABLE>
<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

Tabla con BORDE de 10

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

Item 1 Item 2

Item 3 Item 4

CELLPADDING y CELLSPACING

1.- La siguiente tabla se hará usando CELLPADDING, pero no CELLSPACING

<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

2.- La siguiente tabla se hará usando CELLSPACING, pero no CELLPADDING

<TABLE BORDER CELLSPACING=10 CELLPADDING=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

3.- La siguiente tabla se hará usando CELLSPACING y CELLPADDING

<TABLE BORDER CELLSPACING=5 CELLPADDING=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 B C

D E F

CELLPADDING establece la distancia entre el borde de la celda y el texto. CELLSPACING determina la separación entre las dos líneas del borde.

Tabla con múltiples líneas de texto en las celdas.

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

Enero Febrero Marzo

Esta es la celda 1 Celda 2 Otra celda,
celda 3

Celda 4 y ahora esta
es celda 5 Celda 6

Como la tabla y las celdas carecen de ancho (width) el navegador determina éste según la longitud del texto en cada celda.

Enero	Febrero	Marzo
Esta es la celda 1	Celda 2	Otra celda, celda 3
Celda 4	y ahora esta es celda 5	Celda 6

ALIGN=left|right|center
Tabla que muestra diferentes posibilidades de alineamiento de texto.

NOTA : este formato se puede aplicar a celdas individuales o a todas las filas.

<TABLE BORDER=1 WIDTH=100%>
<TR>
<TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
</TR>
<TR ALIGN=center>
<TD>Celda 1</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 izquierda</TD>
</TR>
</TABLE>

Enero Febrero Marzo

Celda 1 Celda 2 Otra celda
Celda 3

Alineado a la derecha Alineado al centro Por defecto
Alineado a la izquierda

Enero	Febrero	Marzo
Celda 1	Celda 2	Otra celda Celda 3
Alineado a la derecha	Alineado al centro	Por defecto Alineado a la izquierda

VALIGN=top|bottom|middle
Tabla que muestra diferentes posibilidades de alineamiento vertical de texto y alineamiento dentro de las celdas de la tabla.

NOTA : este formato se puede aplicar a celdas individuales o a todas las filas.

<TABLE BORDER=1 WIDTH=100%>
<TR>
<TH>Enero</TH>
<TH>Febrero</HT>
<TH>Marzo</TH>
</TR>
<TR>
<TD>Celda 1</TD>
<TD>y esta es<br>la celda 2</TD>
<TD>Celda 3</TD>
</TR>
<TR HEIGHT=50>
<TD VALIGN=top>Alineado arriba</TD>
<TD VALIGN=bottom>Alineado abajo</TD>
<TD>Por defecto,<br>centro</TD>
</TR>
</TABLE>

Enero Febrero Marzo

Celda 1 y esta es
la celda 2 Celda 3

Alineado arriba Alineado abajo Por defecto centro

Enero	Febrero	Marzo
Celda 1	y esta es la celda 2	Celda 3
Alineado arriba	Alineado abajo	Por defecto centro

CAPTION=top|bottom [TÍTULO]

1.- Tabla con CAPTION arriba.

<TABLE BORDER> <CAPTION ALIGN=top><B>CAPTION [TÍTULO] arriba</B></CAPTION>
<TR>
<TH>January</TH>
<TH>February</TH>
<TH>March</TH>
</TR>
<TR>
<TD>This is cell 1</TD>
<TD>Cell 2</TD>
<TD>Another cell,<br> cell 3</TD>
</TR>
</TABLE>

CAPTION [TÍTULO] arriba
January February March

This is cell 1 Cell 2 Another cell,
cell 3

**CAPTION [TÍTULO] arriba**
January	February	March
This is cell 1	Cell 2	Another cell, cell 3

2.- Tabla con CAPTION abajo.

<TABLE BORDER>
<CAPTION ALIGN=bottom><B>CAPTION [TÍTULO] abajo</B></CAPTION>
<TR>
<TH>January</TH>
<TH>February</TH>
<TH>March</TH>
</TR>
<TR>
<TD>This is cell 1</TD>
<TD>Cell 2</TD>
<TD>Another cell,<br> cell 3</TD>
</TR>
</TABLE>

CAPTION [TÍTULO] abajo
January February March

This is cell 1 Cell 2 Another cell,
cell 3

**CAPTION [TÍTULO] abajo**
January	February	March
This is cell 1	Cell 2	Another cell, cell 3

Tablas ANIDADAS

Tabla anidada dentro de otra tabla. La tabla ABCD está dentro de la tabla 123456.

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

1 2 3

A B

C D

4 5 6

ANCHO de la tablas y ubicación:
Diferentes anchos de tabla.

1.- Tabla con ancho de 50% (del ancho de la página).

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

Width=50% Width=50%

3 4

2.- Observe que si las celdas tienen contenidos diferentes, esto afecta el ancho de cada celda en relación con el ancho de la tabla.

<TABLE BORDER WIDTH="50%">
<TR> <TD>Esta tiene texto que amplía el ancho de la celda.</TD><TD>2</TD>
</TR>
<TR> <TD>3</TD><TD>4</TD>
</TR>
</TABLE>

Esta tiene texto que amplía el ancho de la celda. 2

3 4

3.- También se puede colocar el ancho de la tabla en pixeles, en este caso 300:

<TABLE BORDER WIDTH="300">
<TR> <TD>Width=300</TD><TD>2</TD>
</TR>
<TR> <TD>3</TD><TD>4</TD>
</TR>
</TABLE>

Width=300 2

3 4

Centrando una tabla

A	B	C
D	E	F

ANCHO (WIDTH) de tabla en tablas anidadas

Se observa dos tablas anidadas, utilizando el atributo de ancho de la tabla inicial para determinar el ancho de la segunda tabla.

<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>

Item 1 Item 2

Item A Item B

Item 4

ALTURA (HEIGHT)

Tabla con altura de 50% (referente a la parte de la página que se ve.)

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

HEIGHT=50% Item 2

Item 3 Item 4

También se puede colocar la altura de la tabla en pixeles, en este caso 100:

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

HEIGHT=100 Item 2

Item 3 Item 4

Esta Guía fué preparada por Carlos Crismatt Mouthon E-mail: crismatt@hotmail.com