ElTicus.com

Programación, lenguajes y recursos para programadores

Truco
Como hacer tablas con esquinas redondas con CSS y HTML
Aquí te mostramos como lograr ese novedoso truco
Publicado por jl Fecha: 2007-08-03 11:01:00 Idioma: Español Tipo de documento: Truco

Como hacer que las tablas de tu página Web luzcan con las esquinas redondas con CSS y HTML

Las esquinas redondas son lo que está de "onda" hoy en día y para lograrlas hasta ahora solo se lograba empleando el dreamweaver, fireworks, frontpage o alguno de los editores de HTML que lo realizan de forma automática pero que en ocasiones nos generan un código muy INFLADO o que no queda exáctamente como tu lo queres y tienes que conformarte con lo que la aplicación te proporciona.

Bueno, pues si tu eres de los que prefieren hacerlo todo a pie utilizando tu editor de código y tu editor de imágenes aquí te diremos como hacerlo.

Primero veremos el resultado que vamos a lograr por medio del siguiente cuadro:

[imagen en="archivos/ie_esquinas_redondas.gif"]

El truco

Las esquinas redondas se logran por medio de imágenes pequeñas colocadas estratégicamente sobre una tabla contenedora.

4 imagenes forman las esquinas y otras 4 forman los bordes.
cada una de las imágenes de los bordes se repite prolongando dicha línea a toda la longitud de la tabla.

Analicemos el siguiente diagrama:

[imagen en="archivos/esquinas_redondas.gif"]

Nótese que cada una de las imágenes consta de 3 secciones que son:

  1. Sección transparente. Es donde se verá el interior de la tabla.
  2. Borde del recuadro. Es donde aremos el efecto de línea y de esquinas redondas.
  3. Sección opaca o fondo. Debe ser del mismo color que el fondo de la página para que no se noten las esquinas.


NOTA: Como requerimos de imágenes que tengan una sección transparente, es necesario que utilicemos imágenes en formato GIF o PNG.


Si analizamos una de las tablas con el Outline-Table-Cell del plugin Developer del Mozilla Firefox podremos apreciar mejor el truco:

[imagen en="archivos/mozilla_esquinas_redondas.gif"]

Aquí vemos pues que en realidad se trata de dos tablas, una de 3x3 celdas que es la que contiene las imágenes en el fondo y una tabla en el centro que es la que contiene el verdadero contenido de la tabla.


Código fuente

A continuación se presenta el código fuente en HTML que genera la página del ejemplo:


<html>
<head>

<style type="text/css">

table.botonera {
    margin: auto;
    border-spacing: 0px;
    border-collapse: collapse;
    empty-cells: show;
    width: auto;
    background: url(imagenes/background-botoneragral.gif) repeat-x;
}

table.botonera table {
    border-spacing: 0px;
    border-collapse: collapse;
    empty-cells: show;
    width: 100%;
}

table.botonera td.puntos {
    height: 3px;
    background: url(imagenes/background-plkpuntos-hor.gif) repeat-x;
}

table.botonera td.frameTL {
    width: 6px;
    height: 6px;
    padding: 0;
    background: url(imagenes/esq-formato-interior-izq-sup.gif) no-repeat left top;
}

table.botonera td.frameTC {
    padding: 0;
    background: url(imagenes/background-formato-interior-sup.gif) repeat-x;
}

table.botonera td.frameTR {
    width: 6px;
    height: 6px;
    padding: 0;
    background: url(imagenes/esq-formato-interior-der-sup.gif) no-repeat right top;
}

table.botonera td.frameBL {
    width: 6px;
    height: 6px;
    padding: 0;
    background: url(imagenes/esq-formato-interior-izq-inf.gif) no-repeat left bottom;
}

table.botonera td.frameBC {
    padding: 0;
    background: url(imagenes/background-formato-interior-inf.gif) repeat-x;
}

table.botonera td.frameBR {
    width: 6px;
    height: 6px;
    padding: 0;
    background: url(imagenes/esq-formato-interior-der-inf.gif) no-repeat right bottom;
}

table.botonera td.frameCL {
    padding: 0;
    background: url(imagenes/background-formato-interior-izq.gif) repeat-y;
}


table.botonera td.frameC {
    padding: 0;
    text-align: center;
}

