Entrar

Ayuda con las tablas (HTML)

Epale · · Solicitar retirada
Bueno, el problema es que me gustaria crear una tabla parecida a la de Forbes:
http://www.forbes.com/wealth/billionaires

Entonces tengo dos problemas:
1. No he conseguido poner que una fila completa de la tabla sea un unico link.
2. En la tabla defino border="0" pero aun así, cuando paso el raton y se iluminan las filas, aparece un border, sin color (tiene el color del background) pero el espacio que ocupa se nota, y me gustaria que al seleccionar una fila sea toda del mismo color.





CÓDIGO:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link href="taula.css" rel="stylesheet" type="text/css" />


<style type="text/css">
body {
background-color:#535F5F;
}

.tabla-titulo {
text-align:center;
background-color:#404A4A;
color:#B9B96A;
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
}

.tabla-mouseover {
background-color:#748686;
color:#DCE0E0;
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
}

.tabla-mouseout {
background-color:#535F5F;
color:#DCE0E0;
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
}

.tabla {
text-align:center;
width:auto;
}
</style>
</head>



<body>
<table border="0" cellpadding="8px">
<tr class="tabla-titulo">
<th scope="col">Número</th>
<th scope="col">Título</th>
<th scope="col">Categoría</th>
<th scope="col">Fecha publicación</th>
</tr>
<tr class="tabla-mouseout" onmouseover="this.className='tabla-mouseover'" onmouseout="this.className='tabla-mouseout'">
<td align="center">#1</td>
<td>Título I</td>
<td>Categoría I</td>
<td align="center">10-11-2010</td>
</tr>
<tr class="tabla-mouseout" onmouseover="this.className='tabla-mouseover'" onmouseout="this.className='tabla-mouseout'">
<td align="center">#2</td>
<td>Título II</td>
<td>Categoría II</td>
<td align="center">12-12-2010</td>
</tr>
</table>

</body>
</html>
Epale · · Solicitar retirada
Lo intente con capas, me costo bastante, pero al final casi me sale. Ah lastima de este casi xD. Por cierto, gracias por decirme lo de capas, parecia complicado al principio pero al final lo solucione! (o casi).

Todo funciona correctamente, o asi creo yo, como se puede ver aqui:
[contenido no disponible]


Pero cuando lo abro en el navegador me aparece todo desordenado, como mi habitacion. Entonces cuando paso el raton todo se arregla y se pone bonito (imagen de arriba) pero no es plan que alguien cuando vea la tabla por primera vez vea eso, causa muy mala impresion.
[contenido no disponible]








CODIGO (aun se debe optimizar algo):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link href="taula.css" rel="stylesheet" type="text/css" />


<style type="text/css">

body {
background-color:#535F5F;
}

.tabla {
width:700px;
}

.capa-titulo {
background-color:#404A4A;
color:#B9B96A;
font-weight:bold;
padding:10px;
padding-bottom:27px;
width:auto;
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
}

.capa-mouseover {
background-color:#748686;
color:#DCE0E0;
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
padding:10px;
padding-bottom:27px;
}

.capa-mouseout {
background-color:#535F5F;
color:#DCE0E0;
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
padding:10px;
padding-bottom:27px;
}

.capa-elemento {
text-align:center;
vertical-align:center;
float:left;
}

a: link,visited,active,hover {
text-decoration:none;
}





</style>
</head>

<body>

<div class="tabla">

<div class="capa-titulo">
<div class="capa-elemento" style="width:55px;">Número</div>
<div class="capa-elemento" style="width:350px;">Título</div>
<div class="capa-elemento" style="width:150px;">Categoría</div>
<div class="capa-elemento" style="width:120px;">Fecha publicación</div>
</div>

<a href="http://google.es">
<div class="mouseout" onmouseover="this.className='capa-mouseover'" onmouseout="this.className='capa-mouseout'">
<div class="capa-elemento" style="width:55px;">#2</div>
<div class="capa-elemento" style="width:350px; text-align:left;">Hoy finalmente conseguí hacer la tabla</div>
<div class="capa-elemento" style="width:150px; text-align:left;">Noticias</div>
<div class="capa-elemento" style="width:120px;">20/05/2011</div>
</div>
</a>

<a href="http://google.es">
<div class="mouseout" onmouseover="this.className='capa-mouseover'" onmouseout="this.className='capa-mouseout'">
<div class="capa-elemento" style="width:55px;">#1</div>
<div class="capa-elemento" style="width:350px; text-align:left;">Me costó muchísimo, pero aquí está!</div>
<div class="capa-elemento" style="width:150px; text-align:left;">Noticias generales</div>
<div class="capa-elemento" style="width:120px;">01/07/2009</div>
</div>
</a>

</div>
</body>
</html>
Yaneth · · Solicitar retirada
hola
podrias darnos la url de tu web??? si lo vemos en vivo

te adelanto

si se mira bien al poner el cursor por arriba
es causa del a hover
mira que orden tienes ahi, para que lo iguales en el a

pero.. mejor danos la url por favor
saludos
Epale · · Solicitar retirada
Aqui esta, mi sitio de pruebas: http://misitiodepruebas.comuf.com/taula2.php

Mire tema hover pero no vi nada en especial, haber si podeis ayudarme :p


Oh si, ahora me di cuenta que cuando haces clic en alguno de los tres elementos de la tabla (todos redireccionan a Google), haces clic a la flechita para ir una pagina atras (vaya, volver a misitiodepruebas) y aparece un recuadro violeta alrededor del elemento que has seleccionado. Esto como se saca?