Foros del Web » Creando para Internet » CSS »

Qué usar tablas o listas para un boleto?

Estas en el tema de Qué usar tablas o listas para un boleto? en el foro de CSS en Foros del Web. Buenas, He estado examinando diferentes webs que usan boletos, y todas usan tablas. Me preguntaba que me recomendáis vosotros si tablas o usar listas para ...
  #1 (permalink)  
Antiguo 04/09/2010, 12:13
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Qué usar tablas o listas para un boleto?

Buenas,

He estado examinando diferentes webs que usan boletos, y todas usan tablas.
Me preguntaba que me recomendáis vosotros si tablas o usar listas para maquetar.. (ul,li).

Os dejo una imagen de diferentes boletos.



Muchas gracias de antemano!
  #2 (permalink)  
Antiguo 05/09/2010, 01:40
Avatar de bng5  
Fecha de Ingreso: junio-2009
Ubicación: 127.0.0.1
Mensajes: 269
Antigüedad: 8 años, 6 meses
Puntos: 24
Respuesta: Qué usar tablas o listas para un boleto?

No, yo no lo maquetaría con tablas.
Las tablas son muy útiles en muchos casos, pero no creo que este sea uno de ellos.

Creo que usando fieldset, div y listas o listas de definición (dl) te darán más libertad al momento de armar el CSS. Con un mismo HTML podrías darle cualquiera o todas esas estéticas que adjuntaste.
  #3 (permalink)  
Antiguo 05/09/2010, 05:10
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Respuesta: Qué usar tablas o listas para un boleto?

Cita:
Iniciado por bng5 Ver Mensaje
No, yo no lo maquetaría con tablas.
Las tablas son muy útiles en muchos casos, pero no creo que este sea uno de ellos.

Creo que usando fieldset, div y listas o listas de definición (dl) te darán más libertad al momento de armar el CSS. Con un mismo HTML podrías darle cualquiera o todas esas estéticas que adjuntaste.
Buenas,

He estado siguiendo tus consejos de evitar las tablas, aunque primero lo empecé con tablas para tener una base. La verdad es que las listas me han ido muy bien para la parte del resumen del boleto, el cual solo tiene dos columnas.

Sin embargo, no sé de que forma transformar la parte de los pronosticos en listas. Dejabo del boleto he puesto un ejemplo del código con listas, como veras no se parece en nada al de las tablas.

Código HTML:
Ver original
  1. <div class="test">
  2.     <dl>
  3.         <dt id="pronostico_01"></dt>
  4.         <dd><input type="checkbox" id="betchecked_12494171"/></dd>
  5.         <dd>Equipo C - Equipo D</dd>
  6.         <dd>1,30</dd>
  7.         <dd><input type="text" value="" size="4" maxlength="8" id="amount_12488401" tabindex="0"/></dd>
  8.         <dd><a href="#"><span title="Borrar" class="ico_borrar"></span></a></dd>
  9.        
  10.         <dt id="pronostico_02"></dt>
  11.         <dd><input type="checkbox" id="betchecked_12494171"/></dd>
  12.         <dd>Equipo C - Equipo D</dd>
  13.         <dd>1,30</dd>
  14.         <dd><input type="text" value="" size="4" maxlength="8" id="amount_12488401" tabindex="0"/></dd>
  15.         <dd><a href="#"><span title="Borrar" class="ico_borrar"></span></a></dd>
  16.  
  17.  
  18.     </dl>
  19. </div> <!-- fin test -->


Código CSS:
Ver original
  1. .test dl{
  2.     margin-bottom:3px;
  3.     font-size:10px;
  4.     padding:5px;
  5.     width:300px;
  6.     background:yellow;
  7. }
  8. .test dl dt {
  9.     color:#000;
  10.     float:left;
  11.     margin-right:10px;
  12.     padding:1px;
  13.     width:140px;
  14. }
  15. .test dl dd {
  16.     margin:2px 0;
  17.     padding:1px;
  18.     font-weight:bold;
  19. }


Ver el ejemplo online
http://neodani.com/fdw/boleto_apuestas/boleto.php

