Tablas en HTML

Al igual que las listas,las tablas son componentes dedicados fundamentalmente a mejorar la visualización de los documentos en formato electrónico. Se trata de una funcionalidad b�sica de la inmensa mayoría de los programas de tratamiento de texto y una forma habitual de presentar información, especialmente numérica, desde la introducción de las mejoras de c�lculo.

La directiva dedicada a las tablas es <TABLE>;...</TABLE>; (directiva cerrada). No es preciso determinar inicialmente el número de filas o columnas, el navegador se encarga de averiguarlo a medida que profundice en el contenido de la tabla que est� cargando en pantalla.

Cada celda se limita con la directiva cerrada <TD>;...</TD>; y cada fila con la directiva <TR>;...</TR>;. Una vez que tengamos declarada el comienzo de nuestra tabla con <TABLE>;...</TABLE>;, se coloca un nuevo comando contenedor, el atributo <TR>;...</TR>; (Table Row), para identificar cada fila de la tabla, en el interior de la definición de la tabla:

<TABLE>;Identifica el comienzo de la tabla
<TR>;...</TR>;Esto identifica una fila horizontal.
</TABLE>;Identifica el final de la tabla

En cada una de las filas podr�n aparecer celdillas que ser�n de 2 tipos: cabeceras o normales.

• Celdillas Cabeceras

  Este tipo de celdillas son las que por así decirlo, identifican cada una de las columnas de la celdilla, y su interior destaca del resto del texto contenido en el resto de la tabla, debido a que aparece en negrita. Se limitan por <TH>;...</TH>; (Table Head) y todo lo que contenga en su interior, destacara del resto del documento.

  <TABLE>;
  <TR>;<TH>;...</TH>;<TH>;...</TH>;</TR>;
  </TABLE>;
  

  En este ejempo definimos una tabla con 2 columnas y una fila. Las columnas contendr�n un texto destacado del resto del contenido de la tabla. Fijarse que todo lo que vaya entre las directivas <TR>;...</TR>; definen el total de una fila, y después podremos poner tantas celdillas de cabecera como queramos, definiendo cada una por medio de <TH>;...</TH>;. Un ejemplo de celdillas de cabecera sería el empleado por ejemplo para destacar los días de la semana (Lunes, Martes, Miercoles, ...), de un horario de clases, del resto de las celdillas que contienen las horas de clase en sí.

• Celdillas Normales

  Este tipo de celdillas son las m�s comunes dentro de una tabla y son las celdillas en las que ir� contenido el texto o información que aparecer� relacionada en cada una de los espacios de las tablas. Se definen dentro de una fila (<TR>;...</TR>;), por medio de <TD>;...</TD>;, lo que definiría una celdilla normal con el texto sin destacar del resto. Al igual que las celdillas de cabecera, podemos definir tantas celdillas por fila como deseemos.

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

  En este ejemplo, definimos una tabla con 2 filas y 2 columnas. Nótese que debemos de acabar de definir por completo una fila, antes de definir la siguiente, de lo contrario nos daría lugar a una tabla que no es la que estabamos esperando que apareciera.

  NOTA: El navegador tiene una forma de leer las tablas antes de mostrarlas en pantalla y es del siguiente modo: desde el lado superior izquierdo de latabla, se desplaza a la derecha por la misma fila, y cuando acaba la primera fila, vuelve a comenzar por la izquierda hacia la derecha, pero en la siguiente fila definida de la tabla (si es que existiera).

En una celda de tabla (ya sea de cabecera o normal), puede aparecer cualquier tipo de elemeto HTML, o imagen, o texto, o sonido, o lo que deseemos. Un ejemplo sería un texto de una celdilla que apareciera junto a una imagen con el texto en rojo a 5 puntos de latura de letra y una imagen como hiperenlace... �Parece complicado, no?

Veamos un ejemplo como el descrito antes.

Definamos una tabla de 1x2, es decir de una fila, por 2 columnas (el digito de la izquierda se�ala siempre la fila y el de la derecha las columnas; recuerda como lee el navegador la tabla...):

