¡Bienvenido a los Foros de Univision! Participa, intercambia mensajes privados, sube tus fotos y forma parte de nuestra Comunidad. | Ingresa | Regístrate Gratis
Responder
Cristal
kubanito113
Mensajes: 6,867
Registrado: ‎03-26-2004

~~APRENDE A CREAR TUS PROPIAS TABLAS DE HTML~~

Hola amigos aki les traigo un tutorial muy bueno este tutorial fue echo por lesthat
antigua lider del foro de paginas web asi ke eh decidido ponerselos aki a uds espero que les sirva.

Introducción a las tablas

Las tablas son una de las herramientas mas útiles de que disponemos en HTML, ya que nos van a permitir en cierto modo "maquetar" nuestro documento, ayudandonos a situar dentro del mismo los diferentes elementos que lo componen, siendo esta la única forma coherente de distribución que había antes de la introducción de las Hojas de Estilo y de las capas.

Es por esta facilidad a la hora de organizar con tablas nuestras paginas el que el 99% de las que veamos en Internet las usen, aunque muchas veces no las veamos directamente porque estan "ocultas".

Pero no todo es coser y cantar a la hora de trabajar con tablas, ya que a veces actúan un poco "a su aire", por lo que podemos llegar a desesperarnos al pasar varias horas intentando que una tabla se comporte como nosotros queremos. Esto es debido a que en el origen del lenguaje HTML las tablas fueron diseñadas por científicos de las universidades para contener y organizar información, no como una ayuda para el diseño grafico de la pagina, ya que en esa época el lenguaje y las paginas web se concebían como una forma de transmitir texto plano, en monitores monocromos y de poca resolución, y no fué hasta el posterior desarrollo de Internet, de la WWW y de la tecnología de ordenadores personales avanzados cuando se empezó a tener en cuenta la importancia del diseño visual de una pagina web como un medio global para transmitir no solo texto plano, si no tambien contenidos graficos y multimedia.

Para solucionar estas carencias hace falta conocer bien todas las etiquetas y atributos de que disponemos para la creación de tablas, así como unos cuantos truquillos que veremos mas en el desarrollo de este capítulo.



Cristal
kubanito113
Mensajes: 6,867
Registrado: ‎03-26-2004

Re: ~~APRENDE A CREAR TUS PROPIAS TABLAS DE HTML~~

Estructura de una tabla

Las tablas estan formadas por filas, columnas y celdas. Cada espacio horizontal continuado es una fila y cada espacio vertical continuado es una columna, definiéndose una celda como el espacio formado por la intersección de una fila y una columna.

columna 1 columna 2 columna 3
fila 1
celda(1,1) celda(1,2) celda(1,2)
celda(2,1) celda(2,2) celda(2,3)
celda(3,1) celda(3,2) celda(3,3)
fila 2
fila 3

Lo primero que tenemos que hacer cuando queremos introducir una tabla es decirle al navegador dónde empieza y dónde acaba esta; esto se consigue mediante la etiqueta de inicio <TABLE> y su correspondiente de cierre </TABLE>.

Seguidamente debemos decirle cuantas filas vamos a tener en nuestra tabla, cosa que hacemos con las etiqueta de inicio de fila <TR>> y su correspondiente de cierre de fila</TR>, por lo que deberenos insertar una pareja de etiquetas por cada fila que queramos que tenga la tabla.

Por último, dentro de cada fila deberemos indicar cuantas celdas va a haber, que inicialmente deben corresponderse con el número de columnas que deseemos tenga la tabla. Esto se consigue mediante las parejas de etiquetas <TD> y </TD>.

De esta forma, y siguiendo con nuestra tabla inicial de Ejemplo, el esquema de etiquetas sería el siguiente:

<TABLE>
<TR>
<TD>...</TD> <TD>...</TD> <TD>...</TD>
<TD>...</TD> <TD>...</TD> <TD>...</TD>
<TD>...</TD> <TD>...</TD> <TD>...</TD>
</TR>
<TR> </TR>
<TR> </TR>
</TABLE>

Este es el esquema general de toda tabla simple, que traducido a código HTML quedaría de la forma:


<TABLE>
  <TR>
    <TD> celda(1,1) </TD>
    <TD> celda(1,2) </TD>
    <TD> celda(1,3) </TD>
  </TR>
  <TR>
    <TD> celda(2,1) </TD>
    <TD> celda(2,2) </TD>
    <TD> celda(2,3) </TD>
  </TR>
  <TR>
    <TD> celda(3,1) </TD>
    <TD> celda(3,2) </TD>
    <TD> celda(3,3) </TD>
  </TR>
</TABLE>

