Publicentral.com - alta en buscadores, registro buscadores, promocionaPromocion en buscadores y negocios online
Mostrando Codigo - Css
Code

Css - Redondear esquinas de una tabla

Códigos Css

Para dar un poco mas de diseño a nuestras paginas y redondear las esquinas de las tablas podemos utilizar es estilo.css Esta hoja de estilo solo funciona con nn6 y mozilla
Visitas: 60,811 - 14/10/2003 22:36:14
DemoNO CONTIENE ARCHIVO DESCARGABLEComentario
EXPLICACION

Modificar entre las lineas 4 y 9 para la configuracion de los colores.

CODIGO
Codigo probado en ChromeCodigo probado en Mozilla FirefoxEste codigo aun no ha sido probado por Tutores.org en Internet Explorer 7+Este codigo aun no ha sido probado por Tutores.org en OperaEste codigo aun no ha sido probado por Tutores.org en Safari


/* Codigo ofrecido por Tutores.org */

  1. <style type="text/css">
  2. table{
  3. -moz-border-radius: 15px;
  4. background-color : #cc0000;
  5. border : 1px solid #000000;
  6. font-family : Arial, Verdana, Helvetica, sans-serif;
  7. font-size : 12px;
  8. padding-left : 5px;
  9. padding-right : 5px;
  10. }
  11. </style>
  12. <table width="100%"  border="2" cellspacing="0" cellpadding="8">
  13.   <tr>
  14.     <td> </td>
  15.   </tr>
  16. </table>



ENLACE AL CODIGO
Si quieres enlazar desde tu pagina a este codigo
<!-- Inicio enlace Tutores.org -->
<a title="Tutores.org - Redondear esquinas de una tabla" href="http://www.tutores.org/codigo/717/" target="_blank">Redondear esquinas de una tabla</a>
<!-- Final enlace Tutores.org -->
COMENTARIOS
Comentario usuario
katrin
2 5
no me funciona este código ni por activa ni por pasiva.
lo he copiado exactaemente como viene.
que he hecho mal??? a alguien le funciona??
Comentario usuario
jean
3 5
Pues a mi tampoco me funciona, me parece muy rara esta propiedad -moz-border-radius
Comentario usuario
18-07-2007 14:01:05
1 5
Si, funciona perfectamente bien para los navegadores mencionados, es un pena que no funciones en IE, se puede hacer algo para que ello suceda?
Comentario usuario
17-07-2010 19:30:19
5 5
amigos, he probado al igual que ustedes el estilo y no me funciona, le he puesto el . delante de table para que me lo reconociera mi hoja de estilo, pero nada solo sale una tabla de color rojo normal, quisera saber si en verdad esto funciona pues me parece que no...
Comentario usuario
leandro
1 5
Seguramente no les sale porque usan IE.
Una pregunta, alguien sabe si se puede redondear un solo borde, digamos el superior derecho.
Igualmente es muy util este codigo
Comentario usuario
03-01-2008 19:15:42
1 5
cuales son los navegadores mencionados
Comentario usuario
07-01-2009 19:33:34
2 5
Este código funciona bien para netscape 6+ y Firefox. No funciona en Microsoft Internet Explorer. Asi que seguramente a los que no le funcionan es porque están usando el navegador de mocosoft.
Comentario usuario
07-01-2009 19:33:34
1 5
Es una lástima que haya que hacerle padding al contenido de la tabla para que se pueda ver el efecto, ya que parece que el borde está un nivel mas abajo que el contenido y este lo tapa.
Comentario usuario
angel luis
5 5
Acabo de ver esta página y los problemas de que habláis.
He encontrado estas direcciones sobre las esquinas redondeadas:
http://www.w3.org/TR/css3-background/#border-top-left-radius
http://lists.w3.org/Arch ives/Public/www-style/2006Jul/0022.html
http://lists.w3.org/Archives/Public/www-validator-css/2005O ct/0014.html
...
En fín, siempre es recomendable visitar el sitio http://www.w3c.org y su versión española http://www.w3c.es.
Un saludo a todos.
Comentario usuario
03-09-2007 11:54:43
4 5
a mi me funciona muy bien en mozilla.
alguien sabe alguna forma de hacerlo funcionar en IE o en Safari??
Comentario usuario
15/02/2005 20.54.27
4 5
Por favor diganme que pasa que no puedo par forma a la tabla, puse el codigo que aparece para redondearla y no hace nada, solo toma los colores, y las dimensiones pero no se redondea...
Comentario usuario
15/02/2005 20.54.27
1 5
La tabla redonda me funciona en Mosila pero en el internet explorer IE, no hace nada, digenme que tengo que hacer para lograr redondear la tabla...
Comentario usuario
Akira
2 5
vamos a ver, komo ya han dicho y bien se ve arriba este codigo solo es valido para firefox. lo siguiente es que el codigo ha de amoldarlo cada uno a su web ya que no todas son iguales, ni tienen los mismo soclores ni las mismas formas. por otra parte es cierto que el codigo podria venir algo más detallado con algun comentario ya que para un usuario que no sabe lo que toca, que simplemente copia y pega y algo inutil.
Comentario usuario
dulce
2 5
Definitivamente no funciona bien en IE, safari ni opera... exelente en Mozila. si alguien tiene alguna solucion para esto porfavor posteala.

