como introduzco una tabla en css??

[juanitTo]

Pues bien soy nuevo y no tengo ni idea, fijaros, que no soi capaz de introducir una simple tabla en un css la tabla seria esta:

[juanitTo]

<table width="120" border="1" bordercolor="#FF0000" cellpadding="0" cellspacing="0" bgcolor="#000000">
<tr><font color="FF0000"><td style="cursor: hand;" onClick="document.location.href='http://www.webmastersgratis.com/contenidos/foros/index.php';" onMouseOut="this.style.background='#000000';" onMouseOver="this.style.background='#00E800'" align="center" class="textoMenusOpcion"><a href="http://www.webmastersgratis.com/contenidos/foros/index.php" style="text-decoration: none;" class="textoMenusOpcion"><font size=3 color="#FFFFFF">Trucos javascrip</font></a></td></font></tr>
<tr><td style="cursor: hand;" onClick="document.location.href='http://www.webmastersgratis.com/contenidos/chats/index.php';" onMouseOut="this.style.background='#000000';" onMouseOver="this.style.background='#00E800'" align="center" class="textoMenusOpcion"><a href="http://www.webmastersgratis.com/contenidos/chats/index.php" style="text-decoration: none;" class="textoMenusOpcion"><font size=3 color="#FFFFFF">Uso de frames</font></a></td></tr>
<tr><td style="cursor: hand;" onClick="document.location.href='http://www.webmastersgratis.com/contenidos/imagenes/index.php';" onMouseOut="this.style.background='#000000';" onMouseOver="this.style.background='#00E800'" align="center" class="textoMenusOpcion"><a href="http://www.webmastersgratis.com/contenidos/imagenes/index.php" style="text-decoration: none;" class="textoMenusOpcion"><font size=3 color="#FFFFFF">Condiciones de uso</font></a></td></tr>
<tr><td style="cursor: hand;" onClick="document.location.href='http://www.webmastersgratis.com/contenidos/encuestas/index.php';" onMouseOut="this.style.background='#000000';" onMouseOver="this.style.background='#00E800'" align="center" class="textoMenusOpcion"><a href="http://www.webmastersgratis.com/contenidos/encuestas/index.php" style="text-decoration: none;" class="textoMenusOpcion"><font size=3 color="#FFFFFF">chat</font></a></td></tr>
<tr><td style="cursor: hand;" onClick="document.location.href='http://www.webmastersgratis.com/contenidos/titulares/index.php';" onMouseOut="this.style.background='#000000';" onMouseOver="this.style.background='#00E800'" align="center" class="textoMenusOpcion"><a href="http://www.webmastersgratis.com/contenidos/titulares/index.php" style="text-decoration: none;" class="textoMenusOpcion"><font size=3 color="#FFFFFF">Heavy Metäl</font></a></td></tr>
<tr><td style="cursor: hand;" onClick="document.location.href='http://www.webmastersgratis.com/contenidos/intercambio/index.php';" onMouseOut="this.style.background='#000000';" onMouseOver="this.style.background='#00E800'" align="center" class="textoMenusOpcion"><a href="http://www.webmastersgratis.com/contenidos/intercambio/index.php" style="text-decoration: none;" class="textoMenusOpcion"><font size=3 color="#FFFFFF">Acceso a tu pagina por clave con javascrip</font></a></td></tr>
<tr><td style="cursor: hand;" onClick="document.location.href='http://www.webmastersgratis.com/contenidos/altabuscadores/alta-en-buscadores-gratis.php';" onMouseOut="this.style.background='#000000';" onMouseOver="this.style.background='#00E800'" align="center" class="textoMenusOpcion"><a href="http://www.webmastersgratis.com/contenidos/altabuscadores/alta-en-buscadores-gratis.php" style="text-decoration: none;" class="textoMenusOpcion"><font size=3 color="#FFFFFF">Heavy Metäl</font></a></td></tr>
<tr><td style="cursor: hand;" onClick="document.location.href='http://www.webmastersgratis.com/contenidos/altabuscadores/index.php';" onMouseOut="this.style.background='#000000';" onMouseOver="this.style.background='#00E800'" align="center" class="textoMenusOpcion"><a href="http://www.webmastersgratis.com/contenidos/altabuscadores/index.php" style="text-decoration: none;" class="textoMenusOpcion"><font size=3 color="#FFFFFF">Heavy Metäl</font></a></td></tr>
<tr><td style="cursor: hand;" onClick="document.location.href='http://www.webmastersgratis.com/contenidos/posicionamientobuscadores/index.php';" onMouseOut="this.style.background='#000000';" onMouseOver="this.style.background='#00E800'" align="center" class="textoMenusOpcion"><a href="http://www.webmastersgratis.com/contenidos/posicionamientobuscadores/index.php" style="text-decoration: none;" class="textoMenusOpcion"><font size=3 color="#FFFFFF">Heavy Metäl</font></a></td></tr>
<tr><td style="cursor: hand;" onClick="document.location.href='http://www.webmastersgratis.com/contenidos/posicionamientobuscadores/informe-posicionamiento.php';" onMouseOut="this.style.background='#000000';" onMouseOver="this.style.background='#00E800'" align="center" class="textoMenusOpcion"><a href="http://www.webmastersgratis.com/contenidos/posicionamientobuscadores/informe-posicionamiento.php" style="text-decoration: none;" class="textoMenusOpcion"><font size=3 color="#FFFFFF">Heavy Metäl</font></a></td></tr>
<tr><td style="cursor: hand;" onClick="document.location.href='http://www.webmastersgratis.com/ganardinero/web/index.php';" onMouseOut="this.style.background='#000000';" onMouseOver="this.style.background='#00E800'" align="center" class="textoMenusOpcion"><a href="http://www.webmastersgratis.com/ganardinero/web/index.php" style="text-decoration: none;" class="textoMenusOpcion"><font size=3 color="#FFFFFF">Heavy Metäl</font></a></td></tr>

