EPET 20 Taller de Programación Estática y Laboratorio Web

Programación en XHTML: tablas

Uso de las tablas

Las tablas se emplean para tabular datos, es decir organizarlos en filas y columnas. Son un recurso muy utilizado, aunque a veces se les da un mal uso. Hace muchos años atrás, cuando todavía no había soporte por parte de los navegadores a las hojas de estilos CSS, los programadores recurrían a las tablas para maquetar o estructurar todo el contenido en una página web, gracias a que permitían ocultar sus bordes.

En la actualidad esta práctica esta totalmente desaconsejada por los problemas y desventajas que conlleva su mala utilización. Por ello todo el maquetado completo de una página web se debe hacer vía CSS.

Desventajas de maquetar con tablas:

Por lo tanto se recomienda:

no utilizar tablas para maquetar o estructurar el contenido de tu web.


Tabla básica

Para crear una tabla básica, basta con utilizar las siguientes etiquetas: "table", "tr" y "td". La etiqueta "table" define la tabla completa, dentro de ella con las etiquetas "tr" se define cada fila y con "td" creamos las celdas que a su vez definen las columnas. Al comienzo puede resultar un poco complicado trabajar con ellas. Pero es sólo cuestión de práctica.

Ejemplo de una tabla sencilla:

<table border="1">
<tr>
	<td>Marzo</td>
	<td>Abril</td>
</tr>
<tr>
	<td>$24000</td>
	<td>$32000</td>
</tr>
</table>

El navegador la muestra así:

Marzo Abril
$24000 $32000

En el ejemplo se utiliza el atributo "border" para mostrar todos los bordes de la tabla, sino los navegadores muestran la tabla pero sin bordes. A los bordes y a todo el formato en general se recomienda hacerlo vía hojas de estilo CSS.

Tablas complejas

Dependiendo de cada situación y los datos que tenemos a nuestra disposición puede que necesitemos crear tablas más complejas. En ocaciones es necesario fusionar o combinar dos o más celdas. Algo muy habitual en planillas de cálculo o procesadores de texto. En HTML los atributos que permiten fusionar celdas son "colspan" y "rowspan".

Atributo colspan

Se utiliza para fusionar o combinar dos o mas celdas de distintas columnas. Se debe agregar el atributo "colspan" dentro de la etiqueta "td", seguido de un valor numérico que indica la cantidad de celdas a combinar.

Por ejemplo:

3 celdas fusionadas de distintas columnas.
GASTOS
1er TRIM. 2do TRIM. 3er TRIM.
5100 6800 7300

Código del ejemplo anterior:

<table border="1">
<tr>
	<td colspan="3">GASTOS</td>
</tr>
<tr>
	<td>1er TRIM.</td>
	<td>2do TRIM.</td>
	<td>3er TRIM.</td>
</tr>
<tr>
	<td>5100</td>
	<td>6800</td>
	<td>7300</td>
</tr>
</table>

Atributo rowspan

Se utiliza para fusionar o combinar dos o mas celdas de distintas filas. De forma similar a "colspan", se debe agregar el atributo "rowspan" dentro de la etiqueta "td" junto al valor correspondiente.

Por ejemplo:

3 celdas fusionadas de distintas filas.
PRODUCTO Modelo Potencia
A 500va
B 1000va

Código del ejemplo anterior:

<table border="1">
<tr>
	<td rowspan="3">PRODUCTO</td>
	<td>Modelo</td>
	<td>Potencia</td>
</tr>
<tr>
	<td>A</td></td>
	<td>500va</td>
</tr>
<tr>
	<td>B</td>
	<td>1000va</td>
</tr>
</table>
El espaciado no es obligatorio pero sí recomendado.

anterior  arriba

arriba