FORO
CONTACTO
anterior siguiente
TABLAS

Las tablas son el elemento más importante en el diseño de hojas web. Necesitarás entender bien cómo funcionan las tablas, y porqué su necesidad en el diseño web.

Las tablas se componen de tres elementos principales. la marca <TABLE>, la marca fila de tabla <TR>, y la marca celda de tabla <TD>. Cuando tu pones una marca <TR>, estás indicando que acabas la fila actual, y empizas debajo una nueva fila. Cuando añades una marca <TD>, estas comenzando una nueva celdilla dentro de dicha fila. A continuación listaremos los atributos de cada uno de los elementos de las tablas.

<TABLE> Atributos:

  • Align : alinea la tabla y provica sangrado de texto como en el caso de las imágenes (ver capitulo imágenes y enlaces).
  • bgcolor : Define el color de fondo de toda la tabla.
  • border :Define en ancho en pixeles del marco que bordea la tabla (puede ser cero)
  • cellpadding :Espacio vacio en pixeles que se deja entre la pared de las celdas y su contenido
  • cellspacing :Espacio en pixeles que ocupa la pared que separa dos celdas
  • width :Define la anchura de la tabla. expresable en pixeles o porcentaje de ventana (añadiendo %)
Ejemplo:<TABLE aling=center bgcolor="blue" border=2 cellpadding=5 cellspacing=2 width=90%>

<TR> Atributos

  • aling :Alinea el contenido de las celdas de esa fila a la izquierda (left), centro (center) o derecha (right).
  • bgcolor :Define el color de fondo de la fila.
  • valign :Alinea en verticar el contenido de la fila, a la parte superior(top), media (middle), o inferior (bottom).
Ejemplo:<TR align=right bgcolor="red" valign=top>

<TD> Atributos

  • Align :alinea el contenido de la fila a la izquierda (left), centro (center), o derecha (right)
  • Background :Coloca una imagen de fondo dentro de la celda.
  • bgcolor :Define el color de fondo de la celda.
  • colspan :alarga la longitud de la celda hasta abarcar dos o mas celdas de longitud.
  • height :Define la altura de la celda en pixeles
  • Nowrap : fija el contenido de la celda de modo que (a no ser que nosotros lo indiquemos con marcas de retorno de carro), permanezca en la misma línea.
  • rowspan :Alarga la altura de la celda de modo que abarque dos o más celdas.
  • valign :Alinea el contenido de la celda verticalmente a laparte superior (top), media (middle), o inferior (bottom).
  • width :Define la anchura de la celda actual, en pixeles o porcentage.
Ejemplo: <TD align=right background="fondo.gif" bgcolor="green" colspan=3 height=200 nowrap rowspan=2 valign=bottom width=300>

Ahora que ya conoces los fundamentos, aquí tienes dos ejemplos de tablas. Cada ejemplo lleva asociadas dos imágenes. La superior tiene el cellpadding, cellspacing y border en 2, y la inferior a cero. Está incluido el código que genera cada tabla, de modo que puedas ver cómo se han construido.

Table Example #1 <table cellspacing="2" cellpadding="2" width=100 border=0>
<tr>
<td bgcolor="red"> </td>
<td bgcolor="yellow"> </td>
<td rowspan=2 bgcolor="aqua"> </td>
</tr>
<tr>
<td colspan="2" bgcolor="blue"> </td>
</tr>
<tr>
<td colspan=3 bgcolor="fuchsia"> </td>
</tr>
</table>
Table Example #2 <table cellspacing="2" cellpadding="2" width=100 border=2>
<tr>
<td rowspan=3 bgcolor="aqua"> </td>
<td bgcolor="blue"> </td>
<td bgcolor="fuchsia"> </td>
</tr>
<tr>
<td colspan=2 bgcolor="lime"> </td>
</tr>
<tr>
<td bgcolor="gray"> </td>
<td bgcolor="yellow"> </td>
</tr>
</table>

Antes de empezar a crear una tabla, te aconsejo que la dibujes en un papel. De esta forma sabrás exactamente cuantas filas y columnas tendrá, antes de que empieces a meter código HTML. El problema de las tablas, es que no pudes ver cómo lo estás haciendo hasta que no la has terminado del todo. Las tablas van a ser el elemento HTML que más problemas te van a dar, pero también, serán los elementos que más posibilidades de diseño te otorgarán. No pienses en las tablas con la unica finalidad de contener texto enmarcado. Recuerda que las celdas pueden contener cualquier otro elemento HTML. Intenta construir una imagen partida en trozos los cuales ocuparán una celda de la tabla. Es como crear un puzzle. Cuando está montado, parece una imagen única; pero no lo es. Esto te permitirá que cada trozo de la imagen pueda ser un enlace a otras páginas. Al usuario le da la impresión de que según en que zona de la imgen pinche, pasa una cosa u otra.

Aquí tienes unos cuantos consejos que deberás tener en cuenta cuando construyas tablas:

  • Siempre cierra tus maracas : algunos navegadores no lo precisas, pero otros lo hacen, por ello es importante si quieres tener estandarización. Si tienes 3 <TR>, asegurate que tienes su correspondientres 3 </TR>. Lleva la cuenta de cuantos abres.
  • Durante contrucción de la tabla fija el border a 2/b>. Aunque tu tabla final no deba llevar borde. Así podrás ver exactamente dónde empiezan y acaban tus celdas, y detectarás fácilmente errores. Una vez que tu tabla es completa y correcta, ya lo puedes cambiar a cero.
  • Tablas de imagenes Si quieres juntar varias imagenes en una tabla, para que asemejen una imagen más grande, es importante que pongas el border, cellpadding y cellspacing a cero. También debes asegurante que todas las marcas se toquen entre sí sin espacios entre medias. Me explico: en lugar de estos <TD> <IMG SRC="pieza.gif"> </TD>, deberás tener:<TD><IMG SRC="pieza.gif"></TD>,, para que todo funcione correctamente.
  • Cuenta tus celdas Siempre debes tener el mismo numero de TDs en cada fila. Si tu tabla tiene cuatro columnas, debes asugurarte que hay cuatro <TD> y cuatro </TD> encada fila, o bien que el numero total de celdas sea de tal modo que ocupen cuatro celdas si es que estás usando el atributo COLSPAN). Si te asegurás que llevas bien la cuenta, tu tabla se deberá ver como deseas.

En realidad esto es solo la punta del iceberg de las tablas; pero lo principal es la experimentación. Cuando nevegues, observa los efectos que consiguen otros diseñadores, e intenta averiguar cómo lo han hecho.

Autor: Javier Marco

anterior siguiente
 

Novedades

Realidad Virtual
Quest 3D
Modelado 3D
Iluminación Giles
Conway's Game of Life

Stereoscopía
Foto 3D

Internet
HTML
Dreamweaver
JavaScript
ASP

 

 
Hagaloustedmismo
Contacte en : hagaloustedmismo@wanadoo.es
Phohibida toda reproducción total o parcial sin permiso del autor