[juanitTo]

me podrian decir que codigos css usar para poder poner el estilo de que cuando se pase en raton por encima cambie de color (es lo que muestro en la tabla), por que yo soy capaz de ponerla pero al ponerla se me descoloca todo, por que solo la pongo por html, que puedo hacer?

[fearlex]

Juanito, primeramente es imposible ayudarte con un codigo tan desorganizado, indenta el codigo, luego pegalo, y explicanos que quieres lograr y en que seccion.

Saludos

[Mikmoro]

Aupa, juanitTo.
¿Te acuerdas del enorme código que has puesto? Prueba esto es tu navegador:

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=ISO-8859-1" />
  <title>Con CSS</title>
  <style type="text/css">
#menu { border: 1px solid rgb(255, 102, 0);
width: 120px;
font-family: Verdana;
text-align: center;
background-color: rgb(0, 0, 0);
}
a { border-top: 1px solid rgb(255, 255, 255);
text-decoration: none;
color: rgb(255, 255, 255);
font-size: 16px;
display: block;
width: 100%;
}
a:hover { background-color: rgb(0, 232, 0);
}
  </style>
</head>
<body>
<div id="menu">
<a href="http://www.webmastersgratis.com/contenidos/foros/index.php">Trucos
javascrip</a>
<a href="http://www.webmastersgratis.com/contenidos/chats/index.php">Uso
de frames</a>
<a href="http://www.webmastersgratis.com/contenidos/imagenes/index.php">Condiciones
de uso</a>
<a href="http://www.webmastersgratis.com/contenidos/encuestas/index.php">chat</a>
<a href="http://www.webmastersgratis.com/contenidos/titulares/index.php">Heavy
Met&auml;l</a>
<a href="http://www.webmastersgratis.com/contenidos/intercambio/index.php">Acceso
a tu pagina por clave con javascrip</a>
<a href="http://www.webmastersgratis.com/contenidos/altabuscadores/alta-en-buscadores-gratis.php">Heavy
Met&auml;l</a>
<a href="http://www.webmastersgratis.com/contenidos/altabuscadores/index.php">Heavy
Met&auml;l</a>
<a href="http://www.webmastersgratis.com/contenidos/posicionamientobuscadores/index.php">Heavy
Met&auml;l</a>
<a href="http://www.webmastersgratis.com/contenidos/posicionamientobuscadores/informe-posicionamiento.php">Heavy
Met&auml;l</a>
<a href="http://www.webmastersgratis.com/ganardinero/web/index.php">Heavy
Met&auml;l</a>
</div>
</body>
</html>

