I +D de Sistemas Informáticos
Internet CGI Aplicaciones Redes Distribuidores S.A.C Servicios gratuitos

 

Ejemplos de tablas

Tabla básica de 3x2

A B C
D E 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 línea expandida <ROWSPAN>

Item 1 Item 2 Item 3
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 B C
D E F 
<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>

Combinación 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>

Combinación de cabeceras múltiples y columnas expandidas

Head1 Head2
Head 3 Head 4 Head 5 Head 6
A B C D
E F G H 
<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>

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>

Combinación de cabeceras laterales y líneas expandidas

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

Combinación de cabeceras superiores y laterales. Tabla centrada. Contenidos centrados. Título al pie.

  TABLE TR TD TH CAPTION
BORDER X - - - -
ROWSPAN - - X X -
COLSPAN - - X X -
ALIGN - X X X X
VALIGN - - X - -
WIDTH X - X - -
HEIGTH X - X - -
CELLPADDING X - - - -
CELLSPACING X - - - -
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></TD>
</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 parámetros

    Media
  Altura Peso
Sexo Hombres 1.9 85
Mujeres 1.7 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 línea y columna expandidos

A 1 2
3 4
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 márgenes y bordes

Tabla sin bordes

Item 1 Item 2 Item 3
Item 4 Item 5 
<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>

Tabla con borde de 10

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 B C
D E 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 B C
D E 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>
A B C
D E F 
<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>

Alineación, títulos y subtablas

Líneas múltiples en un tabla

Enero Febrero Marzo
Celda 1 Celda 2 Otra celda
Celda 3
Celda 4 y esta
es la celda 5		 Celda 6 
<TABLE BORDER>
	<TR>
		<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>
	</TR>
</TABLE>

Alineado horizontal del contenido de las celdas. ALIGN=LEFT | RIGHT | CENTER

Se puede aplicar individualmente a una celda o a toda la línea

Enero Febrero Marzo
Todas alineadas al centro Celda 2 Otra celda
Celda 3
Alineado a la derecha Alineado al centro Por defecto
Alineado a la izquierda 
<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 Marzo
Todas alineadas arriba Esta es la
Celda 2 		Celda 3
Alineado arriba Alineado abajo Por defecto
Alineado al centro		 
<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>

Titulando las tablas. CAPTION=TOP | BOTTOM

Título 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
Título 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

1 2 3
A B
C D
4 5 6 
<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 están dimensionadas al 50 % cada una respecto a la longitud total de la tabla

Width=50% Width=50%
Celda 3 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. Obsévese que se alargan más de lo que lo harían sin forzar la longitud de la tabla

Celda 1 2
Celda 3 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% Celda 2
3 Celda 4 
<TABLE BORDER WIDTH="100%">
	<TR><TD>WIDTH=100%</TD><TD>Celda 2</TD>
	</TR>
	<TR><TD>3</TD><TD>Celda 4</TD>
	</TR>
</TABLE>

Centrado de una tabla en la página

A B C
D E 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 página, 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% Item 2
3 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 en las tablas

Una tabla de cuatro celdas. Cada una de un color. (Sólo Netscape 3.0 o superior)

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, sólo sería necesario escribir: 

        <TABLE BORDER BGCOLOR="red">
        .... 
        ....
        </TABLE>

[Indice]