La visualización de una tabla se genera automaticamente a partir de las filas y las columnas definidas. Sin embargo para un navegador no es facil interpretar a tiempo como debe aparecer la tabla. Primero tiene que leer la tabla completa antes de poder visualizar alguna cosa. En caso de tablas muy grandes eso puede conducir a que en la pantalla aparecen espacios vacios desagradables mientras que la pagina se carga. HTML 4.0 ofrece una nueva sintaxis para comunicarle al navegador al principio de la tabla cuantas columnas tiene. De esta manera el navegador puede cargar la tabla mucho mas rapido, o sea que una parte de la tabla es visualizada antes de que la totalidad de la tabla haya sido leída. Esto se debe implementar mediante las etiquetas <COLGROUP>...</COLGROUP> y sus hijas <COLS>. No obstante, estas etiquetas, que veremos mas adelante, sólo son compatibles con Internet Explorer, cosa que las hace desaconsejables para nuestras paginas, pués debemos siempre crear paginas compatibles con todos los navegadores de cuarta generación y todas las resoluciones habituales.

Ademas de estas etiquetas basicas existen otras varias que nos van a permitir adaptar la tabla a nuestras necesidades. Y cada etiqueta posee ademas varios atributos, que van a modificar la forma en que se comportan, que empezaremos a ver en el próximo capítulo.



Cristal
kubanito113
Mensajes: 6,867
Registrado: ‎03-26-2004

Re: ~~APRENDE A CREAR TUS PROPIAS TABLAS DE 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 le damos un valor en píxeles la anchura sera 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 sera relativa al tamaño de pantalla ó del elemento que contenga la tabla. Así, si queremos que la tabla ocupe toda la ventana del navegador, bastara con especificar WIDTH="100%".

<TABLE WIDTH="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 de la tabla no se especifica, ya que su valor lo va a determinar el texto y/o las imagenes 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 atributo va 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 (&nbsp o una etiqueta <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 vera el borde, pero mientras que en Iexplorer se veran de ese color tanto los bordes exteriores de la tabla como los interiores de las celdas, en Nestcape sólo se veran del color especificado 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,., es decir, tenemos que haber definido previamente un ancho de borde. Ademas, existen dos atributos de color de borde que sólo se ven en Internet Explorer:

- 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>
    <TD>UNO</TD>
     <TD>DOS</TD>
  </TR>
</TABLE>
UNO DOS
<TABLE BORDER="5" BORDERCOLOR="#003366" CELLSPACING="0">
  <TR>
    <TD>UNO</TD>
     <TD>DOS</TD>
  </TR>
</TABLE>


Cristal
kubanito113
Mensajes: 6,867
Registrado: ‎03-26-2004

Re: ~~APRENDE A CREAR TUS PROPIAS TABLAS DE HTML~~

Etiqueta <TABLE> y sus atributos. (continuación I...)

* BGCOLOR= "color", donde color va a venir expresado lo mismo que ocurría en BORDERCOLOR, es decir, o mediante su nombre web en inglés o mediante su código hexadecimal. Con este atributo podemos definir el color de fondo que va a tener la tabla.
Ejemplos.-

<TABLE BORDER="1" BGCOLOR="red">
   <TR>
     <TD>UNO</TD>
     <TD>DOS</TD>
    </TR>
 </TABLE>
UNO DOS
<TABLE BGCOLOR="#66FFFF">
   <TR>
     <TD>UNO</TD>
     <TD>DOS</TD>
    </TR>
 </TABLE>
UNO DOS
* BACKGROUND= "ruta imagen", que nos va a permitir establecer una imagen de fondo para toda la tabla, y en donde "ruta imagen" va a ser la ruta de directorios o una URL de Internet en la que se encuentra la imagen . Así, si tenemos nuestra pagina colgando del directorio raiz de la aplicación web y dentro de este hay una carpeta "images" que contiene a nuestra imagen de fondo "fondo1.gif", la sintaxis correcta sería:
<TABLE WIDTH="200" HEIGHT="750" BORDER="1" BACKGROUND="images/fondo1.gif">
   <TR>
     <TD>UNO</TD>
     <TD>DOS</TD>
    </TR>
 </TABLE>
UNO DOS
mientras que si la imagen se encuentra en un servidor web, deberemos escribir: (es solo un ejemplo, ya que la ruta depende del servidor):

<TABLE WIDTH="200" HEIGHT="750" BORDER="1"
BACKGROUND="http://www.miservidor.com/midirectorio/images/fondo1.gif">    <TR>
     <TD>UNO</TD>
     <TD>DOS</TD>
    </TR>
 </TABLE>

con lo que obtendríamos el mismo resultado que en el Ejemplo anterior, aunque no es recomendable utilizar imagenes que estén en directorios que no controlemos personalmente, ya que si la persona responsable del mismo elimina la imagen nuestra tabla no se vera correctamente.
* CELLSPACING= "n", donde n es un número entero. Nos permite establecer el espacio que va a haber entre las celdas, con lo que podemos dar una mayor o menor separación a las mismas, determinado por n=nº de píxeles entre ellas. Si la tabla esta definida con bordes, este atributo modificara en grosor del borde interior de la misma.
Ejemplos.-

