Tablas

Tablas en HTML

Una tabla es una manera muy compacta y clara de mostrar la información. Una tabla en

HTML se entiende como un conjunto de filas (fila=horizontal), apiladas una sobre otra. Cada fila contiene a su vez un conjunto de celdas, puestas una al lado de la otra.

Una tabla se declara usando el comando <TABLE>... </TABLE>. Dentro de la tabla, se usa <TR>... </TR>para indicar una fila y dentro de una fila, <TD>... </TD> para delimitar el contenido de una celda. El elemento de cierre de fila y de celda es optativo.

El texto incluido dentro de cada celda puede ser formateado con cualquiera de las etiqueta vistas anteriormente

Todos estos comandos aceptan numerosos modificadores. Se pueden, entre otras cosas, unir celdas, especificar la alineación del contenido de la celda, y mucho más.

Para entender mejor el comando <TABLE>... </TABLE>, está disponible una muy amplia gama de ejemplos.

Ejemplo de tabla

<TABLE><TR><TD>CeldaA1</TD><TD>CeldaB1</TD><TD>Celda C1</TD></TR>

<TR><TD>CeldaA2</TD><TD>CeldaB2</TD><TD>CeldaC2</TD></TR>

<TR><TD>Celda A3</TD><TD>Celda B3</TD><TD>Celda C3</TD></TR>

</TABLE>

Quedaría de la siguiente manera:

 

Título de la tabla

Es conveniente que las tablas tengan un título que las identifique y aclare su contenido.

Aunque ese título puede ser contenido colocando texto formateado antes de la tabla, HTML dispone de la etiqueta <CAPTION> para darle nombre a la tabla, de la siguiente forma:

<TABLE><CAPTION> Nombre de la tabla </CAPTION>..........</TABLE>

Esta etiqueta tiene la ventaja que el texto formateado se coloca automáticamente en el centro de la anchura de la tabla.

Bordes de la tabla

Para colocar bordes a una tabla en HTML se utiliza el modificador BORDER dentro de la etiqueta <TABLE>. La sintaxis es:

<TABLE BORDER="anchura">

..........

</TABLE>

Donde anchura indica la anchura en pixeles del borde exterior de la tabla.

El modificador BORDER coloca bordes externos e internos en la tabla, pero la anchura que se especifica solo afecta a los bordes externos.

El efecto de sombreado del borde exterior se produce cuando el modificador BORDER toma un valor superior a uno. Si queremos que el borde exterior de la tabla sea igual que los bordes interiores, debemos hacer BORDER=”1”.

Cabeceras de filas y de columnas

La inclusión de cabeceras en cada fila y columna ayuda a comprender el contenido de la tabla.

No hay ninguna dificultad para hacer esto con las etiquetas que hemos visto. Sin embargo, existe una forma alternativa de indicar la cabecera de una fila o columna mediante la etiqueta <TH>. La desventaja de usar esta etiqueta es que el texto que va dentro de ella no admite formateado como el de las otras celdas.

Tamaño de la tabla

Por defecto el tamaño de la tabla viene dado por el texto o los gráficos que contiene. Sin embargo, es posible que en ocasiones queramos cambiar la anchura de nuestra tabla.

La forma de establecer una anchura fija en una tabla es utilizar el modificador WIDTH dentro de la etiqueta <TABLE>. La sintaxis es:

<TABLE WIDTH="anchura">......... </TABLE>

Aquí anchura puede ser un número que especifique en pixeles la anchura absoluta de la tabla, o bien un porcentaje que indique la anchura de la tabla en relación a la anchura del área del documento del navegador.

A pesar de que podemos especificar la anchura de la tabla, si el texto de las celdas ocupa una anchura mayor, la tabla tomará la anchura mínima para que el texto delas celdas pueda verse íntegramente.

Justificación de la tabla

Por defecto, nuestra tabla quedará justificada a la izquierda. La forma de centrarla es mediante la etiqueta <CENTER>.

Espacio dentro de las celdas

Es posible que queramos que nuestro texto no quede apretado dentro de las celdas, sino que exista más espacio entre los textos de las celdas contiguas de forma que pueda leerse mejor.

Esto puede hacerse mediante los dos siguientes modificadores:

•CELLPADDING: establece la distancia mínima en pixeles entre los bordes de cada celda y el texto que va encerrado en ellas. Su valor por defecto es 1.

•CELLSPACING: establece la anchura en pixeles de los bordes de cada celda.

Color de cada celda

Para especificar el color de cada celda de la tabla se utiliza el modificador BGCOLOR en la etiqueta <TD>. Como formato de colores se acepta el hexadecimal o una cadena de caracteres.