Tablas avanzadas en html
Páginas: 7 (1538 palabras)
Publicado: 11 de febrero de 2012
-------------------------------------------------
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 undeterminado 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
Las partes que componen las tablas complejas se definen mediante las etiquetas <thead>, <tbody> y <tfoot>. Lacabecera 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 tablaSección de una tablaPie de tabla |
Atributos comunes | básicos, i18n y eventos |
Atributos específicos | - |
Tipo de elemento | Bloque |
Descripción | Seemplean 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 siguienteimagen 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 tablaavanzada</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>
<thscope="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>...
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 undeterminado 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
Las partes que componen las tablas complejas se definen mediante las etiquetas <thead>, <tbody> y <tfoot>. Lacabecera 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 tablaSección de una tablaPie de tabla |
Atributos comunes | básicos, i18n y eventos |
Atributos específicos | - |
Tipo de elemento | Bloque |
Descripción | Seemplean 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 siguienteimagen 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 tablaavanzada</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>
<thscope="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>...
Leer documento completo
Regístrate para leer el documento completo.