Malditas tablas (Parte 4)

El uso de TBODY y COL para agrupar filas o columnas en una tabla también nos permite mostrar y ocultar sectores de forma dinámica.

Para dar un ejemplo, otra vez nos encontramos frente al dilema: ¿para qué navegador?

En términos generales, para ocultar un elemento se utiliza:

getElementById('nombre').style.display='none';

y para restaurarlo:

getElementById('nombre').style.display='';

Esto es cierto para las filas pero no para las columnas de una tabla, Internet Explorer lo acepta pero Fierefox y el resto de los navegadores que adoptan los criterios de la www.w3.org incorporan un nuevo estado para la propiedad visibility para filas, columnas o grupos:

visibility:collapse

que permite que todo el elemento sea removido y el espacio que ocupaba quede libre.

En este ejemplo las columnas utilizan este valor y las filas el valor display:none por lo tanto, en Internet Explorer, las columnas no podrán ocultarse:

	ANIMALES	león	perro
	VEGETALES	cebolla	manzana
	MINERALES	esmeralda	granito

<table border=0>

<col width=ancho />
<col width=ancho id="col1" />
<col width=ancho id="col2" />
<col width=ancho id="col3" />

<tbody style="text-align:center;">
<tr>
<td></td>
<td>
   <img src="imagen" onclick="getElementById('col1').style.visibility='collapse';">
</td>
<td>
   <img src="imagen" onclick="getElementById('col2').style.visibility='collapse';">
</td>
<td>
   <img src="imagen" onclick="getElementById('col3').style.visibility='collapse';">
</td>
</tr>
</tbody>

<tbody style="text-align:center;" id="anima">
<tr>
<td>
   <img src="imagen" onclick="getElementById('anima').style.display='none';">
</td>
<td>ANIMALES</td>
<td>león</td>
<td>perro</td>
</tr>
</tbody>

<tbody style="text-align:center;" id="vegeta">
<tr>
<td>
   <img src="imagen" onclick="getElementById('vegeta').style.display='none';">
</td>
<td>VEGETALES</td>
<td>cebolla</td>
<td>manzana</td>
</tr>
</tbody>

<tbody style="text-align:center;" id="minera">
<tr>
<td>
   <img src="imagen" onclick="getElementById('minera').style.display='none';">
</td>
<td>MINERALES</td>
<td>esmeralda</td>
<td>granito</td>
</tr>
</tbody>

</table>

REFERENCIAS:

w3.org Tablas