Tablas

Las tablas complejas suelen disponer de una estructura irregular
que junta varias columnas para formar una columna ancha o une
varias filas para formar una fila ms alta que las dems. 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 ms
ancha:
Figura 7.5 Ejemplo sencillo de fusin de columnas
Para obtener una tabla como la de la imagen anterior, se debe

utilizar el siguiente cdigo:
<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 slo por una columna,

mientras que la segunda fila est formada por dos columnas. En
principio, podra pensarse en utilizar el siguiente cdigo 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 cdigo 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 nmero
de columnas. Por lo tanto, si se quieren mostrar menos columnas
en una fila, se fusionan mediante el atributo colspan, que indica el
nmero 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 cdigo HTML
debe ser <td colspan="2">A</td>.
De forma equivalente, si se quiere disear una tabla HTML que
fusiona filas como la de la siguiente imagen:
Figura 7.6 Ejemplo sencillo de fusin de filas
El cdigo HTML que se debe utilizar para obtener la tabla de la

imagen anterior es:
<table>
<tr>
<td>A</td>
<td rowspan="2">B</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>
De forma anloga a la fusin de columnas del ejemplo anterior, la

fusin de filas debe indicarse de forma especial. Como las tablas
HTML tienen que ser regulares, todas las columnas deben tener
el mismo nmero de filas. As, si en el ejemplo anterior se utilizara
el siguiente cdigo:
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>
La tabla anterior no se visualizara correctamente. Como la

segunda columna de la tabla ocupa el espacio de las dos filas, el
cdigo 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 nmero de filas.
Utilizando los atributos rowspan y colspan, es posible disear

tablas tan complejas como las que se muestran en los siguientes
ejemplos.
Ejemplo de fusin de mltiples columnas:
Figura 7.7 Ejemplo complejo de fusin de columnas
El cdigo HTML necesario para fusionar las columnas de la tabla
anterior se muestra a continuacin:
<html>
<head><title>Ejemplo de columnas fusionadas</title></head>
<body>
<h1>Fusin 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>
</tr>
</table>
</body>
</html>
Ejemplo de fusin de mltiples filas:

Figura 7.8 Ejemplo complejo de fusin de filas
El cdigo HTML necesario para fusionar las filas de la tabla
anterior se muestra a continuacin:
<html>
<head><title>Ejemplo de filas fusionadas</title></head>
<body>
<h1>Fusin 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 cdigo HTML necesario para crear la tabla que se
muestra en la siguiente imagen:
Figura 7.9 Ejemplo de tabla con una estructura compleja
Emplear las etiquetas <table>, <tr>, <td>, <th>, <caption> y los
atributos colspan, rowspan, abbr, scope, summary.
Cada tabla puede contener solamente una cabecera y un pie,
pero puede incluir un nmero 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 seccin de datos:
Figura 7.11 Ejemplo de tabla avanzada con cabecera, pie y
secciones
El cdigo 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>Anlisis de ventas</h3>
<table summary="Anlisis de ventas anuales">
<caption>Anlisis de ventas anuales</caption>
<thead>
<tr>
<th rowspan="2" scope="col">AO</th>
<th colspan="4" scope="col">Expansin 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">AO</th>
</tr>
<tr>
<th colspan="4" scope="col">Expansin 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-
</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 extrao, el elemento <tfoot> siempre

se escribe antes que cualquier elemento <tbody> en el cdigo
HTML. De hecho, si la etiqueta <tfoot> aparece despus de un
elemento <tbody>, la pgina no se considera vlida.
La etiqueta <tbody> permite realizar agrupaciones de filas, pero

en ocasiones se necesitan agrupar columnas. Aunque su uso no
es muy comn, 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 simultnea. De esta forma, la
etiqueta <col> no agrupa columnas, sino que slo 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
El cdigo HTML necesario para crear la tabla anterior se muestra

a continuacin:
<col style="width:10%;" />
<col style="width:30%;" />
<thead>
<tr>
<th scope="col">AO</th>