Por alli arriba alguien pregunto como bordear solo los extremos que quiera ejemplo esquina superior izq y esquina inferior derecha. Solo debes colocar el codigo de esta forma

-moz-border-radius: 15px 8px 8px 15px; (EJEMPLO)
Y cambias los valores de px segun lo necesites los dos primeros son las esquinas superiores y por supuesto los otros dos modifican la forma de los inferiores. posteen lo que sepan... Compartan conocimientos. Saludos
Comentario usuario
ser01_1
4 5
<marquee><strong> No funciona </strong></marquee>
Comentario usuario
ser01_1
4 5
Corrijo, si funciona muy bien pero solo en Mozilla como ya lo han comentado. Alguien por ahí tendra el código para IE
Comentario usuario
Sin definir
5 5
Si no me equivoco, me parece que IE tiene su propio efecto de redondeado de esquinas...
Comentario usuario
03-01-2008 19:15:42
4 5
Un ejemplo con radios iguales de 27px.
Para Mozilla:
-moz-border-radius: 27px;
Para Safari & Chrome:
-webkit-border-radius: 27px;
Para IE: no es posible ya ni IE7 ni IE8 aceptan CSS3, hay que hacerlo con gráficos. Lo mismo se puede decir de los efetos de sombra.
Comentario usuario
bbzzita
4 5
Pues que lastima que a algunas personas no les ha funcionado, ya que a mi si me funciono muy bien, en mozila claro, pero en IE no.
Bueno, al menos me queda mejor que como tenia los boxes de contenido antes.
Gracias por el codigo.
Comentario usuario
Andragaira
3 5
Pues he decie que en Firefox funciona perfectamente. Y sí, es una pena que el IE no lo muestre.
Muchas gracias por tu código.
Comentario usuario
Sergio Informatica
3 5
Me leyo de 100 en MF.
pero el problema es que la porqueria de IE no lo lee.

Muchas gracias!
Comentario usuario
02-02-2009 18:34:47
2 5
si se puede redondear una sola esquina solamente agrega 4 valores mas:

-moz-border-radius:20px 0 0 0;

los 3 ceros que aparecen corresponden a cada esquina y se cuentan en orden de las manesillas del reloj.

asi cambiaras solamente una esquina que seria la superior izkierda.

para la superior derecha seria asi:

-moz-border-radius:0 20px 0 0;

y listo sensillo espero te sirva.
Comentario usuario
27-09-2007 00:22:32
5 5
no funciona porque no tiene compatibilidad hay que agregarsela
lo que deben hacer es lo siguiente:
para que funcione en Opera y Chrome hay que agragarle -webkit- -o-, en fin quedaria asi con las compatibilidades:


<style type="text/css">
table{
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-o-border-radius: 15px;
background-color : #cc0000;
border : 1px solid #000000;
font-family : Arial, Verdana, Helvetica, sans-serif;
font-size : 12px;
padding-left : 5px;
padding-right : 5px;
}
</style>
<table width="100%" border="2" cellspacing="0" cellpadding="8">
<tr>
<td> </td>
</tr>
</table>
Comentario usuario
juan carlos
4 5
el codigo funciona muy bien pero solo es para firefox no funciona en explorer ni chrome gracias por el aporte :)
Comentario usuario
jb
1 5
todo me funciono como deberia no entiendo que habran hecho los demas
INSERTAR COMENTARIO

Usuario:
Email:
Comentario:
Codigo Seguridad


Antes de enviar un comentario...
Todos los comentarios son revisados personalmente
Todo comentario que no haga relacion al codigo mostrado en esta pagina sera eliminado

Usuarios registrados tienen preferencia en recibir respuestas de ayuda!!
Ademas de poder insertar Imagenes,Enlaces y otras propiedades del editor.
Por favor, insertar los comentarios descriptivos.