4. Elementos del XHTML

VI. Tablas

Las tablas son un recurso muy valioso cuando tenemos la necesidad de presentar datos en forma tabular. Son un tema extenso y se podría crear un pequeño curso dedicado exclusivamente a ellas.

Una pequeña reseña

En los inicios del lenguaje HTML no había manera de controlar la apariencia visual de sus elementos, salvo utilizando el comportamiento por defecto que presentaban muchas de sus etiquetas. Los títulos se utilizaban para mostrar texto grande o en negritas, y no para su propósito original. Poco después aparecieron etiquetas que tenían un fin únicamente de presentación, mezclando así estructura con presentación. Muchos aún tienen la manía de pensar que el HTML sirve para diseñar. Era (y sigue siendo) común recurrir a trucos sucios para conseguir efectos visuales y maquetar las páginas. Uno de los elementos más recurridos para ello lo encontramos en el uso de las tablas.

La tabla se ha llegado a utilizar para crear columnas o intentar colocar con precisión pixelmétrica elementos en las páginas. Una manera de conseguirlo ha sido anidando tablas unas dentro de otras, hasta obtener el resultado deseado. ¿Y qué ha pasado con la estructura? Nada, que se se dejado en el camino. Empezamos a tener elementos sepultados bajo líneas y líneas de código, generalmente celdas y definiciones de tablas, solo para colocar el contenido en un lugar, sin el más mínimo respeto por el orden lógico de la información.

El HTML parecía quedarse corto, pero solo se estaba utilizando en cosas para las cuales no fue diseñado. En esos tiempos era comprensible que las personas recurrieran a semejantes artimañas para hacer más vistoso su sitio. Ahora no. Las CSS han nacido para paliar esa carencia, y separar la estructura de la presentación.

Administrar un sitio maquetado con tablas es una pesadilla. Un vez construidas es muy difícil y laborioso modificar su aspecto visual. Hacer pequeños cambios implica la edición de muchas líneas de código. Las CSS permiten hacer todo más fácil y rápido. Recomendamos usarlas desde el principio y acostubrarse a ellas, sin importar lo que puedan hacer otros. Pensamos que el uso combinado de un documento HTML bien estructurado que haga uso de las hojas de estilo, son la combinación perfecta para conseguir una excelente página web.

Los elementos de tabla

Las tablas son entidades complejas que vale la pena conocer bien. Aquí veremos sus aspectos más comunes y utilizados. Serán suficientes para la mayoría de nuestras necesidades. Los elementos que debemos conocer son:

Elemento	Etiqueta	Es de tipo:
Tabla	<table>	bloque
Título de la tabla	<caption>	bloque
Fila	<tr>	bloque
Celda cabecera	<th>	bloque
Celda de datos	<td>	bloque

Existen otros elementos relacionados con las tablas que tienen la función de agrupar celdas o filas, otorgando de esta manera más información estructural a la misma. Sin embargo, para la gran mayoría de nuestros propósitos, los elementos mencionados arriba serán más que suficientes.

Elementos de agrupamiento:

Elemento	Etiqueta	Es de tipo:
Cabecera de tabla	<thead>	bloque
Grupo de columnas	<colgroup>	bloque
Columna	<col>	bloque
Grupo de filas	<tbody>	bloque

El dilema de la tablas

Las tablas, a diferencia de otros elementos, conservan todavía algunos de sus atributos con fines de presentación. Tiene sentido si nos ponemos a pensar que, en la mayoría de las ocasiones, los estilos aplicados a una tabla suelen usarse sólo una vez. Hemos decidido incluir en este primer bloque del curso todos los atributos que tienen fines para presentación, pero sólo vamos a profundizar en su uso para aquellos que sea imposible, muy difícil, o impráctica, su implementación utilizando CSS.

Sintaxis básica

La estructura básica de una tabla se presenta a continuación:



<table summary="Una tabla ejemplo con datos sin sentido">
 <caption>El nombre de la tabla</caption>
 <tr>
  <th>Celda cabecera 1</th>
  <th>Celda cabecera 2</th>
  <th>Celda cabecera 3</th>
 </tr>
 <tr>
  <td>Celda de datos 1</td>
  <td>Celda de datos 2</td>
  <td>Celda de datos 3</td>
 </tr>
 <tr>
  <td>Celda de datos 4</td>
  <td>Celda de datos 5</td>
  <td>Celda de datos 6</td>
 </tr>
</table>

El código superior nos crearía una tabla como la mostrada a continuación:

El nombre de la tabla
Celda cabecera 1	Celda cabecera 2	Celda cabecera 3
Celda de datos 1	Celda de datos 2	Celda de datos 3
Celda de datos 4	Celda de datos 5	Celda de datos 6

La tabla de arriba está afectada por la hoja de estilos que se aplica a esta página. Lo hemos dejado así para que exista una diferencia visual entre las celdas cabecera y las celdas de datos. Toda la aperiencia puede controlarse con las hojas de estilo CSS.

Explicación

La etiqueta <table> define la tabla. Incluye un atributo llamado summary. Dicho atributo es obligatorio. Su objetivo es contener un resumen del contenido de la tabla. No es posible apreciarlo con un navegador visual, pero su función radica en brindar información sobre la tabla para la navegación no visual. Este es otro aspecto más relacionado con la accesibilidad de nuestras páginas web.

La etiqueta <caption> contiene el título de la tabla. No puede existir más de una por tabla. No es obligatoria.

Las etiquetas <tr> definen las filas de la tabla. Es obligatorio que la tabla tenga por lo menos uno de estos elementos.

