Herramientas para desarrolladores : Cursos, manuales y guías de referencia : Cursos : Introducción al HTML :

Capítulo 5: Creación de tablas

1. Introducción
2. Estructura de una tabla
3. Especificando las dimensiones
4. Posicionamiento del texto
5. Bordes y colorores
6. Conclusión

1. Introducción

Quizá uno de los elementos de presentación de datos más comunes es las páginas web sea la tabla, que nos ayuda a organizar la información cómodamente en filas y columnas, mejorando notablemente el aspecto visual de la misma.

Sin embargo, la utilidad de las tablas HTML va mucho más allá de la simple presentación ordenada de la información. El lenguaje HTML tiene enormes carencias en lo que a maqetación de los elementos de una página se refiere (posicionamiento de imágenes, márgenes, alineación del texto...). Los diseñadores han suplido tradicionalmente estas deficiencias utilizando tablas de forma profusa.

Hoy en día es común la presencia de varias tablas en una página web, incluso tablas dentro de celdas de otras tablas. Si aún no sabes cómo crear una tabla, este es el momento de aprender los fundamentos.

2. Estructura de una tabla

En HTML, las tablas se construyen especificando filas y celdas. El conjunto de celdas de una fila irá encerrado en las etiquetas de fila, y el conjunto de filas de la tabla, en las etiquetas de tabla.

El comienzo y fin de una tabla se define mediante el tag <table> ... </table>. Para especificar cada fila de la tabla se utilizan las etiquetas <tr> ... </tr>. Finalmente, para especificar cada celda de una fila habrá que usar las etiquetas <td> ... </td>.

Teniendo en cuenta estas simples reglas, vamos a mostrar a continuación algunos ejemplos:

<table>
  <tr>
    <td>Fila 1, celda 1</td>
    <td>Fila 1, celda 2</td>
  </tr>
  <tr>
    <td>Fila 2, celda 1</td>
    <td>Fila 2, celda 2</td>
  </tr>
</table>

El ejemplo anterior crea la siguiente tabla de 2 filas y 2 columnas:

3. Dimensionando la tabla

Las etiquetas que definen la tabla admiten diferentes parámetros para lograr el correcto dimensionamiento de las celdas y de los bordes que forman la tabla. También es posible especificar la separación que debe existir entre el texto y el borde de la tabla.

Los parámetros que rigen estas características son los siguientes:

El parámetro height se especifica para el tag <td> que define una celda, pero afectará siempre a toda la fila. Por otra parte, podríamos especificar anchuras de celdas incoherentes (dando diferente anchura a celdas de una misma columna, o haciendo que la suma de las anchuras no coincida). Todos estos errores suelen ser asumidos por los navegadores sin problemas, pero hay que tener cuidado, ya que la forma en la que visualizan una tabla errónea diferirá entre navegadores de distintos fabricantes.

Jugando con los parámetros anteriores podemos ya modificar la tabla del ejemplo anterior para obtener diferentes presentaciones. Veámoslo con algunos ejemplos:

• Aumentamos la anchura (por defecto, la anchura de cada celda se adapta al texto de la misma), y la separación entre celdas:

<table width="60%" cellspacing="5" cellpadding="0">
  <tr>
    <td>Fila 1, celda 1</td>
    <td>Fila 1, celda 2</td>
  </tr>
  <tr>
    <td>Fila 2, celda 1</td>
    <td>Fila 2, celda 2</td>
  </tr>
</table>

• Anchura y altura de la primera columna diferentes de la de la segunda, y mayor espacio entre el texto y el borde de la tabla:

<table width="80%" cellspacing="0" cellpadding="5">
  <tr>
    <td width="80%" height="70">Fila 1, celda 1</td>
    <td width="20%" height="70">Fila 1, celda 2</td>
  </tr>
  <tr>
    <td width="80%">Fila 2, celda 1</td>
    <td width="20%">Fila 2, celda 2</td>
  </tr>
</table>

4. Posicionamiento del texto

Como se observa en los ejemplos anteriores, nos falta todavía ejercer control sobre la posición que ocupa el texto dentro de cada celda.

Para estos menesteres existen una serie de parámetros que detallamos a continuación, y que se aplican al tag <td>:

Jugando con estos parámetros podemos modificar el ejemplo anterior para que el texto de la primera celda esté en la parte inferior de la misma, y alineado a la derecha:

<table width="80%" cellspacing="0" cellpadding="5">
  <tr>
    <td width="80%" height="70" align="right" valign="bottom">Fila 1, celda 1</td>
    <td width="20%" height="70">Fila 1, celda 2</td>
  </tr>
  <tr>
    <td width="80%">Fila 2, celda 1</td>
    <td width="20%">Fila 2, celda 2</td>
  </tr>
</table>

5. Bordes y colores

Para terminar esta introducción al mundo de la creación de tablas en HTML, sólo nos falta indicar cómo podemos mejorar el aspecto de nuestras tablas.

Lo primero que querremos hacer es jugar con la anchura del borde. Para ello se ha definido el parámetro border de la etiqueta <table>, que define la anchura de todos los bordes de la tabla en pixels. Si se especifica con valor 0, el borde no se visualiza.

El color del borde lo controla el parámetro bordercolor, que se aplica al tag <td>. Este parámetro toma valores hexadecimales o nombres de colores predefinidos, según el alfabeto inglés. La forma en que se indica un color con código hexadecimal es la misma que se utiliza para otros elementos de una página (por ejemplo, para el color de fondo).

Finalmente, también podemos modificar el color de fondo de cada celda de forma independiente, aplicando el parámetro bgcolor al tag <td>. Los colores se especifican de igual forma.

Con todo esto, podemos mejorar el aspecto del ejemplo anterior de la siguiente forma:

<table width="80%" cellspacing="0" cellpadding="5" border="4">
  <tr>
    <td width="80%" height="70" align="right" valign="bottom">Fila 1, celda 1</td>
    <td width="20%" height="70">Fila 1, celda 2</td>
  </tr>
  <tr>
    <td width="80%" bgcolor="#FFCCCC">Fila 2, celda 1</td>
    <td width="20%" bordercolor="red">Fila 2, celda 2</td>
  </tr>
</table>

6. Conclusión

Las tablas son el corazón de muchas páginas web. Bien empleadas pueden mejorar notablemente el diseño de nuestra página, y facilitar la navegabilidad.

La presencia de muchas tablas posee, sin embargo, algunos inconvenientes:

• Mayor complejidad en el código (sobre todo si tenemos muchas tablas anidadas) lo que dificulta el mantenimiento de la página
• Ralentización de la renderización de la página en algunos navegadores (sobre todo, navegadores antiguos, como los Navigator de Netscape).

Por estos motivos, aunque es bueno usar tablas, conviene no abusar de ellas.