Qué usar tablas o listas para un boleto?

[neodani]

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!

[bng5]

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.

[neodani]

Iniciado por bng5

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:

<div class="test">
    <dl>
        <dt id="pronostico_01"></dt>
        <dd><input type="checkbox" id="betchecked_12494171"/></dd>
        <dd>Equipo C - Equipo D</dd>
        <dd>1,30</dd>
        <dd><input type="text" value="" size="4" maxlength="8" id="amount_12488401" tabindex="0"/></dd>
        <dd><a href="#"><span title="Borrar" class="ico_borrar"></span></a></dd>
        
        <dt id="pronostico_02"></dt>
        <dd><input type="checkbox" id="betchecked_12494171"/></dd>
        <dd>Equipo C - Equipo D</dd>
        <dd>1,30</dd>
        <dd><input type="text" value="" size="4" maxlength="8" id="amount_12488401" tabindex="0"/></dd>
        <dd><a href="#"><span title="Borrar" class="ico_borrar"></span></a></dd>
 
 
    </dl>
</div> <!-- fin test -->
 

Código CSS:

.test dl{
    margin-bottom:3px;
    font-size:10px;
    padding:5px;
    width:300px;
    background:yellow;
}
.test dl dt {
    color:#000;
    float:left;
    margin-right:10px;
    padding:1px;
    width:140px;
}
.test dl dd {
    margin:2px 0;
    padding:1px;
    font-weight:bold;
}
 

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!

[bng5]

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:

li span {
    display:inline-block;
}
 

o tratarlos como tablas:

Código CSS:

ol {
    display:table;
    list-style-type:none;
}
 
li {
    display:table-row;
}
 
li span {
    display:table-cell;
}
 

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.

[neodani]

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!

[bng5]

Yo los veo alineados. A lo mejor no estoy entendiendo exactamente que es lo que no conseguís.

[neodani]

Iniciado por bng5

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...