7b - Ejemplos de Tablas

Una Tabla Simple:

 

1	2	3
4	5	6

<TABLE BORDER="1">
     <TR>
          <TD>1<TD>2<TD>3
     <TR>
          <TD>4<TD>5<TD>6
</TABLE>

Ejemplo de TH, COLSPAN y ROWSPAN:

 

	Columnas
Filas	1	2	3
	4	5	6

<TABLE BORDER>
     <TR>
          <TD><TH  COLSPAN="3">Columnas
     <TR>
          <TH  ROWSPAN="2">Filas<TD>1 <TD>2 <TD>3
     <TR>
          <TD>4 <TD>5 <TD>6
</TABLE>

 

Ejemplo de Múltiples Cabeceras:

 

Datos1		Datos2
Datos1.1	Datos1.2	Datos2.1	Datos2.2
1	2	3	4
5	6	7	8

<TABLE BORDER>
     <TR>
          <TH COLSPAN="2">Datos1

          <TH COLSPAN="2">Datos2  
     <TR>
          <TH>Datos1.1 <TH>Datos1.2 

          <TH>Datos2.1 <TH>Datos2.2  
     <TR>
          <TD>1<TD>2<TD>3<TD>4
     <TR>
          <TD>5<TD>6<TD>7<TD>8
</TABLE>

Tabla sin Borde:

 

1	2	3
4	5	6

<TABLE>
     <TR>
          <TD>1<TD>2<TD>3
     <TR>
          <TD>4<TD>5<TD>6
</TABLE>

Tabla con Borde=15:

 

1	2	3
4	5	6

<TABLE BORDER="15">
     <TR>
          <TD>1<TD>2<TD>3
     <TR>
          <TD>4<TD>5<TD>6
</TABLE>

Ejemplos con CELLPADDING y CELLSPACING:

 

1	2	3
4	5	6

<TABLE  CELLPADDING="10" CELLSPACING="0" BORDER>
     <TR>
          <TD>1<TD>2<TD>3
     <TR>
          <TD>4<TD>5<TD>6
</TABLE>

1	2	3
4	5	6

<TABLE  CELLPADDING="0" CELLSPACING="10" BORDER>
     <TR>
          <TD>1<TD>2<TD>3
     <TR>
          <TD>4<TD>5<TD>6
</TABLE>

1	2	3
4	5	6

<TABLE  CELLPADDING="10" CELLSPACING="10" BORDER>
     <TR>
          <TD>1<TD>2<TD>3
     <TR>
          <TD>4<TD>5<TD>6
</TABLE>

Ejemplos de alineaciones ALIGN:

 

Cabecera de Título 1	Cabecera de Título 2	Cabecera de Título 3
Celda 1	Celda 2	Celda 3
Celda 4	Celda 5	Celda 6

<TABLE  BORDER>
     <TR>
          <TH ALIGN="center">Cabecera de Título 1 
          <TH ALIGN="center">Cabecera de Título 2 
          <TH ALIGN="center">Cabecera de Título 3
     <TR>
          <TD ALIGN="left">Celda 1 
          <TD ALIGN="center">Celda 2 
          <TD ALIGN="right">Celda 3
     <TR>
          <TD ALIGN="right">Celda 4 
          <TD ALIGN="center">Celda 5 
          <TD ALIGN="left">Celda 6
</TABLE>

Ejemplos de alineaciones verticales VALIGN:

 

Cabecera de Título 1	Cabecera de Título 2	Cabecera de Título 3	Cabecera de Título 4
Celda 1	Celda 2	Celda 3	Celda 4
Celda 5		Celda 7	Celda 8
Celda 9	Celda 10		Celda 12

<TABLE  BORDER>
     <TR>
          <TH ALIGN="center">Cabecera de Título 1
          <TH ALIGN="center">Cabecera de Título 2
          <TH ALIGN="center">Cabecera de Título 3
          <TH ALIGN="center">Cabecera de Título 4
     <TR>
          <TD ALIGN="left">Celda 1
          <TD ALIGN="center">Celda 2
          <TD ALIGN="right">Celda 3
          <TD ALIGN="center">Celda 4
     <TR>
          <TD ALIGN="left"VALIGN="top">Celda 5
          <TD ALIGN="center"><IMG SRC="Imagenes/bibliog.gif">
          <TD ALIGN="right"VALIGN="bottom">Celda 7
          <TD ALIGN="center"VALIGN="middle">Celda 8
     <TR>
          <TD VALIGN="bottom">Celda 9
          <TD VALIGN="middle">Celda 10  
          <TD><IMG SRC="Imagenes/mundog.gif">
          <TD VALIGN="top">Celda 12
</TABLE>

Ejemplos de colores de fondo de las celdas BGCOLOR:

 

Cabecera de Título 1	Cabecera de Título 2	Cabecera de Título 3
Celda 1	Celda 2	Celda 3
Celda 4	Celda 5	Celda 6

<TABLE  BORDER>
     <TR BGCOLOR="yellow">
          <TH>Cabecera de Título 1
          <TH>Cabecera de Título 2  
          <TH>Cabecera de Título 3
     <TR BGCOLOR="white">
          <TD>Celda 1 <TD>Celda 2 <TD>Celda 3
     <TR>
          <TD BGCOLOR="red">Celda 4
          <TD BGCOLOR="white">Celda 5  
          <TD BGCOLOR="green">Celda 6
</TABLE>

Distintos tamaños de tablas:

• WIDHT="10%"

• WIDHT="50%"

• WIDHT="75%"

• WIDHT="100%"