Tablas en html

TABLAS EN HTML

Etiqueta <TABLE> y sus atributos. |
<TABLE> y </TABLE> son las etiquetas principales de definición de una tabla, que acotan el espacio en el que podemos definir filas y celdas. Sus principales atributos son: * WIDTH="p", donde p puede venir expresado en píxeles ó en tanto por ciento (%). Este atributo determina la anchura que va a tener la tabla. Si ledamos un valor en píxeles la anchura será absoluta, con esa medida independientemente del tamaño de la pantalla o del elemento que contenga la tabla, mientras que si le damos un valor en % la anchura será relativa al tamaño de pantalla ó del elemento que contenga la tabla. Así, si queremos que la tabla ocupe toda la ventana del navegador, bastará con especificar WIDTH="100%". |
<TABLEWIDTH="100" BORDER="1">
   <TR>
     <TD>UNO</TD>
     <TD>DOS</TD>
    </TR>
 </TABLE> | |
UNO | DOS |
|
<TABLE WIDTH="50%" BORDER="1">
   <TR>
     <TD>UNO</TD>
     <TD>DOS</TD>
   </TR>
 </TABLE> | |
UNO | DOS |
|
<TABLE WIDTH="100%" BORDER="1">
   <TR>     <TD>UNO</TD>
     <TD>DOS</TD>
   </TR>
 </TABLE> |
UNO | DOS |
|
* HEIGHT= "p", donde p puede venir expresado como un entero (píxeles) ó como tanto por ciento (%). Este atributo nos permite determinar lo alta que va a ser la tabla, y con él ocurre ocurre igual que con WIDTH en lo que respecta a los valores abolutos (píxeles) y relativos (%). Normalmente el alto dela tabla no se especifica, ya que su valor lo va a determinar el texto y/o las imágenes que vamos a introducir en las celdas de la misma. |
Ejemplo-

<TABLE WIDTH="100" HEIGHT="100" BORDER="1">
   <TR>
     <TD>UNO</TD>
     <TD>DOS</TD>
    </TR>
 </TABLE> | UNO | DOS |
|
* BORDER= "n", donde n es un número entero. Este atributova a permitir que veamos los bordes de la tabla y de las celdas que la componen, que van a tener una anchura de n píxeles, Si no se usa este atributo no veremos los bordes, ya que su valor por defecto es BORDER=0.Las celdas sin contenido no apareceran con bordes, por lo que si queremos que se muestren deberemos insertar en la celda un gif transparente de 1x1 píxeles, un espacio ( ) o unaetiqueta <BR>. |
Ejemplo-

<TABLE WIDTH="100" BORDER="0">
   <TR>
     <TD>UNO</TD>
     <TD>DOS</TD>
    </TR>
 </TABLE> | UNO | DOS |
|
<TABLE WIDTH="100" BORDER="5">
   <TR>
     <TD>UNO</TD>
     <TD>DOS</TD>
    </TR>
 </TABLE> | UNO | DOS |
|
* BORDERCOLOR="color", donde color puede venir expresado mediante su nombre web en inglés ó mediante su código hexadecimal. Nótense las comillas que encierran la definición del color.Este atributo nos permite definir el color en que se verá el borde, pero mientras que en Iexplorer se verán de ese color tanto los bordes exteriores de la tabla como los interiores de las celdas, en Nestcape sólo se veran del colorespecificado los bordes exteriores de la tabla, permaneciendo los interiores del color gris predeterminado. Otra diferencia entre ambos navegadores es que en Iexplorer se ven los bordes lisos, mientras que en Nestcape se ven con estilo sólido.Lógicamente, para que se vean los bordes de color esta etiqueta debe ir acompañada de BORDER=1,2,…., esa decir, tenemos que haber definido previamente un anchode borde. Además, existen dos atributos de color de borde que sólo se ven en Iexplorer:

- BORDECOLORDARK, que establece los colores exteriores del borde derecho y del borde inferior y los interiores del borde izquierdo y del borde superior.
- BORDECOLORLIGHT, que los establece al contrario. |
Ejemplos.-

<TABLE BORDER="1" BORDERCOLOR="red" CELLSPACING="0">
  <TR>...