Documente Academic
Documente Profesional
Documente Cultură
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:
<tr>
<td colspan="2">A</td>
</tr>
<tr>
<td>B</td>
<td>C</td>
</tr>
</table>
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
<td>C</td>
</tr>
</table>
<tr>
<td>A</td>
<td rowspan="2">B</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>
<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>
<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>.
<body>
<h3>Anlisis de ventas</h3>
<table summary="Anlisis de ventas anuales">
<thead>
<tr>
</tr>
<tr>
</tr>
</thead>
<tfoot>
<tr>
</tr>
<tr>
</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>
<thead>
<tr>
<th scope="col">AO</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 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>:
<thead>
<tr>
<th scope="col">AO</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>
Tabla de ejemplo
B-2
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
B-2
Cdigo de la tabla
<table border="1" align="center">
<caption>Tabla de ejemplo</caption>
<tr valign="bottom" 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>
<td align="center">A-1</td>
<td align="right">A-2</td>
</tr>
<tr>
<th height="75" valign="bottom">Segunda fila</td>
<td align="center" valign="bottom">B-1</td>
<td align="center" valign="top">B-2</td>
</tr>
</table>
Tabla de ejemplo
Mi tabla Primera Columna Segunda Columna
Cdigo de la tabla
<table border="1">
<caption>Tabla de ejemplo</caption>
<tr >
<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">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
Cdigo de la tabla
<table border="1" align="center" cellspacing="0" cellpadding="5">
<caption>Tabla de ejemplo</caption>
<tr valign="bottom" 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>
<td align="center">A-1</td>
<td align="right">A-2</td>
</tr>
<tr>
<th height="75" valign="bottom">Segunda fila</td>
<td align="center" valign="bottom">B-1</td>
<td align="center" valign="top">B-2</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.
Cdigo de la tabla
<table border="1" align="center" cellspacing="0" cellpadding="10">
<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>
<th width="100">Columna 2</th>
<th width="100">Columna 3</th>
<th width="100">Columna 4</th>
<th width="100">Columna 5</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>
<td colspan="2">Celda con colspan 2</td>
</tr>
<tr>
<th height="50">Fila 2</th>
<td rowspan="2">Celda con rowspan 2</td>
<td colspan="2">Celda con colspan 2</td>
<td rowspan="2">Celda con rowspan 2</td>
</tr>
<tr>
<th height="50">Fila 3</th>
<td rowspan="2">Celda con rowspan 2</td>
<td colspan="2" rowspan="2">Celda con colspan 2 y rowspan 2</td>
</tr>
<tr>
<th height="50">Fila 4</th>
<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.
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
<table border="1" align="center" cellspacing="0" cellpadding="5">
<caption>Ejemplo de Tablas anidadas</caption>
<tr valign="bottom" align="center">
<td height="50" width="100">Tabla principal</td>
<th width="350">Columna 1</th>
<th width="350">Columna 2</th>
</tr>
<tr>
<th height="200">Fila 1</th>
<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>
<table border="1" align="center" cellspacing="0" cellpadding="5"
width="300" height="150">
<caption>Tabla 2</caption>
<tr>
<td colspan="2"> Celda 1</td>
</tr>
<tr>
<td> Celda 2</td>
<td> Celda 3</td>
</tr>
</table>
</td>
</tr>
<tr>
<th height="200">Fila 2</th>
<td >
<table border="1" align="center" cellspacing="0" cellpadding="5"
width="300" height="150">
<caption>Tabla 3</caption>
<tr>
<td rowspan="2"> Celda 1</td>
<td> Celda 2</td>
</tr>
<tr>
<td> Celda 3</td>
</tr>
</table>
</td>
<td >
<table border="1" align="center" cellspacing="0" cellpadding="5"
width="300" height="150">
<caption>Tabla 4</caption>
<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.
concepto
Mes Total
Corriente Facturas Coche Casa
concepto
Mes Total
Corriente Facturas Coche Casa
Marzo 4 4 7 3 -
Abril 5 7 6 2 -
Mayo 5 7 6 2 -
Junio 5 7 6 2 -
<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>