<TABLE BORDER="1" CELLSPACING="0">
   <TR>
     <TD>UNO</TD>
     <TD>DOS</TD>
    </TR>
 </TABLE>
UNO DOS

<TABLE BORDER="1" CELLSPACING="3">
   <TR>
     <TD>UNO</TD>
     <TD>DOS</TD>
    </TR>
 </TABLE>
UNO DOS
* CELLPADDING= "n", con n=nº entero=nº de píxeles. Este valor nos va a determinar el espacio interior en las celdas, es decir, el espacio que habra entre los bordes de la celda y el texto, imagen o componente que hay dentro de esta.

Ejemplos.-
<TABLE BORDER="1" CELLPADDING="0">
   <TR>
     <TD>UNO</TD>
     <TD>DOS</TD>
    </TR>
 </TABLE>
UNO DOS
<TABLE BORDER="1" CELLPADDING="10">
   <TR>
     <TD>UNO</TD>
     <TD>DOS</TD>
    </TR>
 </TABLE>
UNO DOS
*ALIGN= "a". Este atributo nos va a permitir alinear la tabla respecto a la pantalla activa o respecto al elemento que contiene a la tabla, dependiendo de los posibles valores del atributo a, que son:
- a=LEFT alinea la tabla a la izquierda. Es el valos por defecto.
- a=CENTER situa la tabla en el centro .
- a=RIGHTsitua la tabla a la derecha del elemento contenedor.
Ejemplos.-

<TABLE BORDER="1" ALIGN="LEFT">
  <TR>
    <TD>UNO</TD>
     <TD>DOS</TD>
  </TR>
</TABLE>
UNO DOS
<TABLE BORDER="1" ALIGN="center">
  <TR>
    <TD>UNO</TD>
     <TD>DOS</TD>
  </TR>
</TABLE>
UNO DOS
<TABLE BORDER="1" ALIGN="right">
  <TR>
    <TD>UNO</TD>
     <TD>DOS</TD>
  </TR>
</TABLE>
UNO DOS


 


Cristal
kubanito113
Mensajes: 6,867
Registrado: ‎03-26-2004

Re: ~~APRENDE A CREAR TUS PROPIAS TABLAS DE HTML~~

Etiqueta <TABLE> y sus atributos. (continuación II...)

* FRAME=" void / above / below / hsides /lhs / rhs / vsides / box /border ". Este atributo es complementario a BORDER y sólo funciona con Internet Explorer, y posibilita, en una tabla con bordes, especificar cual o cuales de los exteriores seran visibles. Podemos especificar pués:
- void - no se ven los bordes.
- above - borde superior.
- below - borde inferior.
- hsides - bordes superior e inferior.>
- lhs - borde izquierdo.
- rhs - borde derecho.
- vsides - bordes laterales.
- box - todos los bordes.
- border - todos los bordes.

Ejemplos.- (Sólo para Explorer)

 

<TABLE BORDER="1" CELLSPACING="0" FRAME="above">
   <TR>
     <TD>UNO</TD>
     <TD>DOS</TD>
    </TR>
 </TABLE>
UNO DOS
<TABLE BORDER="1" CELLSPACING="0" FRAME="vsides">
   <TR>
     <TD>UNO</TD>
     <TD>DOS</TD>
    </TR>
 </TABLE>
UNO DOS
*RULES= "none / groups / rows / cols / all ". Complementa al atributo BORDER, y permite especificar qué bordes internos se veran.Sólo funciona en Internet Explorer.
- none - no se ven los bordes interiores.
- groups - muestra los bordes entre los grupos de tabla, especificados mediante las etiquetas    <THEAD> <TBODY>, <TFOOT> y <COLGROUP>.
- rows - muedtra los bordes entre filas
- cols - muestra los ordes entre columnas.
- all - muestra todos los bordes interiores.
- basic -genera líneas divisorias entre THEAD, TFOOT y TBODY.

Ejemplos.- (Sólo para Explorer)
<TABLE BORDER="1" RULES="rows">
   <TR>
     <TD>UNO</TD>
     <TD>DOS</TD>
    </TR>
   <TR>
     <TD>UNO</TD>
     <TD>DOS</TD>
    </TR>
 </TABLE>
UNO DOS
UNO DOS

<TABLE BORDER="1" RULES="cols">
   <TR>
     <TD>UNO</TD>
     <TD>DOS</TD>
    </TR>
   <TR>
     <TD>UNO</TD>
     <TD>DOS</TD>
    </TR>
 </TABLE>
UNO DOS
UNO DOS