¿Puedes decirme como conseguir que los datos (5 columnas) queden alineadas?

Muchas gracias de antemano!
  #4 (permalink)  
Antiguo 05/09/2010, 16:59
Avatar de bng5  
Fecha de Ingreso: junio-2009
Ubicación: 127.0.0.1
Mensajes: 269
Antigüedad: 8 años, 6 meses
Puntos: 24
Respuesta: Qué usar tablas o listas para un boleto?

Aclaración: Mi consejo no es "siempre evitar las tablas", si para el caso del boleto.
Pero, por ejemplo, la grilla de arriba me parece que está muy bien como tabla y asi la dejaría.

Ese no es el uso que estaba pensando para las listas de definición.

No te digo que lo hagas así como yo, sólamente es, mas o menos, como yo lo haría.

Código HTML:
<div class="test">
    <ol>
        <li id="pronostico_01">
			<span><input type="checkbox" id="betchecked_12494171"/></span>
			<span>Equipo C - Equipo D</span>
			<span>1,30</span>
			<span><input type="text" value="" size="4" maxlength="8" id="amount_12488401" tabindex="0"/></span>
			<span><a href="#" class="ico_borrar">Borrar</a></span>
		</li>
        <li id="pronostico_02">
			<span><input type="checkbox" id="betchecked_12494171"/></span>
			<span>Equipo C - Equipo D</span>
			<span>1,30</span>
			<span><input type="text" value="" size="4" maxlength="8" id="amount_12488401" tabindex="0"/></span>
			<span><a href="#" class="ico_borrar">Borrar</a></span>
        </li>
    </ol>
</div> 

Cada uno de los li sería una fila y los span las celdas.

Para manipular los span como celdas podrías usar display:inline-block;, de esta manera podrás editar sus propiedades CSS como si fuese un elemento de bloque (ancho, alto).

Código CSS:
Ver original
  1. li span {
  2.     display:inline-block;
  3. }

o tratarlos como tablas:

Código CSS:
Ver original
  1. ol {
  2.     display:table;
  3.     list-style-type:none;
  4. }
  5.  
  6. li {
  7.     display:table-row;
  8. }
  9.  
  10. li span {
  11.     display:table-cell;
  12. }

No estoy hilando muy fino y tendrías que ver cual es la técnica que más te conviene para que se vea apropiadamente en la mayor cantidad de navegadores posibles.
No se mucho de los IE (6, 7, 8) pero su soporte CSS es muy limitado.

Última edición por bng5; 05/09/2010 a las 17:01 Razón: Agrego resaltado css
  #5 (permalink)  
Antiguo 07/09/2010, 13:24
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Respuesta: Qué usar tablas o listas para un boleto?

Por mas que lo intento no consigo que quede alineado

http://neodani.com/fdw/boleto_apuestas/boleto.php

He definido hasta dentro de cada span una clase para personalizar cada "columna" pero ni eso. No queda bien

Alguien puede echarme una mano?

Gracias de antemano!
  #6 (permalink)  
Antiguo 07/09/2010, 13:57
Avatar de bng5  
Fecha de Ingreso: junio-2009
Ubicación: 127.0.0.1
Mensajes: 269
Antigüedad: 8 años, 6 meses
Puntos: 24
Respuesta: Qué usar tablas o listas para un boleto?

Yo los veo alineados. A lo mejor no estoy entendiendo exactamente que es lo que no conseguís.
  #7 (permalink)  
Antiguo 07/09/2010, 15:24
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Respuesta: Qué usar tablas o listas para un boleto?

Cita:
Iniciado por bng5 Ver Mensaje
Yo los veo alineados. A lo mejor no estoy entendiendo exactamente que es lo que no conseguís.
Quizá me expliqué mal, alineados horizontalmente estan.. pero si te fijas hay campos que ocupan mas que otros "Equipo C - Equipo D" debería llegarse a ver completo, el input de la izq no debería ocupar tanto espacio de la derecha, o por ejemplo la linea 1X2 / Ganador Equipo C debería verse completa... es el diseño...

Etiquetas: listas, tablas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:16.