Ya contarás.

Mikel.

[juanitTo]

tengo solo otras dos dudas que agradeceria que me resolvieras Mikmoro, y es que tengo 13 años y yo creia que esto iba a ser mas facil, yo quise hacer una web sencilla y solo sabia un poquito, muy poco de html de nada mas, a si es que perdona las dudas tan tontas que tengo pero no se nada de ccs:
la primera: en el pie de la pagina tengo un contador que esta asociado a un link pues bien, me sale con el mismo estilo que la tabla, querria que no estruviera presente en este caso, como lo hago??
la segunda: en el centro tengo un frame, desde que he modificado el css el frame se me va hacia abajo y empieza cuando termina la tabla como lo llevo otra vez arriba?? gracias

[Mikmoro]

Iniciado por juanitTo

tengo solo otras dos dudas que agradeceria que me resolvieras Mikmoro, y es que tengo 13 años y yo creia que esto iba a ser mas facil, yo quise hacer una web sencilla y solo sabia un poquito, muy poco de html de nada mas, a si es que perdona las dudas tan tontas que tengo pero no se nada de ccs:

Por partes:
No hay nada que perdonar por tener dudas tontas. Aprender css no es muy difícil, pero si por alguna razón te llama la atención este sistema (de ahí tu consulta en este foro), deberás empezar por leer y estudiarlo un poco. Si por el contrario sólo quieres hacer cosillas en html sin más, te recomiendo que uses NVU, Dreamweaver o cualquier programa de edición visual y no te preocupes por cómo queda el código. Ya aprenderás más cuando tengas ganas.

la primera: en el pie de la pagina tengo un contador que esta asociado a un link pues bien, me sale con el mismo estilo que la tabla, querria que no estruviera presente en este caso, como lo hago??

Localiza dónde están los dos selectores a (a y a:hover) y ponles delante #menu:

#menu a { border-top: 1px solid rgb(255, 255, 255);
text-decoration: none;
color: rgb(255, 255, 255);
font-size: 16px;
display: block;
width: 100%;
}
#menu a:hover { background-color: rgb(0, 232, 0);
}

la segunda: en el centro tengo un frame, desde que he modificado el css el frame se me va hacia abajo y empieza cuando termina la tabla como lo llevo otra vez arriba?? gracias

En el selector #menu añade float: left;

#menu { border: 1px solid rgb(255, 102, 0);
width: 120px;
font-family: Verdana;
text-align: center;
background-color: rgb(0, 0, 0);
float: left;
}

Espero que te sirva.

Mikel.

[juanitTo]

gracias por tu ayuda, respecto a la primera la e solucionado, gacias!, y la segunda ya la tenia como tu me has sugerido que la ponga, alguna otra solucion? gracias, si te sirve de algo te pongo el codigo entero por si hay algo mal que impida que la tabla este bien:

<html>
<head>
<title>Mi Zona</title>

<style type="text/css">
BODY {
font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 10 0 10 0px;
text-align: center;
background-color: #000000;
}
#contenedor{
text-align: left;
width: 100%;
margin: auto;
}
#cabecera{
background-color: #000000;
color: #333300;
font-size:12pt;
font-weight: bold;
padding: 3 3 3 10px;
}
#cuerpo{
margin: 10 0 10 0px;
}
#lateral{
border: 2px solid rgb(255, 102, 0);
width: 14%;
font-family: Verdana;
text-align: center;
background-color: rgb(0, 0, 0);
}
#lateral a { border-top: 1px solid rgb(255, 255, 255);
text-decoration: none;
color: rgb(255, 255, 255);
font-size: 16px;
display: block;
width: 100%;
}
#lateral a:hover { background-color: rgb(0, 232, 0);
}
</style>
}
#principal{
background-color: #000000;
padding: 4 4 4 4px;
width: 60%;
float: left;
}