* HSPACE= "p ", donde p=nº entero=nº píxeles. Permite especificar el espacio horizontal que habra entre la tabla y el texto circundante.Permite añadir mas espacio a la derecha y a la izquierda de la tabla, entre el borde y el contexto.
* VSPACE= "p ", donde p=nº entero=nº píxeles. Permite especificar el espacio vertical que habra entre la tabla y el texto circundante. Permite añadir mas espacio arriba y abajo de la tabla, entre el borde y el contexto.
* SUMMARY="descripcion". Permite introducir un resumen, o un comentario para especificar el objeto y / o contenido de la tabla. No se muestra en el navegador.
* CHAR= " char ", donde char es un caracter de determinado por nosotros. Este atributo define el el caracter que queremos usar como referencia para alinear el texto de las celdas de la tabla, es decir, especifica el caracter sobre el que se alineara la celda. Solamente vale si en ALIGN se ha puesto el valor "char".
* CHAROFF="n". Asume un valor cuantitativo (en unidades o porcentaje) que especifica la compensación del caracter de alineación. Solamente vale si en ALIGN se ha puesto el valor "char.
* STYLE="atributo:valor;atributo:valor;". Especifica información de estilo sobre un simple elemento del documento. Este atributo y sus parametros vienen de las especificaciones del W3C sobre Cascading Style Sheet (Hojas de Estilo en Cascada), y con él se puede modificar completamente la presentación de la tabla y de su contenido. Alguno de sus atributos y valores sólo se ven en Internet Explorer.
<TABLE BORDER="1" ALIGN="center" STYLE="background-color:yellow;font-size:12pt; text-align:center;">
   <TR>
     <TD>UNO</TD>
     <TD>DOS</TD>
    </TR>
   <TR>
     <TD>UNO</TD>
     <TD>DOS</TD>
    </TR>
 </TABLE>
UNO DOS
UNO DOS

* TITLE="titulo", para titular un documento o una sección del mismo. Algunos programas visores pueden colocar el valor de este atributo como texto insertado o audio.
* CLASS="clase". En la actualidad se utiliza según las especificaciones del W3C para establecer una clase de estilos a la tabla y su contenido. Para mas información consultar manuales de CSS.
* ID="nombre". Analogo al atributo CLASS, pero identifica la tabla como un objeto único, con sus atributos de estilo definidos en línea mediante el atributo STYLE, en la cabecera del documento HTML o en un archivo externo de extensión .css. Ver manuales de CSS.
* DIR="direccion". Se usa para indicar la dirección del texto y de las columnas. Asume los valores: ltr (de izquierda a derecha) y rtl (derecha a izquierda). Cuando el valor es rtl, el ordenamiento de las columnas comenzara por el tope arriba a la derecha.
 



Cristal
kubanito113
Mensajes: 6,867
Registrado: ‎03-26-2004

Re: ~~APRENDE A CREAR TUS PROPIAS TABLAS DE HTML~~

Etiqueta <TR> y sus atributos.

<TR>.</TR>. Esta pareja de etiquetas es necesaria para especificar y delimitar cada una de las filas que va a tener la tabla, y entre ellas iran las parejas de etiquetas <td>.</td> y <th>.</th>, que veremos mas adelante.
Sus principales atributos son:
* BGCOLOR= " color", donde color puede venir en su nombre web en inglés o en su valor hexadecimal. al igual que con la etiquetas <TABLE> y <TR>, este atributo va a esTABLEcer el color del fondo de cada celda, prevaleciendo este color sobre el que hayamos definido para la tabla en conjunto y para la fila en general.

Ejemplos.-
<TABLE BORDER="0" BGCOLOR="#CCFF00">
   <TR BGCOLOR="orange">
     <TD>UNO</TD>
     <TD>DOS</TD>
    </TR>
   <TR>
     <TD>UNO</TD>
     <TD>DOS</TD>
    </TR>
 </TABLE>
UNO DOS
UNO DOS
* ALIGN = " left /center /right / justify / char ". Este atributo va a definir si el texto o la imagen que va a ir en cada celda de esa fila van a estar alineados a la izquierda, en el centro o a la derecha de cada celda. Su valor por defecto es LEFT, por lo que si no especificamos nada las celdas de la fila apareceran alineadas a la izquierda.

Ejemplo-
<TABLE BORDER="1" WIDTH="200">
   <TR ALIGN = "center ">
     <TD WIDTH="100">UNO</TD>
     <TD WIDTH="100">DOS</TD>
    </TR>
   <TR ALIGN = "right ">
     <TD WIDTH="100">UNO</TD>
     <TD WIDTH="100">DOS</TD>
    </TR>
 </TABLE>
UNO DOS
UNO DOS

* VALIGN = " top / middle / baseline / bottom ". Nos permite alinear verticalmente el contenido de las celdas de la fila en la parte superior, en medio, a la altura del texto de la celda colindante o abajo respectivamente.

Ejemplo-
<TABLE BORDER="1" WIDTH="200" HEIGHT="150">
   <TR WIDTH="100" VALIGN = "top ">
     <TD>UNO</TD>
     <TD>DOS</TD>
    </TR>
   <TR WIDTH="200" VALIGN = "bottom ">
     <TD>UNO</TD>
     <TD>DOS</TD>
    </TR>
 </TABLE>