<TABLE>;
<TR>;
<TD>;<FONT SIZE=5 COLOR=�#FF0000�>;Esta imagen es un Icono que enlaza a otra p�gina</FONT>;</TD>;
<TD>;<A HREF=�siguiente.htm�>;<IMG SRC=�icono.gif�>;</A>;</TD>;
</TR>;
</TABLE>;

Primero hemos definido la tabla con <TABLE>;. A continuación, definimos la primera fila de la tabla con <TR>;. El siguiente paso es poner tantas celdillas como queramos con las directivas <TD>;...</TD>;, y en su interior introducir el texto y darle el formato deseado. La siguiente celdilla definida con <TD>;...</TD>; introduce la imagen y la hace ser enlace a otra p�gina llamada �siguiente.htm�. una vez hecho esto, cerramos el final de la primera fila con </TR>; y cerramos la tabla general </TABLE>;.

NOTA: Hay que tener en cuenta que de no cerrar la tabla con la directiva </TABLE>;, por mucha tabla que hayamos creado con todo su contenido, en la ventana del visualizador cuando la carguemos no nos aparecer� ninguna de las columnas ni filas, ya que al no delimitar el final de la tabla, el navegador cree que hay mas filas y columnas e intenta seguir leyendo... Y como en nuestro caso ya la hemos definida toda, digamos que el navegador como no sabe dónde est� el fin, trata de leer una tabla infinita... Por tanto no olvidar de cerrar la definición de la tabla con </TABLE>;.

Vamos a ver otro ejemplo con un Horario de clase de 5 días y 3 horas 4x5 (4 filas debidas a las 3 filas de las horas + la fila de los días de las semana, y 5 columnas debidas a los días de la semana). Para ello en las celdillas de los días de las semana, las pondremos como celdillas de cabeceras:

<TABLE>;
<TR>;
<TH>;Lunes</TH>;
<TH>;Martes</TH>;
<TH>;Miércoles</TH>;
<TH>;Jueves</TH>;
<TH>;Viernes</TH>;
</TR>;

<TR>;
<TD>;Lenguaje</TD>;
<TD>;Lenguaje </TD>;
<TD>;Matem�ticas</TD>;
<TD>;Física</TD>;
<TD>;Química</TD>;
</TR>;

<TR>;
<TD>;Matem�ticas</TD>;
<TD>;Matem�ticas</TD>;
<TD>;Matem�ticas</TD>;
<TD>;Química</TD>;
<TD>;Química</TD>;
</TR>;

<TR>;
<TD>;Ciencias</TD>;
<TD>;Ciencias</TD>;
<TD>;Ciencias</TD>;
<TD>;Ciencias</TD>;
<TD>;Ciencias</TD>;
</TR>;
</TABLE>;

Este ejemplo si lo analizamos cuidadosamente, con las anteriores indicaciones, veremos que en cada una de las partes de la tabla, se definen primero las filas y despues las celdas dentro de cada una de las filas.

Si queremos que la tabla posea un título por ejemplo:

en HTML poseemos una característica propias de las tablas que es la directiva cerrada <CAPTION>;...</CAPTION>; que va incluida dentro de la definición de la tabla y antes del comienzo de la definición de filas:

<TABLE>;
<CAPTION>; BALANCE DE GASTOS ANUALES</TABLE>;
<TR>;
<TD>;...</TD>;<TD>;...</TD>;<TD>;...</TD>;<TD>;...</TD>;
</TR>;
</TABLE>;

Ahora si queremos definir el título en la parte superior de la tabla o al pie de la misma, tenemos un atributo para la directiva <CAPTION>;...</CAPTION>; que nos sitúa el título donde nosotros estimemos oportuno.

TOP, nos define el título en la parte superior de la tabla antes de su comiento, y BOTTOM nos lo sitúa a pie de tabla una vez finalizada esta, por lo que

<TABLE>;
<CAPTION ALIGN=TOP>; BALANCE DE GASTOS ANUALES</TABLE>;
<TR>;
<TD>;...</TD>;<TD>;...</TD>;<TD>;...</TD>;<TD>;...</TD>;
</TR>;
</TABLE>;

