Re: [Ovillo] Tabla compleja: ¿Accesible?

Wed, 04 May 2005 09:10:10 -0700 

Aupa Borja!

�has intentado hacerlo sin tablas, en concreto con listas de definici�n?:
http://www.w3.org/TR/2002/WD-xhtml2-20020805/mod-list.html#sec_10.1.
semanticamente sera mas correcto.
Mas o menos:

 <dl>
  <dt>Nombre cient�fico</dt>
  <dd>Buho Real</dd>

  <dt>Orden</dt>
  <dd>Strigiformes</dd>

  <dt>Familia</dt>
  <dd>Strigidos</dd>
</dl>

Claro que lograr la misma apariencia visual sera complicado, pero bueno...

.. usando un margin negativo en dd puedes simular un poco la forma de la
tabla, mas o menos :

body{
 font-size: medium;
}
dl{
 width: 25em;
}
dt{
 margin-bottom:0.4em;
 padding: 0.2em;
 width: 10em;
}
dd{
 margin-left: 10em;
 margin-top: -1.8em;
 background-color: #eee;
 padding: 0.2em;
}

Un saludo,
Edu

----- Original Message ----- 
From: "Kaktum" <[EMAIL PROTECTED]>
To: <[email protected]>
Sent: Wednesday, May 04, 2005 12:54 PM
Subject: [Ovillo] Tabla compleja: �Accesible?


Hola a [EMAIL PROTECTED]
Estoy creando una web accesible y tengo que realizar unas fichas de
animales. He creado un layout algo complejo para que adopte un dise�o
m�s funcional y me gustaria saber si es accesible y si el HomePage
Reader lo leeria bien.
El c�digo es el siguiente:

<table id="ficha" summary="Ficha de datos sobre este animal.">
   <caption>
   <strong>  Buho Real</strong>
   </caption>
   <tr bgcolor="#669933">
     <th height="20" colspan="3" align="left" valign="top"
scope="row">Imagen</th>
   </tr>
   <tr bordercolor="#FFFFFF">
     <td width="301" rowspan="9" valign="top" bgcolor="#FFFFFF"><div
align="right"><img src="../../../../images/animales/buho/buho.jpg"
width="300" height="248" class="resize" />
     </div></td>
     <th width="118" height="32" align="left" valign="top"
bgcolor="#999999" scope="row">Nombre
     cient&iacute;fico</th>
     <td width="358" valign="top" bgcolor="#CCCCCC"><div align="left">
Buho
         buho </div></td>
   </tr>
   <tr>
     <th height="17" align="left" valign="top" bgcolor="#999999"
scope="row">Orden</th>
     <td valign="top" bgcolor="#CCCCCC"><div align="left">
Strigiformes</div></td>
   </tr>
   <tr>
     <th height="20" align="left" valign="top" bgcolor="#999999"
scope="row">Suborden</th>
     <td valign="top" bgcolor="#CCCCCC"><div align="left">-</div></td>
   </tr>
   <tr>
     <th height="17" align="left" valign="top" bgcolor="#999999"
scope="row">Familia</th>
     <td valign="top" bgcolor="#CCCCCC"><div align="left">
Strigidos</div></td>
   </tr>
   <tr>
     <th height="112" align="left" valign="top" bgcolor="#999999"
scope="row">Dimensiones</th>
     <td valign="top" bgcolor="#CCCCCC"> <p align="left""><img
src="../../../../images/animales/comunes/dim_rapaz.jpg" alt="Silueta"
/></p>
     <p align="left">Envergadura 150-180 cm / Longitud 60-72 cm</p> </td>
   </tr>
   <tr>
     <th height="17" align="left" valign="top" bgcolor="#999999"
scope="row">Peso</th>
     <td valign="top" bgcolor="#CCCCCC"><div align="left">2000-3300
grs</div></td>
   </tr>
   <tr>
     <th height="32" align="left" valign="top" bgcolor="#999999"
scope="row">Alimentaci�n</th>
     <td valign="top" bgcolor="#CCCCCC"><div align="left">Aves,
roedores, conejos y liebres</div></td>
   </tr>
   <tr>
     <th height="37" align="left" valign="top" bgcolor="#999999"
scope="row">Actividad</th>
     <td valign="top" bgcolor="#CCCCCC"><div align="left">Crepuscular y
nocturna</div></td>
   </tr>
   <tr>
     <th height="32" align="left" valign="top" bgcolor="#999999"
scope="row">Estado</th>
     <td valign="top" bgcolor="#CCCCCC"><div
align="left">Amenazado</div></td>
   </tr>
   <tr>
     <th height="17" align="left" valign="top" bgcolor="#669933"
scope="row">Distribuci�n</th>
   <th colspan="2" align="left" valign="top" bgcolor="#669933"
scope="row">H�bitat</th>
   </tr>
   <tr>
     <td height="265" valign="top" bgcolor="#FFFFFF"><div
align="right"><img
src="../../../../images/animales/buho/distrib_buho.jpg"
class="resize"/></div></td>
     <td colspan="2" align="center" valign="top" bgcolor="#CCCCCC"><img
src="../../../../images/animales/comunes/habitat.jpg" alt="Imagen
H&aacute;bitat" vspace="5" /></p>
     <p>Zonas rocosas proximas a bosques</p></td>
   </tr>
   <tr bgcolor="#669933">
     <th height="29" colspan="3" align="left" valign="top"
scope="row">Ciclo reproductivo</th>
   </tr>
   <tr>
     <td height="132" colspan="3" valign="top"><div align="center"><img
src="../../../../images/animales/buho/ciclo_buho.jpg" class="resize"
alt="Ciclo Anual" longdesc="Puesta de 2 a 4 huevos en el mes de Abril,
Incubaci�n de los huevos durante 30-35 d�as. A partir de Julio y hasta
mediados de Septiembre se produce la dispersi�n de los j�venes."
/></div></td>
   </tr>
</table>

De momento he puesto todos los atributos de la tabla en el propio html,
pero mas tarde lo controlar� por css.
Agradecer�a cualquier comentario al respecto.

Un saludo:

Borja Sanz

_______________________________________________
Lista de distribuci�n Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente direcci�n:
http://ovillo.org/mailman/listinfo/ovillo

_______________________________________________
Lista de distribuci�n Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente direcci�n: 
http://ovillo.org/mailman/listinfo/ovillo

Responder a