UNO DOS
UNO DOS

* SUMMaRY="descripcion". Permite introducir un resumen, o un comentario para especificar el objeto y / o contenido de la fila de la tabla. No se muestra en el navegador.
* CHaR= " char ", donde char es un caracter de determinado por nosotros. Este atributo define el el caracter que queremos usar como referencia para alinear el texto de las celdas de la fila, es decir, especifica el caracter sobre el que se alineara la celda. Solamente vale si en ALIGN se ha puesto el valor "char".
* CHaROFF="n". asume un valor cuantitativo (en unidades o porcentaje) que especifica la compensación del caracter de alineación. Solamente vale si en ALIGN se ha puesto el valor "char.
* STYLE="atributo:valor;atributo:valor;.". Especifica información de estilo sobre las celdas de la fila. Este atributo y sus parametros vienen de las especificaciones del W3C sobre Cascading Style Sheet (Hojas de Estilo en Cascada), y con él se puede modificar completamente la presentación de la tabla y de su contenido. alguno de sus atributos y valores sólo se ven en Internet Explorer.
<TABLE BORDER="1" ALIGN="center">
   <TR STYLE="background-color:yellow;font-size:12pt; text-ALIGN:center;">
     <TD>UNO</TD>
     <TD>DOS</TD>
    </TR>
   <TR>
     <TD>UNO</TD>
     <TD>DOS</TD>
    </TR>
 </TABLE>
UNO DOS
UNO DOS

* TITLE="titulo", para titular un documento o una sección del mismo. algunos programas visores pueden colocar el valor de este atributo como texto insertado o audio.
* CLaSS="clase". En la actualidad se utiliza según las especificaciones del W3C para esTABLEcer una clase de estilos a la fila y su contenido. Para mas información consultar manuales de CSS.
* ID="nombre". analogo al atributo CLaSS, pero identifica la fila como un objeto único, con sus atributos de estilo definidos en línea mediante el atributo STYLE, en la cabecera del documento HTML o en un archivo externo de extensión .css. Ver manuales de CSS.
* DIR="direccion". Se usa para indicar la dirección del texto y de las columnas. asume los valores: ltr (de izquierda a derecha) y rtl (derecha a izquierda). Cuando el valor es rtl, el ordenamiento de las columnas comenzara por el tope arriba a la derecha.

7 <THEaD> <TBODY> <TFOOT> . La etiqueta <THEaD> introduce la cabecera de la tabla. Después de la etiqueta puede situarse una fila o mas de la tabla pertenecientes a la cabecera de la tabla, cerrandose luego la misma con la etiqueta</THEaD>.

El cuerpo de la tabla se introduce con la etiqueta<TBODY>. Después de la etiqueta puede anotar el campo para los datos de la tabla, o sea su cuerpo. Con </TBODY> se cierra el cuerpo de la tabla.

El pie de la tabla lo introduce con la etiqueta <TFOOT>. Después de la etiqueta puede anotar una fila o mas pertenecientes al pie de la tabla. Con </TFOOT> cierra el pie de la tabla.

La utilidad de estas etiquetas es mas bien estructural que practica, ya que su misión es subdividir en el código la tabla en secciones, con lo que resulta mas claro en su lectura.< /P>



Cristal
kubanito113
Mensajes: 6,867
Registrado: ‎03-26-2004

Re: ~~APRENDE A CREAR TUS PROPIAS TABLAS DE HTML~~

Etiquetas <TD> <TH> y sus atributos.

<TD></TD>, <TH></TH>. Con esta pareja de etiquetas definiremos y delimitaremos cada una de las celdas de las filas de la tabla. Las dos parejas de etiquetas son equivalentes, siendo su diferencia que mediante <TH></TH> definiremos encabezados de columna, por lo que el texto que figure en su interior aparecera en negrita y centrado.
Los principales atributos son:
* BGCOLOR= " color", donde color puede venir en su nombre web en inglés o en su valor hexadecimal. Al igual que con la etiquetas <TABLE> y <TR>, este atributo va a establecer el color del fondo de cada celda, prevaleciendo este color sobre el que hayamos definido para la tabla en conjunto y para la fila en general.

Ejemplos.-
<TABLE BORDER="0" BGCOLOR="blue">
   <TR BGCOLOR="orange">
     <TD BGCOLOR="#003366">UNO</TD>
     <TD>DOS</TD>
    </TR>
   <TR>
     <TD>UNO</TD>
     <TD BGCOLOR="red">DOS</TD>
    </TR>
 </TABLE>
