| 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. Las partes que componen las tablas complejas se definen mediante las siguientes etiquetas:
<thead> y/o <tfoot> deben colocarse inmediatamente antes que cualquier etiqueta <tbody> La siguiente es una tabla avanzada con cabecera, pie y una sección de datos: |
| AÑO | Expansión de ventas | |||
|---|---|---|---|---|
| Producto A | Producto B | Producto C | Producto D | |
| AÑO | Producto A | Producto B | Producto C | Producto D |
| Expansión de ventas | ||||
| N-3 | - | - | - | - |
| N-2 | 3 | 5 | 8 | 4 |
| N-1 | 4 | 4 | 7 | 3 |
| N | 5 | 7 | 6 | 2 |
| El código HTML necesario para crear la tabla de la imagen anterior hace uso de las etiquetas <thead>, <tbody> y <tfoot>: |
<table summary="Análisis de ventas anuales" border="1" align="center"> <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> | Aunque al principio resulta extraño, el elemento <tfoot> siempre se escribe antes que cualquier elemento <tbodyt> 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>: |
| AÑO | Producto A | Producto B | Producto C | Producto D |
|---|---|---|---|---|
| N-3 | - | - | - | - |
| N-2 | 3 | 5 | 8 | 4 |
| N-1 | 4 | 4 | 7 | 3 |
| N | 5 | 7 | 6 | 2 |
| El código HTML necesario para crear ña tabla anterior es el siguiente: |
<table summary="Análisis de ventas anuales" align="center" border="1"> <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 es una tabla avanzada con una agrupación de columnas realizada con la etiqueta <colgroup>: |
| AÑO | Producto A | Producto B | Producto C | Producto D |
|---|---|---|---|---|
| N-3 | - | - | - | - |
| N-2 | 3 | 5 | 8 | 4 |
| N-1 | 4 | 4 | 7 | 3 |
| N | 5 | 7 | 6 | 2 |
| El código necesario para crear la tabla anterior es el siguiente: |
<table summary="Análisis de ventas anuales" border="1" align="center"> <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 <colgroup> y <col> no está muy extendido, debido a que la mayoría de navegadores no soportan muchas de sus funcionalidades. |
| Twittear |
| |
|---|
| Tablas básicas |
| Tablas avanzadas |
| Tablas con esquinas redondeadas |
| Colorear esdquinas redondeadas |
0 comentarios :
Este blog ya cumplió su ciclo, por esta razón, aunque sigue a disposición de los usuarios, no se harán más publicaciones ni se atenderán más consultas. La respuesta a su inquietud puede estar entre los comentarios hechos hasta aquí.
El autor.