Las etiquetas <td> y <th> definen celdas. Debe existir por lo menos una para cada fila de la tabla. No es obligatoria la existencia del mismo número de celdas por fila.

Agrupando

Los elementos <col> y <colgroup> se colocan delante de la definición de las filas. Usualmente los elementos <col> van dentro de los elementos <colgroup> Su número y orden de aparición representa el orden y número de columnas que afectan. Por el contrario, los elementos <tbody> y <thead> siempre contienen dentro al conjunto de filas que afectan.

Un ejemplo:



<table summary="Una tabla ejemplo con datos sin sentido">
 <caption>El nombre de la tabla</caption>
 <colgroup span="2">
  <col align="right"></col>
  <col valign="top"></col>
 </colgroup>
<thead> 
 <tr>
  <th>Celda <br />cabecera 1</th>
  <th>Celda cabecera 2</th>
  <th>Celda cabecera 3</th>
 </tr>
</thead>
 <tbody>
 <tr>
  <td>Celda de <br />datos 1</td>
  <td>Celda de datos 2</td>
  <td>Celda de datos 3</td>
 </tr>
 </tbody>
 <tr>
  <td>Celda de <br />datos 4</td>
  <td>Celda de datos 5</td>
  <td>Celda de datos 6</td>
 </tr>
</table>

Lo que nos da como resultado esto:

El nombre de la tabla
Celda cabecera 1	Celda cabecera 2	Celda cabecera 3
Celda de datos 1	Celda de datos 2	Celda de datos 3
Celda de datos 4	Celda de datos 5	Celda de datos 6

El elemento <colgroup> nos han permitido agrupar las dos primeras columnas. Los elementos <col> aplicar diferentes alineaciones verticales y horizontales a cada una de ellas. Los <tbody> y <thead> agrupan filas, pero no realizan ninguna acción particular sobre ellas.

Atributos

Se enumeran a continuación todos los atributos exclusivos aceptados por el estándar. Sin embargo, los atributos que sólo tienen fines para presentación no vamos a abordarlos aquí:

Tabla <tabla>

border: Especifica en pixeles el grosor del borde de la tabla. Sin embargo, pueden usarse hojas de estilo para ello.
cellpadding: Especifica en pixeles o porcentaje el espaciado que debe existir entre las celdas y su contenido. Las hojas de estilo ofrecen un control más poderoso de ese aspecto.
cellspacing: Especifica en pixeles o porcentaje el espacio que debe existir entre celdas. Las hojas de estilo ofrecen un control más poderoso de ese aspecto.
frame: Especifica cómo debe presentarse el borde de la tabla. Valores posibles: void, above, below, hsides, lhs, rhs, vsides, bos, border. Las hojas de estilo permiten controlar ese aspecto también.
rules: Indica que líneas deben ser dibujadas. Valores posibles: none, groups, rows, cols, all. Puede ser sustituida por hojas de estilo.
summary: Contiene un resumen del contenido de la tabla. Es obligatorio.
width: Indica en pixeles o porcentaje el ancho de la tabla. También se pueden usar las hojas de estilo para ese propósito.

Fila <tr>

align: Indica la alineación horizontal del contenido de las celdas. Valores posibles: right, left, center, justify, char. Las hojas de estilo pueden utilizarse para reemplazar la mayoría de sus posibles comportamientos.
char: El carácter que será utilizado como pivote de alineación. El atributo align debe ser igual a char.
charoff: Indica en pixeles o porcentaje el offset de la alineación basada en carácter.
valign: Especifica la alineación vertical de los datos en las celdas. Valores posibles: top, middle, bottom, baseline. Se pueden utilizar hojas de estilo para definir ese comportamiento

Celdas <th> y <td>

abbr: Una versión abreviada del contenido de la celda.
align: Indica la alineación horizontal del contenido de las celdas. Valores posibles: right, left, center, justify, char. Las hojas de estilo pueden ser utilizadas para reemplazar la mayoría de sus posibles comportamientos.
axis: Define un nombre a la celda.
char: El carácter que será utilizado como pivote de alineación. El atributo align debe ser igual a char.
charoff: Indica en pixeles o porcentaje el offset de la alineación basada en carácter.
colspan: Indica el número de columnas que esa celda debe expanderse.
headers: Una lista de elementos separados con un espacio que incluye las Id's de celdas que provean información de cabecera para la celda activa. Útil para los navegadores no visuales.
rowspan: Indica el número de filas que esa celda debe expanderse.
scope: Señala si la celda provee información de cabecera para la fila, columna, grupo de filas, o grupo de columnas que la contiene. Valores posibles: col, colgroup, row, rowgroup.
valign: Especifica la alineación vertical de los datos en las celdas. Valores posibles: top, middle, bottom, baseline. Se pueden utilizar hojas de estilo para definir ese comportamiento

Agrupación de filas <thead> y <tbody>

align: Indica la alineación horizontal del contenido de las celdas. Valores posibles: right, left, center, justify, char. Las hojas de estilo pueden ser utilizadas para reemplazar la mayoría de sus posibles comportamientos.
char: Especifica el carácter que se utilizará como pivote en la alineación basada en carácter. El atributo align debe ser igual a char.
charoff: Indica en pixeles o porcentaje el offset de la alineación basada en carácter.
valign: Especifica la alineación vertical de los datos en las celdas. Valores posibles: top, middle, bottom, baseline. Se pueden utilizar hojas de estilo para definir ese comportamiento

El obligado ejemplo de ésta sección:

Haz click aquí para ver el ejemplo

También se pueden incluir formularios, incrustar objetos, etc. pero esto será objeto de estudio en otros bloques de contenidos de este curso.