UNO DOS
UNO DOS
* BACKGROUND= " ruta de imagen ", donde ruta de imagen puede ser la ruta relativa en el directorio de archivos del servidor o una URL de Internet dónde se encuentra la imagen. Este atributo es del todo analogo al de las etiquetas <TABLE>> y <TR>, tiene sus mismas limitaciones respecto a especificar una ruta URL y nos permite definir una imagen de fondo para toda una fila.
Hay que tener mucho cuidado, ya que la imagen utilizada debe ser del mismo tamaño que la fila de la tabla, ya que si no el efecto no sera el correcto.

Ejemplo-
<TABLE BORDER="1">
   <TR>
     <TD BACKGROUND= "fondo1.gif ">UNO</TD>
     <TD>DOS</TD>
    </TR>
   <TR>
     <TD>UNO</TD>
     <TD BACKGROUND= "fondo1.gif ">DOS</TD>
    </TR>
 </TABLE>
UNO DOS
UNO DOS
* ALIGN = " left /center /right / justify / char ". Este atributo va a definir si el texto o la imagen que va a ir en la celda va a estar alineados a la izquierda, en el centro o a la derecha de cada celda. Su valor por defecto es LEFT, por lo que si no especificamos nada el contenido de la celda aparecera alineado a la izquierda.

Ejemplo-
<TABLE BORDER="1" WIDTH="200">
   <TR >
     <TD WIDTH="100" ALIGN = "center ">UNO</TD>
     <TD WIDTH="100">DOS</TD>
    </TR>
   <TR >
     <TD WIDTH="100">UNO</TD>
     <TD WIDTH="100" ALIGN = "right ">DOS</TD>
    </TR>
 </TABLE>
UNO DOS
UNO DOS



Cristal
kubanito113
Mensajes: 6,867
Registrado: ‎03-26-2004

Re: ~~APRENDE A CREAR TUS PROPIAS TABLAS DE HTML~~

* VALIGN = " top / middle / baseline / bottom ". Nos permite alinear verticalmente el contenido de la celda en la parte superior, en medio, que todas las celdas sean alineadas a una línea base común (o sea, de tal manera que el primer renglón de cada celda comienza a una misma altura) o abajo respectivamente. Su valor por defecto es MIDDLE, situando el contenido de la celda verticalmente en medio de la misma

Ejemplo-
<TABLE BORDER="1" WIDTH="200" HEIGHT="150">
   <TR>
     <TD VALIGN = "top">UNO</TD>
     <TD>DOS</TD>
    </TR>
   <TR>
     <TD>UNO</TD>
     <TD VALIGN = "bottom">DOS</TD>
    </TR>
 </TABLE>
UNO DOS
UNO DOS

* WIDTH= "n", donde n=nº de píxeles ó tanto por ciento. Con este atributo se especifica el ancho que va a tener cada celda. Si queremos que las celdas sean del mismo tamaño es necesario que especifiquemos el ancho en tanto por ciento, ya que si no es así, dependiendo del espacio que necesite el contenido de la celda, esta se ampliara por sí sola.
* HEIGHT= "n", donde n=nº de píxeles ó tanto por ciento. Con este atributo se especifica el alto que va a tener cada celda. Normalmente el alto de la celda se suele dejar que lo coja ella misma, adptandose a las necesidades del texto o imagen que contiene. La especificación HEIGHT, al contrario de la especificación WIDTH, no es estandar HTML, sin embargo es interpretada por los navegadores que interpretan tablas.

Ejemplos.-
<TABLE WIDTH="50%" ALIGN="right" BORDER="1">
   <TR>
     <TD WIDTH="50%">UNO</TD>
     <TD WIDTH="50%">DOS</TD>
    </TR>
 </TABLE>
UNO DOS

<TABLE WIDTH="75%" HEIGHT="40" ALIGN="center" BORDER="3">
   <TR>
     <TD WIDTH="25%">UNO</TD>
     <TD WIDTH="75%">DOS</TD>
    </TR>
 </TABLE>
UNO DOS

*ROWSPAN= "n". donde n = nº entero. Este atributo nos permite combinar varias celdas en una sola, de tal forma que esta ocupara todo el espacio reservado para las que contiene.
*COLSPAN= "n". donde n = nº entero. Este atributo nos permite combinar varias columnas en una sola, de tal forma que esta ocupara todo el espacio reservado para las que contiene.
Estos dos últimos atributos son de los mas útiles de los que disponemos para crear tablas, pero su uso entraña ciertas dificultades, que sólo se evitan con un buen conocimiento y practica.

Ejemplos.-
<TABLE WIDTH="50%" CELLPADDING="5" CELLSPACING="0" BORDER="1">
   <TR>
     <TD COLSPAN="3" ALIGN="center">CELDA ESPANDIDA</TD>
    </TR>
   <TR>
     <TD WIDTH="33%">UNO</TD>
     <TD WIDTH="33%">DOS</TD>
     <TD WIDTH="33%">TRES</TD>
    </TR>
   <TR>
     <TD WIDTH="33%">UNO</TD>
     <TD WIDTH="33%">DOS</TD>
     <TD WIDTH="33%">TRES</TD>
    </TR>
 </TABLE>