</tr>
</thead>
<tbody>
<tr>
</td><td>-</td>
</tr>
<tr>
<th scope="row">N-
</tr>
<tr>
<th scope="row">N-
</tr>
<tr>
<th
</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 nmero de columnas que abarca la agrupacin es
utilizar el atributo span, que establece el nmero de columnas de
cada agrupacin.
La siguiente imagen muestra una tabla avanzada con una
agrupacin de columnas realizada con la etiqueta <colgroup>:
Figura 7.13 Ejemplo de tabla avanzada que usa la etiqueta

colgroup
El cdigo HTML necesario para crear la tabla anterior se muestra
a continuacin:
<colgroup span="1" style="color:red;" />

<colgroup span="3" style="color:blue;" />
<thead>
<tr>
<th scope="col">AO</th>
</tr>
</thead>
<tbody>
<tr>
</td><td>-</td>
</tr>
<tr>
<th scope="row">N-
</tr>
<tr>
<th scope="row">N-
</tr>
<tr>
<th
</tr>
</tbody>
</table>
El uso de las etiquetas <col> y <colgroup> no est muy extendido,

debido a que la mayora de navegadores no soportan muchas de
sus funcionalidades.
colores
Tabla de ejemplo
Mi tabla Primera Columna Segunda Columna

Primera fila
A-1 A-2
B-2
Segunda fila B-1
Cdigo de la tabla
<table border="1" align="center" bordercolor="blue" cellspacing="0">
<caption>Tabla de ejemplo</caption>
<tr valign="bottom" align="center">
<td height="50" width="150" bgcolor="yellow">Mi tabla</td>
<th width="200" bgcolor="aqua">Primera Columna</th>
<th width="200" bgcolor="aqua">Segunda Columna</th>
</tr>
<tr>
<th height="75" valign="top" bgcolor="lime">Primera fila</th>
<td align="center">A-1</td>
<td align="right">A-2</td>
</tr>
<tr>
<th height="75" valign="bottom" bgcolor="lime">Segunda fila</td>
<td align="center" valign="bottom">B-1</td>
<td align="center" valign="top" background="objetos/fondo.gif">B-
2</td>
</tr>
</table>
Tabla de ejemplo

Primera fila
A-1 A-2
B-2
Segunda fila B-1
Cdigo de la tabla
<table border="1" align="center">
<td height="50" width="150">Mi tabla</td>
<th width="200">Primera Columna</th>
<th width="200">Segunda Columna</th>
</tr>
<tr>
<th height="75" valign="top">Primera fila</th>
</tr>
<tr>
<th height="75" valign="bottom">Segunda fila</td>
<td align="center" valign="top">B-2</td>
</tr>
</table>
Tabla de ejemplo
Primera fila A-1 A-2
Segunda fila B-1 B-2
Cdigo de la tabla
<table border="1">
<tr >
</tr>
<tr>
<th height="75">Primera fila</th>
<td>A-1</td>
<td>A-2</td>
</tr>
<tr>
<th height="75">Segunda fila</td>
<td>B-1</td>
<td>B-2</td>
</tr>
</table>
Tabla de ejemplo

Primera fila
A-1 A-2
B-2
Segunda fila B-1
Cdigo de la tabla
<table border="1" align="center" cellspacing="0" cellpadding="5">
</tr>
<tr>
<th height="75" valign="top">Primera fila</th>
</tr>
<tr>
<th height="75" valign="bottom">Segunda fila</td>
<td align="center" valign="top">B-2</td>
</tr>
</table>
Fusionar celdas consiste en unir varias celdas en una,

haciendo que sta ocupe el espacio de varias filas o columnas.
Fusin de celdas en la misma fila

Para que una celda ocupe dos o ms columnas dentro de la
misma fila, se utiliza el atributo colspan. El valor de este
atributo es el nmero de columnas que queremos que ocupe la
celda. Veamos un ejemplo:
Columna Columna
Columna 2 Columna 3
1 4
Fusin celdas F1-C2 y F1-

F1-C1 F1-C4
C3
Fusin celdas F2-C1 y Fusin celdas F2-C3 y

F2-C2 F2-C4
Fusin celdas F3-C1, F3-C2, F3-C3 y F3-C4
La tabla de este ejemplo tiene el siguiente cdigo HTML:
<table width="80%" border="1" cellspacing="0"

