SoloCodigo

Programación Web y Scripting => HTML => CSS / SASS / LESS => Mensaje iniciado por: alexis17 en Domingo 15 de Abril de 2007, 18:13

Título: Ponerle Un Borde A Una Celda
Publicado por: alexis17 en Domingo 15 de Abril de 2007, 18:13
hola buenos dias estoy practicando ponerle un borde a una celda en html, lo queria hace primero en html para despues hacerlo en css
estoy usando el programa dream weber entonces selecciono la celda le pongo un color ejemplo rojo en el modo diseño aparece rojo pero cuando pongo la pagina sale sin el borde tambien le puse borde a la tabla pero aparece es como tridimencional yo quiero es un borde como plano  no se cual seria mi problema porque no me sale el borde de un color en una celda y tambien la manera que no me salga un borde tridimencional en la tabla osea lo que yo deseo es hacer como ejemplo en esta pagina que tiene dos celdas en la celda de arriba tiene un color y la de abajo es blanca pero entonces quiero que toa la table solo tenga el borde de un color asi como una linea plana se le agradece su ayuda o si eso se hace mejor en css si tienen algun ejemplo gracias

este es mi codigo

<html >
<head>

</head>

<body>
<table width="581" height="165" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="599" height="37" valign="top" bgcolor="#00CCFF">esta es la celda uno</td>
  </tr>
  <tr  bordercolor="#CC0066" bgcolor="#FFFFFF">
    <td height="122" valign="top">esta es la celda 2</td>
  </tr>
</table>
</body>
</html>
Título: Re: Ponerle Un Borde A Una Celda
Publicado por: Mollense en Domingo 15 de Abril de 2007, 19:57
Hola viejo. Como va :question:

Mi humilde opinión es que no pierdas demasiado tiempo aprendiendo a utilizar las propiedades de formato de HTML y aprendas directamente CSS que tiene muchas pero muchas ventajas respecto a los obsoletos tags de formato.-

Para que veas cuanto puede CSS simplificarte la vida te muestro la tabla de tu código con tres formatos distintos utilizando CSS:

Código: Text
  1. &#60;?xml version=&#34;1.0&#34; encoding=&#34;windows-1252&#34;?&#62;
  2. &#60;!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.1//EN&#34; &#34;http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd&#34;&#62;
  3. &#60;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&#62;
  4.   &#60;head&#62;
  5.  
  6.     &#60;style type=&#34;text/css&#34;&#62;  
  7.    
  8.       .tabla1 {border: medium solid #00F; }
  9.      
  10.       .tabla1 td {border: medium solid #000; background-color: #333333; color: #fff; }
  11.    
  12.       .tabla2 {border: medium dotted #F00}
  13.       .tabla2 td {border: medium solid #000; background-color: #A3B6C4; color: #00F; font-weight:bold;}
  14.    
  15.       .tabla3 {border: 0px; background-color: #A3B6C4;}
  16.       .tabla3 td {background-color: #EEE;  padding: 0.5em 1em 0.5em 1em}    
  17.      
  18.     &#60;/style&#62;
  19.  
  20.     &#60;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=windows-1252&#34; /&#62;
  21.     &#60;title&#62;Bordes&#60;/title&#62;
  22.  
  23.   &#60;/head&#62;
  24.  
  25.   &#60;body&#62;
  26.     &#60;table class=&#34;tabla1&#34;&#62;
  27.       &#60;tr&#62;
  28.         &#60;td&#62;esta es la celda 1&#60;/td&#62;
  29.       &#60;/tr&#62;
  30.       &#60;tr&#62;
  31.         &#60;td&#62;esta es la celda 2&#60;/td&#62;
  32.       &#60;/tr&#62;
  33.     &#60;/table&#62;
  34.     &#60;br /&#62;
  35.     &#60;table class=&#34;tabla2&#34;&#62;
  36.       &#60;tr&#62;
  37.         &#60;td&#62;esta es la celda 1&#60;/td&#62;
  38.       &#60;/tr&#62;
  39.       &#60;tr&#62;
  40.         &#60;td&#62;esta es la celda 2&#60;/td&#62;
  41.       &#60;/tr&#62;
  42.     &#60;/table&#62;
  43.     &#60;br /&#62;
  44.     &#60;table class=&#34;tabla3&#34;&#62;
  45.       &#60;tr&#62;
  46.         &#60;td&#62;esta es la celda 1&#60;/td&#62;
  47.       &#60;/tr&#62;
  48.       &#60;tr&#62;
  49.         &#60;td&#62;esta es la celda 2&#60;/td&#62;
  50.       &#60;/tr&#62;
  51.     &#60;/table&#62;
  52.   &#60;/body&#62;
  53. &#60;/html&#62;
  54.  
El resultado es este:
(http://img409.imageshack.us/img409/9162/dibujodp7.png)
Como ves, la tabla es siempre la misma, lo único que cambia es su clase  :)

Saludos :beer:
Título: Re: Ponerle Un Borde A Una Celda
Publicado por: alexis17 en Domingo 15 de Abril de 2007, 21:57
gracias por la ayuda si me parece mejor ya lo estoy trasteando un poco como se dice para cojer la practica