Tengo que mostrar datos tabulares y que mejor forma que hacerlo mediante una tabla formateada con CSS ;)
Tengo 2 problemas
Uno es que no sé centrar verticalmente los datos
Hay alguna manera de hacerlo con CSS, o tengo que emplear valign="middle" en el codigo html?
Y el otro es todas mis celdas ocupan lo que ocupe su titulo de encabezado. Y claro tengo un campo descripción que me ocupa varias lineas y me gustaria que fuese mas largo que el resto.
Como véis mas abajo utilizo un parche cutre de "espacio duro".
CÓDIGO HTML
Código HTML:
<table id="mytable" cellspacing="0" summary="Cuotas mas altas"> <caption>Tabla 2 - Cuotas más altas</caption> <tr> <th scope="col" abbr="Dual 1.8">Fecha evento</th> <th scope="col" abbr="Dual 1.8">Fecha aceptada</th> <th scope="col" abbr="Dual 1.8">Tipo</th> <th scope="col" abbr="Dual 1.8">Descripción </th> <th scope="col" abbr="Dual 1.8">Cuota</th> <th scope="col" abbr="Dual 1.8">Riesgo</th> <th scope="col" abbr="Dual 1.8">Para ganar</th> </tr> <tr> <td>10:15am 17-Jan-08</td> <td>17-Jan-08</td> <td>Basketball Total</td> <td class="ancho">Panathinaikos (GRE)/Chorale Roanne (FRA) (O 165.5) for Game</td> <td>1.980</td> <td>5.00</td> <td>4.98</td> </tr> </table>
Código HTML:
#mytable { width: 230px; padding: 0; margin: 0; margin-bottom:20px; text-align:center; } caption { padding: 0 0 5px 0; width: 230px; font: italic 9px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; text-align: right; } th { font: bold 9px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: #4f6b72; border-right: 1px solid #C1DAD7; border-bottom: 1px solid #C1DAD7; border-top: 1px solid #C1DAD7; letter-spacing: 2px; text-transform: uppercase; text-align:center; padding: 4px 6px 4px 12px; background: #CAE8EA url(../imagenes/bg_header_table.jpg) no-repeat; } th.nobg { border-top: 0; border-left: 0; border-right: 1px solid #C1DAD7; background: none; } td { border-right: 1px solid #C1DAD7; border-bottom: 1px solid #C1DAD7; background: #fff; padding: 3px 6px 3px 12px; color: #4f6b72; font-size:9px; } td.alt { background: #F5FAFA; color: #797268; } th.spec { border-left: 1px solid #C1DAD7; border-top: 0; background: #fff url(images/bullet1.gif) no-repeat; font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; } th.specalt { border-left: 1px solid #C1DAD7; border-top: 0; background: #f5fafa url(images/bullet2.gif) no-repeat; font: bold 9px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: #797268; }
Gracias de antemano