cellpadding="5">
<tr>
<th>Columna 1</th>
<th>Columna 2</th>
<th>Columna 3</th>
<th>Columna 4</th>
</tr>
<tr>
<td> F1-C1</th>
<td colspan="2"> Fusin celdas F1-C2 y F1-C3</td>
<td> F1-C4</td>
</tr>
<tr>
<td colspan="2">Fusin celdas F2-C1 y F2-C2</td>
<td colspan="2">Fusin celdas F2-C3 y F2-C4</td>
</tr>
<tr>
<td colspan="4">Fusin celdas F3-C1, F3-C2, F3-C3 y F3-
C4</td>
</tr>
</table>
En el cdigo anterior observamos que todas las filas deben

tener el mismo nmero de columnas (no de celdas), de no ser
as la tabla no se muestra correctamente. Cada
atributo colspan marca las columnas que ocupa la celda a la
que pertenece. No se cuenta el nmero de celdas, sino el de
columnas que ocupa la fila, que debe ser siempre el mismo.
Por tanto si en una celda (etiqueta td o th) hay un
atributo colspan="2" la celda est ocupando dos columnas, por
lo que deberemos poner una celda menos para que el nmero
de colummas sea el mismo que en las dems filas.
Fusin de celdas en la misma columna
De forma anloga a lo visto anteriormente, podemos
fusionar varias celdas contiguas que estn en la misma
columna; para ello utilizaremos el atributo rowspan. Al igual que
en el caso anterior, el valor del atributo ser el nmero de
celdas que queramos fusionar.
Para no confundirse al escribir el cdigo, es conveniente
dibujar primero la tabla en un papel para hacerse a la idea de
las celdas que debemos poner en cada fila, ya que si un espacio
de celda de una fila est ocupado por una celda fusionada de la
fila anterior, no debemos incluir ninguna etiqueta para ese
espacio de celda, pasando a la etiqueta de la celda siguiente.
Veamos un ejemplo:
Fila
F1-C1
1 Fusin
F1-C2 y
Fusin F1-
Fila F2-C2
C3, F2-C3 Fusin F1-
2 Fusion
y F3-C3 C4, F2-C4,
F2-C1 y
F3-C4 y F4-
Fila F3-C1
C4
3 Fusin
F3-C2 y
Fila F4-C2
F4-C1 F4-C3
4
El cdigo HTML de esta tabla es el siguiente: :
<table width="80%" border="1" cellspacing="0"

cellpadding="5">
<tr>
<th>Fila 1</th>
<td>F1-C1</td>
<td rowspan="2">Fusin F1-C2 y F2-C2</td>
<td rowspan="3">Fusin F1-C3, F2-C3 y F3-C3</td>
<td rowspan="4">Fusin F1-C4, F2-C4, F3-C4 y F4-C4</td>
</tr>
<tr>
<th>Fila 2</th>
<td rowspan="2">Fusion F2-C1 y F3-C1</td>
</tr>
<tr>
<th>Fila 3</th>
<td rowspan="2">Fusin F3-C2 y F4-C2<
</tr>
<tr>
<th>Fila 4</th>
<td>F4-C1</td>
<td>F4-C3</td>
<tr>
</table>
Si una fila est ya ocupada por una celda fusionada con otra
de una fila superior, no debemos marcarla con ninguna etiqueta,
ya que est indicada mediante el atributo rowspan en la fila
superior.
Como ya se ha indicado, es conveniente, antes de crear la
tabla en HTML, hacer un esquema de la misma sobre papel,
para tener en cuenta cuantas etiquetas de celda (td y th) hay
que poner para que la tabla se forme de manera correcta.
Fusin de celdas en filas y columnas

Tambin se pueden fusionar filas y columnas a la vez en la
misma tabla, para ello slo hay que combinar los
atributos colspan y rowspan para obtener celdas de diferentes
tamaos y ocupando varias filas y columnas a la vez, segn
como queramos el diseo de la tabla.
En el siguiente enlace se muestra una pgina de ejemplo con
una tabla compleja en el que se fusionan celdas tanto en
horizontal como en vertical. Debajo de la tabla se muestra su
cdigo en HTML.
Ejemplo de fusin de celdas
Fusin de Columna Columna

celdas Columna 1 Columna 2 3 4 Columna 5
Fila 1 Celda con colspan 2 Celda con colspan 2

