Tablas

AMPLIAR

Crear una tabla

f1-c1 f1-c2 f1-c3
f2-c1 f2-c2 f2-c3

  <TABLE BORDER>

  <TR>

     <TD>f1-c1</TD> 

     <TD>f1-c2</TD> 

     <TD>f1-c3</TD>

  </TR>

  <TR>

     <TD>f2-c1</TD> 

     <TD>f2-c2</TD> 

     <TD>f2-c3</TD>

  </TR>

  </TABLE>

  

Filas con desigual número de celdas

f1-c1 f1-c2 f1-c3
f2-c1 f2-c2

  <TABLE BORDER>

  <TR>

     <TD>f1-c1</TD> 

     <TD>f1-c2</TD> 

     <TD>f1-c3</TD>

  </TR>

  <TR>

     <TD>f2-c1</TD> 

     <TD>f2-c2</TD> 

  </TR>

  </TABLE>

  

Titular una tabla

Título
f1-c1 f1-c2 f1-c3
f2-c1 f2-c2 f2-c3

  <TABLE BORDER>

  <CAPTION>T&iacute;tulo</CAPTION>

  <TR>

     <TD>f1-c1</TD> 

     <TD>f1-c2</TD> 

     <TD>f1-c3</TD>

  </TR>

  <TR>

     <TD>f2-c1</TD> 

     <TD>f2-c2</TD> 

     <TD>f2-c3</TD>

  </TR>

  </TABLE>

  

Grosor de los bordes

f1-c1 f1-c2 f1-c3
f2-c1 f2-c2 f2-c3

  <TABLE>

  <TR>

     <TD>f1-c1</TD> 

     <TD>f1-c2</TD> 

     <TD>f1-c3</TD>

  </TR>

  <TR>

     <TD>f2-c1</TD> 

     <TD>f2-c2</TD> 

     <TD>f2-c3</TD>

  </TR>

  </TABLE>

  
f1-c1 f1-c2 f1-c3
f2-c1 f2-c2 f2-c3

  <TABLE BORDER=5>

  <TR>

     <TD>f1-c1</TD> 

     <TD>f1-c2</TD> 

     <TD>f1-c3</TD>

  </TR>

  <TR>

     <TD>f2-c1</TD> 

     <TD>f2-c2</TD> 

     <TD>f2-c3</TD>

  </TR>

  </TABLE>

  

Celdas de cabecera

cabecera1 f1-c1 f1-c2 f1-c3
cabecera2 f2-c1 f2-c2 f2-c3

  <TABLE BORDER>

  <TR>

     <TH>cabecera1</TH> 

     <TD>f1-c1</TD> 

     <TD>f1-c2</TD> 

     <TD>f1-c3</TD>

  </TR>

  <TR>

     <TH>cabecera2</TH> 

     <TD>f2-c1</TD> 

     <TD>f2-c2</TD> 

     <TD>f2-c3</TD>

  </TR>

  </TABLE>

  

Contenido de las celdas

f1-c1 devil.gif dos
f2-c1 f2-c2 f2-c3

  <TABLE BORDER>

  <TR>

     <TD>f1-c1</TD> 

     <TD><IMG SRC="devil.gif"></TD>

     <TD><A HREF="tablas.htm">dos</A></TD>

  </TR>

  <TR>

     <TD>f2-c1</TD> 

     <TD>f2-c2</TD> 

     <TD>f2-c3</TD>

  </TR>

  </TABLE>

  

Posicionamiento del contenido dentro de la celda

f1-c1 devil.gif cero
uno dos trescientos

  <TABLE BORDER>

  <TR>

     <TD VALIGN=bottom>f1-c1</TD> 

     <TD><IMG SRC="devil.gif"></TD>

     <TD VALIGN=top ALIGN=right>

            cero</TD>

  </TR>

  <TR>

     <TD>uno</TD> 

     <TD ALIGN=center>dos</TD> 

     <TD>trescientos</TD>

  </TR>

  </TABLE>

  

Variando las dimensiones de la tabla

f1-c1 devil.gif cero
uno dos trescientos

  <TABLE BORDER WIDTH=80% HEIGHT=250>

  <TR>

     <TD VALIGN=bottom>f1-c1</TD> 

     <TD><IMG SRC="devil.gif"></TD>

     <TD VALIGN=top ALIGN=right>cero</TD>

  </TR>

  <TR>

     <TD>uno</TD> 

     <TD ALIGN=center>dos</TD> 

     <TD>trescientos</TD>

  </TR>

  </TABLE>

  