CELDA ESPANDIDA
UNO DOS TRES
UNO DOS TRES


<TABLE WIDTH="75%" CELLPADDING="2" CELLSPACING="0" BORDER="1">
   <TR>
     <TD ROWSPAN="3">CELDA ESPANDIDA</TD>
     <TD WIDTH="33%">UNO</TD>
     <TD WIDTH="33%">UNO</TD>
    </TR>
   <TR>
     <TD WIDTH="33%">UNO</TD>
     <TD WIDTH="33%">DOS</TD>
    </TR>
   <TR>
     <TD WIDTH="33%">UNO</TD>
     <TD WIDTH="33%">DOS</TD>
    </TR>
 </TABLE>

CELDA ESPANDIDA UNO DOS
UNO DOS
UNO DOS



Cristal
kubanito113
Mensajes: 6,867
Registrado: ‎03-26-2004

Re: ~~APRENDE A CREAR TUS PROPIAS TABLAS DE HTML~~

*NOWRAP. Este atributo evita que el texto de un parrafo contenido en la celda dé un salto de línea automatico cuando se llaga al límite derecho de la celda. Como conclusión, si se utiliza este atributo, cuando se llega al final de ancho especificado por WIDTH, la celda seguira abriéndose mas y mas, para dar cabida al texto que la contiene. Si no se utiliza NOWRAP, al llegar el texto al límite derecho de la celda se produce un salto de línea. Como observación, no siempre implementan muy bien este atributo los navegadores, comportandose a veces la tabla de una forma inesperada.

Ejemplo-
<TABLE WIDTH="30%" BORDER="1">
  <TR>
    <TD WIDTH="50%">SUPERCALIFRAGILISTICO<</TD>
    <TD WIDTH="50%">DOS</TD>
  </TR>
</TABLE>
SUPERCALIFRAGILIS
TICO
DOS
<TABLE WIDTH="30%" BORDER="1" NOWRAP>
  <TR>
    <TD WIDTH="50%">SUPERCALIFRAGILISTICO<</TD>
    <TD WIDTH="50%">DOS</TD>
  </TR>
</TABLE>
SUPERCALIFRAGILISTICO DOS
* SUMMARY="descripcion". Permite introducir un resumen, o un comentario para especificar el objeto y / o contenido de la celda. No se muestra en el navegador.
* CHAR= " char ", donde char es un caracter de determinado por nosotros. Este atributo define el el caracter que queremos usar como referencia para alinear el texto de la celdas, es decir, especifica el caracter sobre el que se alineara la celda. Solamente vale si en ALIGN se ha puesto el valor "char".
* CHAROFF="n". Asume un valor cuantitativo (en unidades o porcentaje) que especifica la compensación del caracter de alineación. Con este atributo se puede especificar en que posición el símbolo debe aparecer por primera vez. Solamente vale si en ALIGN se ha puesto el valor "char.

NOTA: Ni Netscape niInternet Explorer interpretan esta especificación de alineación por símbolos en la versión 4.x de sus productos.

* STYLE="atributo:valor;atributo:valor; ...". Especifica información de estilo sobre la celda de la tabla. Este atributo y sus parametros vienen de las especificaciones del W3C sobre Cascading Style Sheet (Hojas de Estilo en Cascada), y con él se puede modificar completamente la presentación de la tabla y de su contenido. Alguno de sus atributos y valores sólo se ven en Internet Explorer.
<TABLE BORDER="1" ALIGN="center">
   <TR>
     <TD STYLE="background-color:yellow;font-size:12pt; text-align:center;">UNO</TD>
     <TD>DOS</TD>
    </TR>
   <TR>
     <TD>UNO</TD>
     <TD>DOS</TD>
    </TR>
 </TABLE>
UNO DOS
UNO DOS

* TITLE="titulo", para titular un documento o una sección del mismo. Algunos programas visores pueden colocar el valor de este atributo como texto insertado o audio.
* CLASS="clase". En la actualidad se utiliza según las especificaciones del W3C para establecer una clase de estilos a la celda y su contenido. Para mas información consultar manuales de CSS.
* ID="nombre". Analogo al atributo CLASS, pero identifica la celda como un objeto único, con sus atributos de estilo definidos en línea mediante el atributo STYLE, en la cabecera del documento HTML o en un archivo externo de extensión .css. Ver manuales de CSS.
* DIR="direccion". Se usa para indicar la dirección del texto y de las columnas. Asume los valores: ltr (de izquierda a derecha) y rtl (derecha a izquierda). Cuando el valor es rtl, el ordenamiento de las columnas comenzara por el tope arriba a la derecha.



Cristal
kubanito113
Mensajes: 6,867
Registrado: ‎03-26-2004

Re: ~~APRENDE A CREAR TUS PROPIAS TABLAS DE HTML~~

Mas etiquetas de tabla

