Tabla avanzadas y combinación de celdas

Ya hemos visto que las tablas se van definiendo por filas mediante el elemento tr. Pues dentro de HTMLpodemos agrupar estas filas por funcionalidad y ver varías propiedades más como combinar filas y columnas

El elemento HTML <th> define una celda como encabezado de un grupo de celdas en una tabla. Una cosa que vemos es que las tablas suelen tener una primera fila de encabezado. Dentro de las tablas en HTML podemos identificar esta fila mediante el elemento th. Es decir, para las celdas de la fila de cabecera en vez de utilizar un elemento td utilizaremos un elemento th.
Dentro de HTML podemos agrupar las filas de una taba por funcionalidad cada uno de estos elementos tendrá una o n filas, dependiendo de las que queramos agrupar. La estructura es la misma para los tres casos:.
Podemos agrupar la tabla s en tres partes:

Cabecera, representada por el elemento thead.
Cuerpo, representada por el elemento tbody.
Pie, representada por el elemento tfoot.

<table>
<thead>
<tr><td scope="row">Mes</td>
<td>Enero</td>
<td>Febrero</td>
</tr>
</thead>
<tbody>
<tr><td>Agua</td>
<td>10</td>
<td>15</td>
</tr>
<tr>
<td>Gas</td>
<td>5</td>
<td>10</td>
</tr>
</tbody>
<tfoot>
<tr><td>
Total</td>
<td>15</td>
<td>25</td>
</tr>
</tfoot>
</table>

Mes	Enero	Febrero
Agua	10	15
Gas	5	10
Total	15	25

Grupos de columnas

Ya hemos visto que las tablas se definen por filas. Pero una de las cosas que nos ofrece HTMLes la posibilidad de definir, sobre dichas filas, grupos de columnas que tengan una relación semántica entre ellas. Por ejemplo en la siguiente tabla vemos que hay una relación semántica de las columnas relativa a los meses.

En algunas situaciones se necesita que una celda ocupe el lugar de dos o más celdas en forma horizonzal o vertical, para estos casos el elemento td o th dispone de dos propiedades llamadas rowspan y colspan.

A estas propiedades se les asigna un valor entero a partir de 2.

Si queremos que una celda ocupe tres columnas luego inicializamos la propiedad rowspan con el valor 3:

<td colspan="3">Facturación de los últimos tres meses</td>

Si por el contrario queremos que una celda se extienda a nivel de filas luego hacemos:

<td rowspan="3">Secciones</td>

Veamos un ejemplo empleando el concepto de combinación de celdas:

<html>
<head>
</head>
<body>
<table >
<tr>
<th rowspan="4">Recursos</th><th colspan="4">Facturación de los últimos tres meses</th>
</tr>
<tr>
<td>Discos Duros</td>
<td>23000</td>
<td>27200</td>
<td>26000</td>
</tr>
<tr>
<td>CPU</td>
<td>73000</td>
<td>67300</td>
<td>51000</td>
</tr>
<tr>
<td>Monitores</td>
<td>53000</td>
<td>72000</td>
<td>88000</td>
</tr>
</table>
</body>
</html>

El ejemplo anterior se puede ver así

Facturación de los últimos tres meses
Discos Duros	23000	27200	26000
CPU	73000	67300	51000
Monitores	53000	72000	88000

Otros atributos de tablas

align in HTML 4, in HTML5

Este atributo enumerado especifica cómo se tratará el alineado horizontal de la celda. Los valores posibles son:

left: El contenido se alinea a la izquierda de la celda.
center: El contenido se centra en la celda.
right: El contenido se alinea a la derecha de la celda.
justify (solo con texto): El contenido se alarga para ocupar todo el ancho de la celda.

El valor por defecto cuando no se especifica este atributo es left.

bgcolor

Este atributo define el color de fondo de cada celda en una columna. Consiste en una código hexadecimal de 6 digitos, con un prefijo '#'. Este atributo puede usarse con uno de los 16 colores predefinidos:

	`black` = "#000000"		`green` = "#008000"
	`silver` = "#C0C0C0"		`lime` = "#00FF00"
	`gray` = "#808080"		`olive` = "#808000"
	`white` = "#FFFFFF"		`yellow` = "#FFFF00"
	`maroon` = "#800000"		`navy` = "#000080"
	`red` = "#FF0000"		`blue` = "#0000FF"
	`purple` = "#800080"		`teal` = "#008080"
	`fuchsia` = "#FF00FF"		`aqua` = "#00FFFF"

width in HTML 4.01

Este atributo se utiliza para definir un ancho de celda recomendado. Se puede agregar espacio adicional con las propiedades de espacio entre celdas y relleno de celdas y el ancho del <col> elemento también puede crear un ancho adicional. Pero, si el ancho de una columna es demasiado estrecho para mostrar una celda en particular correctamente, se ampliará cuando se muestre.