<TABLE>;
<CAPTION ALIGN=BOTTOM>; BALANCE DE GASTOS ANUALES</TABLE>;
<TR>;
<TD>;...</TD>;<TD>;...</TD>;<TD>;...</TD>;<TD>;...</TD>;
</TR>;
</TABLE>;

coloca el título en al parte inferior.

NOTA: Por defecto si no se lo especificamos al navegador, éste define la tabla con sus filas y columnas, pero no nos muestra el contorno de la tabla, por lo que parece que la tabla no est� definida, pese a estarlo. Si queremos que se nos muestren los contornos de las cedillas y de las filas, debemos de colocar el atributo BORDER=�valor_numérico� dentro de la primera directiva de definición de la tabla:

<TABLE BORDER=�valor_numérico�>;

de forma que el valor_numérico por defecto es 0 sino se especifica otro. Un valor muy común para ver la tabla contorneada es con BORDER=�1�. Una vez colocado este atributo, podremos ver el contorno.

Ya definidos los conceptos b�sicos de las tablas, con sus respectivas filas y celdillas, vamos ahora a ver en mayor detalle como hacer de nuestras tablas algo m�s llamativo o con mayor presentación. Para ello ire definiendo distintos atributos que puede poseer una tabla, y el lugar en el que deber�n de ir colocadas.

• Ancho de la tabla

  Podemos modificar el ancho que la tabla ocupar� en la pantalla del visualizador, ya que si no lo hacemos así,la tabla coge por defecto el ancho de cada uno de las filas, sumando cada uno de los anchos de cada celdilla hasta definir el ancho completo de la fila, dando un resultado pobre ya que los datos de cada celdilla aparecen pegados a los bordes que delimitan cada celdilla. Para ello se define el atributo WIDTH=�valor_numérico� que no hace otra cosa que definir el ancho TOTAL de la tabla. Hay 2 formas de definir el ancho de la tabla:

  1. Anchura en pixels
  2. Anchura en porcentaje de pantalla

  para definir el ancho total de la tabla este atributo va colocado en el interior de la directiva que define la tabla:

  <TABLE WIDTH=�400�>; Define una tabla con ancho total de 400 pixels
  <TABLE WIDTH=�50%�>; Define una tabla con ancho total del 50% de pantalla.

  NOTA: Si definimos una ancho de tabla muy peque�o, y los datos no caben en el espacio definido, el navegador amplia el ancho de la tabla, para que los datos quepan en su totalidad.

  Hay sin embargo la posibilidad que lo que queramos es definir el ancho de una celdilla en lugar del ancho total de la tabla, para ello haremos lo mismo que anteriormente, con la diferencia de que esta vez el atributo WIDTH no va colocado en la directiva <TABLE>;, sino en la directiva que defina el comienzo de la celdilla que queramos modificar en ancho:

  <TABLE>;
  <TR>;
  <TD WIDTH=100>;...</TD>;<TD>;...</TD>;
  </TR>;
  </TABLE>;

  Esto hace que la primera celdilla de la primera fila tome un ancho de 100 pixels mientras la siguiente celdilla no tiene definido el ancho, y vendr� definido por u contenido interno (texto, imagen, ...). También se pude definir el ancho por porcetaje al igual que cuando se definimos el ancho total de la tabla.

  
  