#otrolado{
width: 20%;
float: right;

}
#pie{
background-color: #000000;
padding: 3 10 3 10px;
text-align:right;

clear: both;
}

#derecha{
margin: 0 0 0 170px;
}
</style>

</head>

<body>

<div id="contenedor">
<div id="cabecera">
<CENTER>
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/
shockwave/cabs/flash/swflash.cab#version=4,0,2,0" width="600" height="30">
<PARAM name="movie" value="http://sv1.letmehost.com/sv1/24/flashvortex_001.swf">
<PARAM name="quality" value="high">
<PARAM name="menu" value="true">
<EMBED src="flashvortex.swf" quality="high" menu="true" pluginspage="http://www.macromedia.com/shockwave/
download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="119" height="221">
</EMBED>
</OBJECT>
</CENTER>
<CENTER>
<td width="100%"><img border="0" src="http://sv1.letmehost.com/sv1/24/Untitled-2_002.jpg" width="600" height="103">
</CENTER>
</div>
<div id="cuerpo">
<div id="lateral">
<a href="http://www.webmastersgratis.com/contenidos/foros/index.php">Trucos
javascrip</a>
<a href="http://www.webmastersgratis.com/contenidos/chats/index.php">Uso
de frames</a>
<a href="http://www.webmastersgratis.com/contenidos/imagenes/index.php">Condiciones
de uso</a>
<a href="http://www.webmastersgratis.com/contenidos/encuestas/index.php">chat</a>
<a href="http://www.webmastersgratis.com/contenidos/titulares/index.php">Heavy
Metäl</a>
<a href="http://www.webmastersgratis.com/contenidos/intercambio/index.php">Acceso
a tu pagina por clave con javascrip</a>
<a href="http://www.webmastersgratis.com/contenidos/altabuscadores/alta-en-buscadores-gratis.php">Heavy
Metäl</a>
<a href="http://www.webmastersgratis.com/contenidos/altabuscadores/index.php">Heavy
Metäl</a>
<a href="http://www.webmastersgratis.com/contenidos/posicionamientobuscadores/index.php">Heavy
Metäl</a>
<a href="http://www.webmastersgratis.com/contenidos/posicionamientobuscadores/informe-posicionamiento.php">Heavy
Metäl</a>
<a href="http://www.webmastersgratis.com/ganardinero/web/index.php">Heavy
Metäl</a>
</div>
<div id="derecha">
<div id="principal" algin="top">
<CENTER>
<iframe algin="top" name=juanito src="central.html"
width="60%" height="600" scrolling="no" frameborder="0">
</iframe>
</div>
<div id="otrolado">
</div>
</div>
</div>
<div id="pie">
<CENTER>
<a href="http://msnspaces.messengeradictos.com/estadisticas-11970.html"><img src="http://msnspaces.messengeradictos.com/contador/mostrarcontador.php?Cuenta=11970&Tipo=3" alt="Contador de estadisticas" border="0"></a>
</CENTER>
</div>
</div>

</body>
</html>

[Mikmoro]

Te decía que añadieras el float left en el selector #menu de mi ejemplo, que tú has convertido en #lateral en tu html. Si ese #lateral hace la misma función que el #menu de mi ejemplo, es ahí donde debes poner el float left.

#lateral{
border: 2px solid rgb(255, 102, 0);
width: 14%;
font-family: Verdana;
text-align: center;
background-color: rgb(0, 0, 0);
float: left;
}

Mikel.

[juanitTo]

muchisimas gracias, no sabes como te lo agradezco dse verdad, me e tirao 4 o 5 semanas intentado esto te lo agradezco de verdad

[Mikmoro]

De nada. Ya has visto que este último error ha sido sólo de falta de atención, así que, cuando se trata de código, hay que fijarse muy bien e ir muuuuuuy despacito .

Me alegro de que te funcione. Hasta la vista.

Mikel.