<CAPTION></CAPTION>. Esta pareja de etiquetas permite asociar un titular a la tabla. Sólo admite el atibuto ALIGN, que puede tomar los valores TOP ,LEFT, RIGTH y BOTTOM, que situaran el títular arriba centrado (titulo de tabla),arriba a la izquierda, arriba a la derecha o abajo centrado (pie de tabla). El valor por defecto es TOP.

Ejemplos.-
<table width="150" cellpadding="2" border="1">
 <caption align="bottom">Mi tabla</caption>
  <tr>
   <td>UNO</td>
   <td>DOS</td>
  </tr>
 </table>
Mi tabla
UNO DOS
<TABLE WIDTH="150" CELLPADDING="2" BORDER="1">
 <CAPTION ALIGN="right">Mi tabla</CAPTION>
  <TR>
   <TD>UNO</TD>
   <TD>DOS</TD>
  </TR>
 </TABLE>
Mi tabla
UNO DOS
7 <COLGROUP>...</COLGROUP>. Se utilizan para comunicarle al navegador al principio de la tabla cuantas columnas tiene la misma, para que así pueda cargar la tabla mucho mas rapido, o sea que una parte de la tabla sea visualizada antes de que la totalidad de la tabla haya sido leída. Sin embargo navegadores antiguos (Netscape 3.x, MS Internet Explorer 3.x) no interpretan tales especificaciones. La etiqueta </COLGROUP> es opcional, pero se recomienda colocarla siempre, al igual que ocurre con las demas etiquetas, por claridad de código.

Ejemplo.-
<table border>
  <colgroup>
    <col width="80" bgcolor="red">
    <col width="100" bgcolor="yellow">
    <col width="220" bgcolor="blue">
  </colgroup>
  <tr>
    <td>primer renglón, primera columna</td>
    <td>primer renglón, segunda columna</td>
    <td>primer renglón, tercera columna</td>
  </tr>
</table>
primer renglón, primera columna primer renglón, segunda columna primer renglón, tercera columna
Si no se añaden las etiquetas <COL> con su anchura dada por WIDTH=" x ", entonces las anchura de cada columna sera la necesaria para contener lo que situemos en el interior de la celda mas ancha de ella.
Si queremos obtener una tabla con columnas de igual anchura deberemos añadir a la etiqueta <COLGROUP> los atributos SPAN="n" y WIDTH="x", con lo que obtendremos n columnas de x pixels cada una.

Ejemplo.-
<table border>
  <colgroup span="3" width="200">
  </colgroup>
  <tr>
    <td>primer renglón, primera columna</td>
    <td>primer renglón, segunda columna</td>
    <td>primer renglón, tercera columna</td>
  </tr>
</table>
primer renglón, primera columna primer renglón, segunda columna primer renglón, tercera columna
Para especificar el ancho de las celdas mediante el atributo WIDTH disponemos de 3 opciones:

1) mediante un número, con lo que la anchura sera absoluta y vendra dada en píxeles.
2) mediante un tanto por ciento, con lo que la anchura sera relativa, viniendo determinado el ancho de cada columna por su % en relación al ancho total de la tabla.
3) mediante una relación de anchura relativa de las columnas entre sí, independientemente de la anchura de la tabla en relación con la ventana de visualización, dando al atributo de anchura un valor del tipo WIDTH="n*". La estrella es tan sólo una señal para el navegador, para que no interprete el número anterior como píxel. Este procedimiento debería funcionar bien, pero sólo lo hace en ocasiones.
También la etiqueta <col> puede contener el atributo span=. De tal forma no agrupa varias columnas en una, sino que los atributos de esa columna son validos para las próximas columnas dadas. Por ejemplo si añade <col span="3" width="100">, entonces esa y las siguientes 2 columnas obtienen una anchura de 100 píxeles.
La etiqueta <colgroup> puede contener ademas los atributos span= y width= ,si debajo de ella, son definidas etiquetas <col>. En tal caso la cantidad de etiquetas <col> definidas reemplaza las especificacionesque han sido hechas con la etiqueta <colgroup span= > y el atributo width= dentro de la etiqueta <col> tiene primacía sobre el atributo width= en la etiqueta<colgroup>.

También es permitido anotar varias etiquetas<colgroup>. Anotando por ejemplo dos comandos como <colgroup width=100 span=3> y <colgroup width="50" span="5"> uno tras del otro, puede definir 8 columnas de una tabla, en la cual las primeras 3 columnas tienen una anchura de 100 píxeles y las siguientes 5 una anchura de 50 píxeles.

Como atributos de la etiqueta col podemos usar:

* width="unidad", que determina el ancho de la columna.

* bgcolor="color", que fija el color de fondo de todas las celdas de la columna.

align="right / left / center", que determina la alineación de todas las celdas de lacolumna.

valign="top / middle / bottom", que determina la alineación vertical de las celdas de la columna.