Celda con
rowspan 2
Fila 2 Celda con colspan 2
Celda con Celda con
rowspan 2 rowspan 2
Fila 3
Celda con Celda con colspan 2 y
rowspan 2 rowspan 2
Celda Celda
Fila 4
normal normal
Cdigo de la tabla
<caption>Ejemplo de fusin de celdas</caption>
<tr valign="bottom" align="center" >
<td height="50" width="150">Fusin de celdas</td>
<th width="100">Columna 1</th>
</tr>
<tr>
<th height="50">Fila 1</th>
<td rowspan="2">Celda con rowspan 2</td>
<td colspan="2">Celda con colspan 2</td>
</tr>
<tr>
</tr>
<tr>
<td colspan="2" rowspan="2">Celda con colspan 2 y rowspan 2</td>
</tr>
<tr>
<td>Celda normal</td>
<td>Celda normal</td>
</tr>
</table>
Anidar tablas
Al igual que con las listas, tambin podemos incluir una tabla
dentro de otra, para ello basta con meter el contenido de la
tabla secundaria dentro de una celda de la tabla principal. La
siguiente pgina de ejemplo muestra varias tablas anidadas
dentro de una tabla principal.
Ejemplo de Tablas anidadas
Tabla
princip
al Columna 1 Columna 2
Tabla 1 Tabla 2
Fila 1 Celda 1 Celda 2 Celda 1
Celda 3 Celda 4 Celda 2 Celda 3
Tabla 3 Tabla 4
Fila 2 Celda 2 Celda 1 Celda 2
Celda 1
Celda 3 Celda 3
Cdigo de la tabla
<caption>Ejemplo de Tablas anidadas</caption>
<td height="50" width="100">Tabla principal</td>
</tr>
<tr>
<td>
<table border="1" align="center" cellspacing="0" cellpadding="5"
width="300" height="150">
<caption>Tabla 1</caption>
<tr>
<td> Celda 1</td>
<td> Celda 2</td>
</tr>
<tr>
<td> Celda 3</td>
<td> Celda 4</td>
</tr>
</table>
</td>
<td>
<tr>
<td colspan="2"> Celda 1</td>
</tr>
<tr>
<td> Celda 2</td>
<td> Celda 3</td>
</tr>
</table>
</td>
</tr>
<tr>
<td >
<tr>
<td rowspan="2"> Celda 1</td>
<td> Celda 2</td>
</tr>
<tr>
<td> Celda 3</td>
</tr>
</table>
</td>
<td >
<tr>
<td> Celda 1</td>
<td> Celda 2</td>
</tr>
<tr>
<td colspan="2"> Celda 3</td>
</tr>
</table>
</td>
</tr>
</table>
Economa domstica
Nota: Los atributos de esta tabla no se muestran en todos los navegadores, por lo
que para ver el estilo completo debemos verla en Internet Explorer. Si queremos
que las tablas se muestren con el mismo estilo en todos los navetadores,
deberemos usar los estilos CSS.
Gasto domstico Primer Semestre
concepto
Mes Total
Corriente Facturas Coche Casa
Totales --- --- --- --- ---

Gasto domstico Primer Semestre
concepto
Mes Total
Corriente Facturas Coche Casa
Corriente Facturas Coche Casa TOTAL
Enero - --- ---- ---- ----
Febrero --- --- --- --- ----
Marzo 4 4 7 3 -
Abril 5 7 6 2 -
Mayo 5 7 6 2 -
Junio 5 7 6 2 -
<table summary="Economa primer semestre" border="1" width="70%"

cellspacing="0" bordercolor="red"
cellpadding="5" align="center">
<caption>Gasto domstico Primer Semestre</caption>
<thead bgcolor="yellow" >