• Extensión en las tablas

  Muchas veces, estaremos interesados en que una celdilla de una fila ocupe el ancho de 2 celdillas normales de la tabla, de forma que no haya separación entre las celdillas. Veamos un ejemplo:

  
  

  En este ejemplo la 2 fila tiene en su primera celdilla una extensión de 2 celdillas normales del resto de la tabla. O también puede ser que queramos que una fila ocupe m�s filas de altura que el normal de la tabla. Veamos otro ejemplo:

  
  

  para ello existen una serie de atributos que nos sirven para indicar al navegador que la tabla poseer� un ancho de fila o columna doble, triple, cuadruple... del est�ndar definido para el resto de la tabla. Estos atributos van siempre definidos al comienzo de la definición de la cendilla que tendr� el alto o ancho mayor que las dem�s.

  • COLSPAN=�valor_numérico�

    Indica cu�ntas columnas ocupar� la celda en la que se defina el atributo.

  • ROWSPAN=�valor_numérico�

    Indica cu�ntas filas ocupar� la celda en la que se defina el atributo.

    
    

    <TABLE BORDER=1>;
    <TR>;
    <TD>;...</TD>;<TD>;...</TD>;<TD>;...</TD>;
    </TR>;
    
    <TR>;
    <TD>;...</TD>;<TD COLSPAN=2>;...</TD>;<TD>;...</TD>;
    </TR>;
    
    <TR>;
    <TD>;...</TD>;<TD>;...</TD>;<TD>;...</TD>;
    </TR>;
    </TABLE>;

    Este ejemplo nos define una tabla de 4 columnas y 3 filas, pero en la segunda fila, la segunda celdilla ocupa un ancho de 2 columnas (tal como hemos definido en el código HTML con <TD COLSPAN=2>;...</TD>;)

    <TABLE BORDER=1>;
    <TR>;
    <TD>;...</TD>;<TD>;...</TD>;<TD>;...</TD>;
    </TR>;
    
    <TR>;
    <TD>;...</TD>;<TD ROWSPAN=2>;...</TD>;<TD>;...</TD>;
    </TR>;
    
    <TR>;
    <TD>;...</TD>;<TD>;...</TD>;
    </TR>;
    </TABLE>;

    Este ejemplo nos define una tabla de 3 columnas y 3 filas, pero en la segunda fila, la segunda celdilla ocupa un alto de 2 filas (tal como hemos definido en el código HTML con <TD ROWSPAN=2>;...</TD>;)

    La mejor forma de familiarizarse como funcionan esto par�metros es ir haciendo varios ejemplos hasta que te acostumbres a poner cada una de ellas según te vaya mejor al dise�o de tu tabla.

    TRUCO: Si cuando definimos una tabla, en lugar de que nos aparezcan los espacios de celdillas sin rellenar, como una continuación del contorno de la tabla, que abarca toda la cedilla sin datos, si queremos que aparezca una celdilla en blanco simplemente vacía y sin el relleno de contorno, si en el interior de la definición de la celdilla sin datos colocamos un <BR>; (salto de línea en HTML), nos aparecer� la celdilla totalmente blanca, sin datos:

    <TD>;<BR>;</TD>;
  
  
  
