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

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

Resumen de tablas
	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	-	-	-	-

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

Título abajo
Enero	Febrero	Marzo
Celda 1	Celda 2	Celda 3

<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

A	B
C	D

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

Breaking

Ejemplos de tablas

Ejemplos de tablas

Ajustando márgenes y bordes

Alineación, títulos y subtablas

Longitud horizontal de las tablas

Longitud vertical de las tablas

COMPARTEME

Descarga juegos para todas las plataformas y consolas

Códigos para tu pagina Web

Buscar este blog

Haz Un Donativo a la pagina

Seguidores

Únete al grupo

Descarga Diseños

Popular

Suscríbete

Tags

Categories

Popular Posts