Celdas que abarcan a otras varias

f1-c1 f1-c3
f2-c1 f2-c2 f2-c3
f3-c1 f3-c2

  <TABLE BORDER>

  <TR>

     <TD COLSPAN=2>f1-c1</TD> 

     <TD>f1-c3</TD>

  </TR>

  <TR>

     <TD>f2-c1</TD> 

     <TD>f2-c2</TD> 

     <TD ROWSPAN=2>f2-c3</TD> 

  </TR>

  <TR>

     <TD>f3-c1</TD> 

     <TD>f3-c2</TD> 

  </TR>

  </TABLE>

  

Color de fondo en las tablas

f1-c1 f1-c2 f1-c3
f2-c1 f2-c2 f2-c3

  <TABLE BORDER BGCOLOR=#80d050>

  <TR>

     <TD>f1-c1</TD> 

     <TD BGCOLOR=#e03090>f1-c2</TD> 

     <TD>f1-c3</TD>

  </TR>

  <TR>

     <TD>f2-c1</TD> 

     <TD>f2-c2</TD> 

     <TD>f2-c3</TD>

  </TR>

  </TABLE>

  

Imagen de fondo en las tablas

f1-c1 f1-c2 f1-c3
f2-c1 f2-c2 f2-c3

  <TABLE BORDER BACKGROUND=lib/fondo.jpg 

                CELLPADDING=20>

  <TR>

     <TD>f1-c1</TD> 

     <TD>f1-c2</TD> 

     <TD>f1-c3</TD>

  </TR>

  <TR>

     <TD>f2-c1</TD> 

     <TD>f2-c2</TD> 

     <TD>f2-c3</TD>

  </TR>

  </TABLE>

  

Separación entre las celdas

f1-c1 f1-c2 f1-c3
f2-c1 f2-c2 f2-c3

  <TABLE BORDER CELLSPACING=10>

  <TR>

     <TD>f1-c1</TD> 

     <TD>f1-c2</TD> 

     <TD>f1-c3</TD>

  </TR>

  <TR>

     <TD>f2-c1</TD> 

     <TD>f2-c2</TD> 

     <TD>f2-c3</TD>

  </TR>

  </TABLE>

  

Separación entre borde y contenido

f1-c1 f1-c2 f1-c3
f2-c1 f2-c2 f2-c3

  <TABLE BORDER CELLPADDING=10>

  <TR>

     <TD>f1-c1</TD> 

     <TD>f1-c2</TD> 

     <TD>f1-c3</TD>

  </TR>

  <TR>

     <TD>f2-c1</TD> 

     <TD>f2-c2</TD> 

     <TD>f2-c3</TD>

  </TR>

  </TABLE>

  

Resumen

TABLE Crear una tabla.
BORDER Grosor de los bordes. Defecto 1.
WIDTH Ancho de la tabla.
Valores: Porcentaje de la pantalla o número de pixels.
HEIGHT Altura de la tabla.
Valores: Porcentaje de la pantalla o número de pixels.
BGCOLOR Color de fondo de la tabla.
BACKGROUND Imagen en el fondo de la tabla (Sólo Explorer).
BORDERCOLOR Color de los bordes. Sólo algunos visores.
CELLSPACING Separación entre celdas. Defecto 2.
CELLPADDING Separación entre bordes y contenidos. Defecto 1.
ALIGN Alineación de la tabla en la página (left,center,right).
El texto rodea la tabla.
El valor center soportado sólo por algunos visores.
TR Crear una fila nueva.
ALIGN Alineación horizontal (left,center,right). Defecto left.
VALIGN Alineación vertical (top,middle,bottom). Defecto center.
BGCOLOR Color de fondo de la fila.
BACKGROUND Imagen en el fondo de la fila (Sólo Explorer).
BORDERCOLOR Color de los bordes. Sólo algunos visores.
TD Crear una celda en una fila.
ALIGN Alineación horizontal (left,center,right). Defecto left.
VALIGN Alineación vertical (top,middle,bottom). Defecto center.
COLSPAN Expandir una celda sobre varias columnas.
ROWSPAN Expandir una celda sobre varias filas.
BGCOLOR Color de fondo de la celda.
BACKGROUND Imagen en el fondo de la celda (Solo Explorer).
NOWARP Fuerza texto en una misma línea si no entra en conflicto con width.
TH Crear una celda de cabecera.
CAPTION Titular una tabla.
ALIGN Situación del título (top,bottom).

Nota: </TR>, </TD> y </TH> son opcionales.