• Colores de fondo en celdillas y columnas

  Un efecto impactante en las tablas, es el colocar un color de fondo, por ejemplo a la primera fila para destacar el contenido de los mismo, o el definir una columna con un color de fondo distinto al del resto de la tabla, para destacar un resultado de esa columna. En HTML es tan sencillo como emplear el atributo ahora definido.

  BGCOLOR=�peso o nombre de color�

  Con este atributo, colocado en el interior del comienzo de la definición de la fila o celdilla que queramos destacar, obtendremos el resultado deseado. El color como ya hemos dicho en anteriores secciones lo podemos definir con el nombre del color deseado en ingles (por ejemplo �Blue� para color azul), o bien por el peso RGB en valor hexagesimal, precedido de una almohadilla (#).

  <TABLE BORDER=1>;
  <TR>;
  <TD>;...</TD>;<TD BGCOLOR=�blue�>;...</TD>;<TD>;...</TD>;
  </TR>;
  
  <TR>;
  <TD>;...</TD>;<TD BGCOLOR=�blue�>;...</TD>;<TD>;...</TD>;
  </TR>;
  
  <TR>;
  <TD>;...</TD>;<TD BGCOLOR=�blue�>;...</TD>;<TD>;...</TD>;
  </TR>;
  </TABLE>;

  este ejemplo define una tabla de 3x3 con la columna central de fondo azul.

  <TABLE BORDER=1>;
  <TR BGCOLOR=�#0000ff�>;
  <TD>;...</TD>;<TD>;...</TD>;<TD>;...</TD>;
  </TR>;
  
  <TR>;
  <TD>;...</TD>;<TD>;...</TD>;<TD>;...</TD>;
  </TR>;
  
  <TR>;
  <TD>;...</TD>;<TD>;...</TD>;<TD>;...</TD>;
  </TR>;
  </TABLE>;

  este ejemplo sin embargo define la misma tabla anterior, pero con la primera fila con un fondo azul.

  TRUCO: Un dise�o espectacular de una tabla, podría ser el poner un fondo en la primera fila que destacara del resto de la tabla, y al mismo tiempo no definir el contorno de la tabla (BODER=0), de forma que la primera fila sirviera con sus divisiones para distinguir el resto de la tabla.

  
  
• Alineación en el interior de la tabla

  Otra recurso de las tablas m�s complejas, es el definir el alineado que queremos que el texto o imagen o lo que se halle en el interior de la celdilla adopte, respecto al eje X (horizontal) y al eje Y (vertical). Para ello existen una serie de atributos que adoptan distintos valores según las distintas alineaciones de que disponemos.

  ALIGN= RIGHT | CENTER | LEFT

  Alinean en la parte derecha, centro e izquierza, el texto imagen o elemento que estemos poniendo en el interior de la fila o celdilla. Si el atributo est� colocado en el comienzo de definición de la tabla (<TABLE ALIGN=...>;), afecta a la tabla por completo. Si el atributo est� colocado en el comienzo de definición de la fila (<TR ALIGN=...>;), afecta a la fila por completo. Si el atributo est� colocado en el comienzo de definición de la celdilla (<TD ALIGN=...>;), afecta sólo a la celdilla.

  VALIGN= TOP | MIDDLE | BOTTOM

  Alinean en la parte superior, centro e inferior, el texto imagen o elemento que estemos poniendo en el interior de la fila o celdilla. Si el atributo est� colocado en el comienzo de definición de la tabla (<TABLE VALIGN=...>;), afecta a la tabla por completo. Si el atributo est� colocado en el comienzo de definición de la fila (<TR VALIGN=...>;), afecta a la fila por completo. Si el atributo est� colocado en el comienzo de definición de la celdilla (<TD VALIGN=...>;), afecta sólo a la celdilla.

  Experimentando con esto atributos, obtendremos tablas bajo nuestro control, que no definiendo ninguno de ellos.

  TRUCO: si queremos que la tabla en su totalidad esté centrada con respecto a la pantalla de visualización del navegador, lo único que debemos de definir es el atributo <CENTER>;...</CENTER>; entre el comienzo y final de la tabla:

  <CENTER>;
  <TABLE>;
  ...................
  </TABLE>;
  </CENTER>;

  
  
• Espaciado entre filas y celdillas

  Hay 2 atributos que son idependientes entre sí, pero que aportan mucha mayor flexibilidad al dise�o de una tabla, en cuanto a la distancia que debe de separar el elemento que contenga cada celdilla (texto, imagen, ...) y el separado entre filas.

  CELLPADDING=�n� pixels�
  CELLSPACING=� n� pixels�

  Ambos atributos van colocados en la directiva de comienzo de definición de tabla (<TABLE CELLPADDING=�n� pixels� CELL SPACING=� n� pixels�>;), aunque no tienen por qué ir juntos. CELLPADING lo que hace es definir el número de pixels que habr� de separación entre el contorno de la cendilla y el texto, imagen o elemento que se halle en la celdilla, y CELLSPACING define el espaciado en pixels que habr� entre las diferentes celdillas que componen la tabla.

  
  

Una de las ventajas que poseen las tablas, el la tremenda diversificación y aplicación que poseen en el dise�o de un documento HTML. Por lo general, se ver�n pocas p�ginas dise�adas en HTMl, que no contengan en una u otra manera algún tipo de tabla por sencilla que sea, debido a la gran a plicación que poseen. Veamos unos ejemplo para hacernos una idea: