Otros ejemplos con tablas en html

Tabla de tres columnas y dos filas.

A	B	C
D	E	F

Dos ejemplos de ROWSPAN.

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

Item 1	Item 2	Item 3
Item 4	Item 2	Item 5

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

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

Ejemplo de COLSPAN

Tabla con la celda 2 expandida dos columnas.

Item 1	Item 2
Item 3	Item 4	Item 5

Tabla con HEADERS <TH ...>

Head1	Head2	Head3
A	B	C
D	E	F

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

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.

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

Ejemplos de tablas con HEADERS laterales

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.

Head1	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

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
Género	Mujeres	1.7	0.002

Utilizando márgenes y bordes

Una tabla sin BORDES

Item 1	Item 2	Item 3
Item 4	Item 2	Item 5

Tabla con BORDE de 10

Item 1	Item 2
Item 3	Item 4

CELLPADDING y CELLSPACING

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

A	B	C
D	E	F

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

A	B	C
D	E	F

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

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.

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

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

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

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

Tablas ANIDADAS

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

A	B
C	D

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.

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

Aprendiendo hml, css y javascript

Pages

Otros ejemplos con tablas en html