table.botonera td.frameCR {
    padding: 0;
    background: url(imagenes/background-formato-interior-der.gif) repeat-y;
}

table.botonera td.linkItem {
    height: 25px;
}

table.botonera a:link, table.botonera a:active, table.botonera a:visited {
    color: #3F4C69;
    text-decoration: none;
}

table.botonera a:hover { 
    color: #C82E28;
    text-decoration: underline;
}

</style>



</head>
<body>

<table class="botonera">
 <tr><td class="frameTL"></td><td class="frameTC"></td><td class="frameTR"></td></tr>

 <tr>
   <td class="frameCL"></td><td class="frameC">
   
     <table border=0>
      <tr><td><a href="#">Administración </a></td></tr>
       <tr><td class="puntos"></td></tr>
       <tr><td><a href="#">Soporte técnico </a></td></tr>
       <tr><td class="puntos"></td></tr>
       <tr><td><a href="#">Manejo de archivos </a></td></tr>
       <tr><td class="puntos"></td></tr>
       <tr><td><a href="#">Control de usuarios </a></td></tr>
       <tr><td class="puntos"></td></tr>
       <tr><td><a href="#">Salir </a></td></tr>
     </table>

   </td>
 <td class="frameCR"></td></tr>
 <tr><td class="frameBL"></td><td class="frameBC"></td><td class="frameBR"></td></tr>
</table>

<br><hr><br>


<table class="botonera">
    <tr><td class="frameTL"></td><td class="frameTC"></td><td class="frameTR"></td></tr>
    <tr>
    <td class="frameCL"></td><td class="frameC">
         asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf
    </td>
    <td class="frameCR"></td></tr>
    <tr><td class="frameBL"></td><td class="frameBC"></td><td class="frameBR"></td></tr>
</table>

<br><hr><br>

<table class="botonera">
    <tr><td class="frameTL"></td><td class="frameTC"></td><td class="frameTR"></td></tr>
    <tr>
    <td class="frameCL"></td><td class="frameC">
       <b>Amado Nervo</b> Poeta mexicano. Nació el <u>27 de agosto de 1870</u> <br/> 
       en la ciudad de Tepic, Nayarit, y murió el <u>24 de mayo de 1919</u>.<br/> 
       Trece años después murió su padre, dejando a la familia en situación <br/>
       económica comprometida. Otras dos muertes habrían de marcar su vida: <br/>
       el suicidio de su hermano Luis, que también era poeta, y el retorno <br/>
       <i>"a la fuente de gracia de dónde procedía"</i> de su amada Ana Cecilia<br/> 
       Luisa Daillez.
    </td>
    <td class="frameCR"></td></tr>
    <tr><td class="frameBL"></td><td class="frameBC"></td><td class="frameBR"></td></tr>
</table>

</body>
</html>


En resumen, tenemos una Hoja de Estilo que nos define las Tablas con esquinas redondas y para aplicarla, se utiliza el siguiente fragmento de código:


<table class="botonera">
    <tr><td class="frameTL"></td><td class="frameTC"></td><td class="frameTR"></td></tr>
    <tr>
    <td class="frameCL"></td><td class="frameC">
         asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf
    </td>
    <td class="frameCR"></td></tr>
    <tr><td class="frameBL"></td><td class="frameBC"></td><td class="frameBR"></td></tr>
</table>

en donde el "asdf asdf asdf ..." representa el texto o contenido de la tabla.


Siquieres descargarte el código completo junto con todas las imágenes del ejemplo, haz click [liga a="archivos/esquinas_redondas.zip"]AQUÍ




Hay 3 comentarios sobre este tema por parte de los lectores


Haz un comentario sobre este tema
Nombre email (no se muestra)
comentario:
Escribe las 2 letras que ves aquí: Imagen anti-spam =

Comentarios de parte de los lectores:

1. Comentario de dcdc el 2016-03-12 16:35:37
cdcd

2. Comentario de eduardo el 2016-03-11 23:59:01
jsdugwuixdb

3. Comentario de David herrera el 2015-05-17 01:05:11
Te felicito, de muchas soluciones que encontré en la web, esta es la mejor!

GRACIAS.


Artículos relacionados:
Recurso no clasificado Como cambiar el color de las barras de scroll del explorador Recurso no clasificado Como construir una gráfica de barras con CSS y PHP Truco Como colocar un tooltip sobre los elementos de mi página