CAPITULO 7
web. Además de ser sencillo, el modelo definido por HTML es muy flexible y bastante completo.
Las tablas en HTML utilizan los mismos conceptos de filas, columnas, cabeceras y títulos que los
que se utilizan en cualquier otro entorno de publicación de documentos:
Figura 7.1. Partes que componen una tabla compleja
cabeceras y pies de tabla, subdivisiones, cabeceras múltiples y otros elementos complejos.
A pesar de que las tablas HTML son fáciles de comprender y utilizar, son uno de los elementos
más polémicos de HTML. El problema de las tablas es que no siempre se utilizan
adecuadamente. Aunque parezca obvio, las tablas se deben utilizar para mostrar información
tabular.
Hasta hace unos años, las tablas también se utilizaban para definir la estructura de las páginas
web. La cabecera de la página era una fila de una gran tabla, el pie de página era otra fila de esta
tabla y la zona de contenidos estaba formada por varias columnas dentro de esa gran tabla.
Aunque algunos malos diseñadores siguen utilizando hoy en día las tablas para definir la
estructura completa de las páginas web, se trata de una técnica obsoleta y nada recomendable.
El motivo es que se complica en exceso el código HTML y su mantenimiento es muy complejo. La
solución correcta para definir la estructura de las páginas consiste en la utilización de hojas de
estilos CSS.
7.1. Tablas básicas
Las tablas más sencillas de HTML se definen con tres etiquetas: <table> para crear la tabla, <tr>
para crear cada fila y <td> para crear cada columna.
A continuación se muestra el código HTML de una tabla sencilla:
<html>
<head><title>Ejemplo de tabla sencilla</title></head>
<body>
<h1>Listado de cursos</h1>
<table>
<tr>
<td><strong>Curso</strong></td>
<td><strong>Horas</strong></td>
<td><strong>Horario</strong></td>
</tr>
<tr>
<td>CSS</td>
<td>20</td>
<td>16:00 - 20:00</td>
</tr>
<tr>
<td>HTML</td>
<td>20</td>
<td>16:00 - 20:00</td>
</tr>
<tr>
<td>Dreamweaver</td>
<td>60</td>
<td>16:00 - 20:00</td>
</tr>
</table>
</body>
</html>
Si se visualiza el código anterior en cualquier navegador, se obtiene una tabla como la que
muestra la siguiente imagen:
Figura 7.2. Ejemplo de tabla sencilla creada con las etiquetas table, tr y td
"table row") definen cada fila de la tabla y encierran todas las columnas. Por último, la etiqueta
<td> (del inglés "table data cell") define cada una de las columnas de las filas, aunque realmente
HTML no define columnas sino celdas de datos.
Al definir una tabla, se debe pensar en primer lugar en las filas que la forman y a continuación en
las columnas. El motivo es que HTML procesa primero las filas y por eso las etiquetas <tr>
aparecen antes que las etiquetas <td>.
<table> Tabla
Atributos comunes básicos, i18n y eventos
Atributos
específicos
▪ summary = "texto" - Permite describir el contenido de la tabla (lo utilizan los
buscadores y las personas discapacitadas)
Tipo de elemento Bloque
Descripción Se emplea para definir tablas de datos
<tr> Fila de tabla
Atributos comunes básicos, i18n y eventos
Atributos
específicos
-
Tipo de elemento Bloque
Descripción Se emplea para definir cada fila de las tablas de datos
<td> Celda de tabla
Atributos comunes básicos, i18n y eventos
Atributos
específicos
▪ abbr = "texto" - Permite describir el contenido de la celda (se emplea sobre
todo con los navegadores de voz utilizados por personas discapacitadas)
▪ headers = "lista_de_id" - Indica las celdas que actúan como cabeceras para
esta celda (los títulos de las columnas y filas). Se indica como una lista de valores
del atributo "id" de celdas
▪ scope = "col, row, colgroup, rowgroup" - Indica las celdas para las que
esta celda será su cabecera. Ej: scope="col" indica que esta celda es la cabecera de
todas las demás celdas que están en la misma columna
▪ colspan = "numero" - Número de columnas que ocupa esta celda
▪ rowspan = "numero" - Número de filas que ocupa esta celda
Tipo de elemento Bloque
Descripción
Se emplea para definir cada una de las celdas que forman las filas de una tabla, es
decir, las columnas de la tabla
De todos los atributos disponibles para las celdas, los más utilizados son rowspan y colspan, que
se emplean para construir tablas complejas como las que se ven más adelante. Entre los demás
atributos, sólo se utiliza de forma habitual el atributo scope, sobre todo con las celdas de
cabecera que se ven a continuación.
Normalmente, algunas de las celdas de la tabla se utilizan como cabecera de las demás celdas de
la fila o de la columna. En este caso, HTML define la etiqueta <th> (del inglés "table header cell")
para indicar que una celda es cabecera de otras celdas.
<th> Celda cabecera de tabla
Atributos comunes básicos, i18n y eventos
Atributos
específicos
▪ abbr = "texto" - Permite describir el contenido de la celda (se emplea sobre
todo con los navegadores de voz utilizados por personas discapacitadas)
▪ headers = "lista_de_id" - Indica las celdas que actúan como cabeceras para
esta celda (los títulos de las columnas y filas). Se indica como una lista de ID de
celdas
▪ scope = "col, row, colgroup, rowgroup" - Indica las celdas para las que
esta celda será su cabecera. Ej: scope="col" indica que esta celda es la cabecera de
todas las demás celdas que están en la misma columna
▪ colspan = "numero" - Número de columnas que ocupa esta celda
▪ rowspan = "numero" - Número de filas que ocupa esta celda
Tipo de elemento Bloque
Descripción
Se emplea para definir las celdas que son cabecera de una fila o de una columna de la
tabla
Los atributos de la etiqueta <th> son idénticos que los atributos definidos para la etiqueta <td>.
En este caso, el atributo más utilizado es scope, que permite indicar si la celda es cabecera de la
fila o de la columna (<th scope="row"> y <th scope="col"> respectivamente).
Por otra parte, HTML define la etiqueta <caption> para establecer la leyenda o título de una
tabla. La etiqueta debe colocarse inmediatamente después de la etiqueta <table> y cada tabla
sólo puede incluir una etiqueta <caption>.
<caption> Leyenda o título de tabla
Atributos comunes básicos, i18n y eventos
Atributos
específicos
-
Tipo de elemento En línea
Descripción Se emplea para definir la leyenda o título de una tabla
Ejercicio 11
Determinar el código HTML necesario para crear la tabla que se muestra en la siguiente imagen:
Figura 7.3. Tabla sencilla con celdas de cabecera
osibles.
Ejercicio 12
Determinar el código HTML necesario para crear la tabla que se muestra en la siguiente imagen.
Utilizar las celdas de cabecera donde sea necesario y añadir todos los atributos posibles.
Figura 7.4. Tabla con los resultados de una búsqueda
formar una columna ancha o une varias filas para formar una fila más alta que las demás. Para
fusionar filas o columnas, se utilizan los atributos rowspan y colspan respectivamente.
La siguiente imagen muestra una tabla compleja que ha fusionado dos columnas simples para
formar una columna más ancha:
Figura 7.5. Ejemplo sencillo de fusión de columnas
<table>
<tr>
<td colspan="2">A</td>
</tr>
<tr>
<td>B</td>
<td>C</td>
</tr>
</table>
La primera fila de la tabla está formada sólo por una columna, mientras que la segunda fila está
formada por dos columnas. En principio, podría pensarse en utilizar el siguiente código HTML
para definir la tabla:
<table>
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
<td>C</td>
</tr>
</table>
Sin embargo, si se utiliza el código anterior, el navegador visualiza de forma incorrecta la tabla,
ya que las tablas en HTML deben disponer de una estructura regular. En otras palabras, todas las
filas de una tabla HTML deben tener el mismo número de columnas. Por lo tanto, si se quieren
mostrar menos columnas en una fila, se fusionan mediante el atributo colspan, que indica el
número de columnas simples que va a ocupar una determinada celda.
En el ejemplo anterior, la celda de la primera fila debe ocupar el espacio de dos columnas
simples, por lo que el código HTML debe ser <td colspan="2">A</td>.
De forma equivalente, si se quiere diseñar una tabla HTML que fusiona filas como la de la
siguiente imagen:
Figura 7.6. Ejemplo sencillo de fusión de filas
<table>
<tr>
<td>A</td>
<td rowspan="2">B</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>
De forma análoga a la fusión de columnas del ejemplo anterior, la fusión de filas debe indicarse
de forma especial. Como las tablas HTML tienen que ser regulares, todas las columnas deben
tener el mismo número de filas. Así, si en el ejemplo anterior se utilizara el siguiente código:
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>
La tabla anterior no se visualizaría correctamente. Como la segunda columna de la tabla ocupa el
espacio de las dos filas, el código HTML debe indicar claramente que esa celda va a ocupar dos
filas, de manera que todas las columnas de la tabla cuenten con el mismo número de filas.
Utilizando los atributos rowspan y colspan, es posible diseñar tablas tan complejas como las que
se muestran en los siguientes ejemplos.
Ejemplo de fusión de múltiples columnas:
Figura 7.7. Ejemplo complejo de fusión de columnas
continuación:
<html>
<head><title>Ejemplo de columnas fusionadas</title></head>
<body>
<h1>Fusión de columnas</h1>
<table>
<tr>
<td colspan="3">A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td colspan="2">D</td>
<td>E</td>
</tr>
<tr>
<td colspan="4">F</td>
</tr>
<tr>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
Introducción a XHTML Capítulo 7. Tablas
www.librosweb.es 91
</tr>
</table>
</body>
</html>
Ejemplo de fusión de múltiples filas:
Figura 7.8. Ejemplo complejo de fusión de filas
<html>
<head><title>Ejemplo de filas fusionadas</title></head>
<body>
<h1>Fusión de filas</h1>
<table>
<tr>
<td>A</td>
<td>B</td>
<td rowspan="3">C</td>
<td>D</td>
</tr>
<tr>
<td rowspan="2">E</td>
<td>F</td>
<td rowspan="3">G</td>
</tr>
<tr>
<td>H</td>
</tr>
<tr>
<td>I</td>
<td>J</td>
<td>K</td>
</tr>
</table>
</body>
</html>
Ejercicio 13
Determinar el código HTML necesario para crear la tabla que se muestra en la siguiente imagen:
Figura 7.9. Ejemplo de tabla con una estructura compleja
abbr, scope, summary.
7.2. Tablas avanzadas
Algunas tablas complejas están formadas por más elementos que filas y celdas de datos. Así, es
común que las tablas más avanzadas dispongan de una sección de cabecera, una sección de pie y
varias secciones de datos. Además, también es posible agrupar varias columnas de forma lógica
para poder aplicar estilos similares a un determinado grupo de columnas.
Un ejemplo clásico de tablas avanzadas es el de las tablas utilizadas en contabilidad, como por
ejemplo la tabla que muestra el balance de una empresa:
Figura 7.10. Ejemplo de tabla compleja correspondiente al balance de una empresa
<tbody> y <tfoot>. La cabecera de la tabla se define con la etiqueta <thead>, el pie de la tabla se
define mediante <tfoot> y cada sección de datos se define con una etiqueta <tbody>.
<thead>
<tbody>
<tfoot>
Cabecera de tabla
Sección de una tabla
Pie de tabla
Atributos comunes básicos, i18n y eventos
Atributos
específicos
-
Tipo de elemento Bloque
Descripción
Se emplean para agrupar varias filas en una cabecera (thead) un pie (tfoot) o una
sección (tbody) de una tabla
Cada tabla puede contener solamente una cabecera y un pie, pero puede incluir un número
ilimitado de secciones. Si se define una cabecera y/o un pie, las etiquetas <thead> y/o <tfoot>
deben colocarse inmediatamente antes que cualquier etiqueta <tbody>.
La siguiente imagen muestra una tabla avanzada con cabecera, pie y una sección de datos:
Figura 7.11. Ejemplo de tabla avanzada con cabecera, pie y secciones
El código HTML necesario para crear la tabla de la imagen anterior hace uso de las etiquetas
<thead>, <tbody> y <tfoot>:
<html>
<head><title>Ejemplo de tabla avanzada</title></head>
<body>
<h3>Análisis de ventas</h3>
<table summary="Análisis de ventas anuales">
<caption>Análisis de ventas anuales</caption>
<thead>
<tr>
<th rowspan="2" scope="col">AÑO</th>
<th colspan="4" scope="col">Expansión de ventas</th>
</tr>
<tr>
<th scope="col">Producto A</th>
<th scope="col">Producto B</th>
<th scope="col">Producto C</th>
<th scope="col">Producto D</th>
</tr>
</thead>
<tfoot>
<tr>
<th rowspan="2" scope="col">AÑO</th>
<th scope="col">Producto A</th>
<th scope="col">Producto B</th>
<th scope="col">Producto C</th>
<th scope="col">Producto D</th>
</tr>
<tr>
<th colspan="4" scope="col">Expansión de ventas</th>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">N-3</th><td>-</td><td>-</td><td>-</td><td>-</td>
</tr>
<tr>
<th scope="row">N-2</th><td>3</td><td>5</td><td>8</td><td>4</td>
</tr>
<tr>
<th scope="row">N-1</th><td>4</td><td>4</td><td>7</td><td>3</td>
</tr>
<tr>
<th scope="row">N</th><td>5</td><td>7</td><td>6</td><td>2</td>
</tr>
</tbody>
</table>
</body>
</html>
Aunque al principio resulta extraño, el elemento <tfoot> siempre se escribe antes que cualquier
elemento <tbody> en el código HTML. De hecho, si la etiqueta <tfoot> aparece después de un
elemento <tbody>, la página no se considera válida.
La etiqueta <tbody> permite realizar agrupaciones de filas, pero en ocasiones se necesitan
agrupar columnas. Aunque su uso no es muy común, HTML define dos etiquetas similares para
agrupar columnas: <col> y <colgroup>.
La etiqueta <col> se utiliza para asignar los mismos atributos a varias columnas de forma
simultánea. De esta forma, la etiqueta <col> no agrupa columnas, sino que sólo asigna atributos
comunes a varias columnas.
La siguiente imagen muestra una tabla que hace uso de la etiqueta <col>:
Figura 7.12. Ejemplo de tabla avanzada que usa la etiqueta col
<table summary="Análisis de ventas anuales">
<caption>Análisis de ventas anuales</caption>
<col style="width:10%;" />
<col style="width:30%;" />
<thead>
<tr>
<th scope="col">AÑO</th>
<th scope="col">Producto A</th>
<th scope="col">Producto B</th>
<th scope="col">Producto C</th>
<th scope="col">Producto D</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">N-3</th><td>-</td><td>-</td><td>-</td><td>-</td>
</tr>
<tr>
<th scope="row">N-2</th><td>3</td><td>5</td><td>8</td><td>4</td>
</tr>
<tr>
<th scope="row">N-1</th><td>4</td><td>4</td><td>7</td><td>3</td>
</tr>
<tr>
<th scope="row">N</th><td>5</td><td>7</td><td>6</td><td>2</td>
</tr>
</tbody>
</table>
Por otra parte, la etiqueta <colgroup> se emplea para agrupar de forma estructural varias
columnas de la tabla. La forma habitual de indicar el número de columnas que abarca la
agrupación es utilizar el atributo span, que establece el número de columnas de cada agrupación.
La siguiente imagen muestra una tabla avanzada con una agrupación de columnas realizada con
la etiqueta <colgroup>:
Figura 7.13. Ejemplo de tabla avanzada que usa la etiqueta colgroup
<table summary="Análisis de ventas anuales">
<caption>Análisis de ventas anuales</caption>
<colgroup span="1" style="color:red;" />
<colgroup span="3" style="color:blue;" />
<thead>
<tr>
<th scope="col">AÑO</th>
<th scope="col">Producto A</th>
<th scope="col">Producto B</th>
<th scope="col">Producto C</th>
<th scope="col">Producto D</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">N-3</th><td>-</td><td>-</td><td>-</td><td>-</td>
</tr>
<tr>
<th scope="row">N-2</th><td>3</td><td>5</td><td>8</td><td>4</td>
</tr>
<tr>
<th scope="row">N-1</th><td>4</td><td>4</td><td>7</td><td>3</td>
</tr>
<tr>
<th scope="row">N</th><td>5</td><td>7</td><td>6</td><td>2</td>
</tr>
</tbody>
</table>
El uso de las etiquetas <col> y <colgroup> no está muy extendido, debido a que la mayoría de
navegadores no soportan muchas de sus funcionalidades.
No hay comentarios:
Publicar un comentario