<tr>
<th rowspan="2">Mes</th>
<th colspan="4">concepto</th>
<th rowspan="2">Total</th>
</tr>
<tr>
<th>Corriente</th>
<th>Facturas</th>
<th>Coche</th>
<th>Casa</th>
</tr>
</thead>
<tfoot bgcolor="aqua">
<tr>
<th rowspan="2">Totales</th>
<th>---</th>
<th>---</th>
<th>---</th>
<th>---</th>
<th>---</th>
</tr>
<tr>
<th>Corriente</th>
<th>Facturas</th>
<th>Coche</th>
<th>Casa</th>
<th>TOTAL</th>
</tr>
</tfoot>
<tbody>
<col bgcolor="#ccffff"/>
<colgroup span="4" bgcolor="#fff4d0" align="right"/>
<colgroup span="1" bgcolor="#ccffcc"/>
<tr>
<th>Enero</th><td>-</td><td>---</td><td>----</td><td>----</td><th>----
</th>
</tr>
<tr>
<th>Febrero</th><td>---</td><td>---</td><td>---</td><td>---</td><th>---
-</th>
</tr>
<tr>
<th>Marzo</th><td>4</td><td>4</td><td>7</td><td>3</td><th>-</th>
</tr>
<tr>
<th>Abril</th><td>5</td><td>7</td><td>6</td><td>2</td><th>-</th>
</tr>
<tr>
<th>Mayo</th><td>5</td><td>7</td><td>6</td><td>2</td><th>-</th>
</tr>
<tr>
<th>Junio</th><td>5</td><td>7</td><td>6</td><td>2</td><th>-</th>
</tr>
</tbody>
</table>

Tablas

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tablas

Uploaded by

Copyright:

Available Formats

Las tablas complejas suelen disponer de una estructura irregular

Figura 7.5 Ejemplo sencillo de fusin de columnas

Para obtener una tabla como la de la imagen anterior, se debe

La primera fila de la tabla est formada slo por una columna,

Sin embargo, si se utiliza el cdigo anterior, el navegador

Figura 7.6 Ejemplo sencillo de fusin de filas

El cdigo HTML que se debe utilizar para obtener la tabla de la

De forma anloga a la fusin de columnas del ejemplo anterior, la

La tabla anterior no se visualizara correctamente. Como la

Utilizando los atributos rowspan y colspan, es posible disear

<head><title>Ejemplo de columnas fusionadas</title></head>

Ejemplo de fusin de mltiples filas:

<head><title>Ejemplo de filas fusionadas</title></head>

La siguiente imagen muestra una tabla avanzada con cabecera,

<head><title>Ejemplo de tabla avanzada</title></head>

<caption>Anlisis de ventas anuales</caption>

<th rowspan="2" scope="col">AO</th>

<th colspan="4" scope="col">Expansin de ventas</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>

<th rowspan="2" scope="col">AO</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>

<th colspan="4" scope="col">Expansin de ventas</th>

Aunque al principio resulta extrao, el elemento <tfoot> siempre

La etiqueta <tbody> permite realizar agrupaciones de filas, pero

La etiqueta <col> se utiliza para asignar los mismos atributos a

El cdigo HTML necesario para crear la tabla anterior se muestra

<caption>Anlisis de ventas anuales</caption>

<col style="width:10%;" />

<col style="width:30%;" />

<th scope="col">Producto A</th>

<th scope="col">Producto C</th>

<th scope="col">Producto D</th>

Figura 7.13 Ejemplo de tabla avanzada que usa la etiqueta

<caption>Anlisis de ventas anuales</caption>

<colgroup span="1" style="color:red;" />

<th scope="col">Producto A</th>

<th scope="col">Producto B</th>

<th scope="col">Producto C</th>

<th scope="col">Producto D</th>

El uso de las etiquetas <col> y <colgroup> no est muy extendido,

Mi tabla Primera Columna Segunda Columna

Segunda fila B-1

Mi tabla Primera Columna Segunda Columna

Segunda fila B-1

Primera fila A-1 A-2

Segunda fila B-1 B-2

Mi tabla Primera Columna Segunda Columna

Segunda fila B-1

Fusionar celdas consiste en unir varias celdas en una,

Fusin de celdas en la misma fila

Fusin celdas F1-C2 y F1-

Fusin celdas F2-C1 y Fusin celdas F2-C3 y

Fusin celdas F3-C1, F3-C2, F3-C3 y F3-C4

La tabla de este ejemplo tiene el siguiente cdigo HTML:

<table width="80%" border="1" cellspacing="0"

En el cdigo anterior observamos que todas las filas deben

El cdigo HTML de esta tabla es el siguiente: :

<table width="80%" border="1" cellspacing="0"