5.1.10

Tablas con bordes de líneas punteadas CSS



Las Hojas de Estilo en Cascada (CSS) se pueden utilizar para crear un estilo que nos permita conseguir el efecto de las tablas HTML con bordes de líneas punteadas.

Es necesario utilizar la propiedad de CSS "border-style" con el valor "dotted" (punteado en inglés). Además, podemos definir otros valores como pueden ser el color del borde o el color de fondo de la tabla.

Se debe definir una clase aplicable a las tablas para que tengan el borde punteado.

Una clase es una declaración de estilo que podemos utilizar en cualquier elemento de una página. Para ello se incluye el atributo class="nombre_clase" en la etiqueta HTML que deseamos que tenga dicho estilo.

Para poner en nuestro blog tablas con este estilo, como éstas:


1.- Vamos a Editar HTML:

Diseño Plantilla Editar HTML Click dentro del editor Ctrl+f

2.- Localizamos la etiqueta ]]></b:skin> y, antes de la misma, pegamos el siguiente código:

.punteado{
  border-style: dotted;
   border-width: 1px;
   border-color: 660033;
   background-color: cc3366;
   font-family: verdana, arial;
   font-size: 10pt;
}

Esta clase tiene definida la siguiente serie de atributos de estilos: tipo de borde, ancho del borde, color del borde, color de fondo, tipo de letra y tamaño de la fuente. En nuestro caso el aplicable es el primero, border-style: dotted;, que define un borde punteado.

Para utilizar el estilo tenemos que asignar a un elemento de HTML la clase generada antes. Para ello utilizamos el atributo class de HTML. Tal como se ha definido, la clase se puede utilizar en una tabla o una celda.

3.- Los siguientes códigos HTML los ponemos en donde queramos que aparezcan las tablas (entradas y/o gadgets).

  • Para tablas con el borde externo punteado:

<table class="punteado" border="1" width=60% align="center" >
<tr>
  <th>
  <center>Ejemplo</center>
  </th>
  <th>
  <center>Ejemplo</center>
  </th>
</tr>
   <tr>
   <td>
   Para ver el efecto de tabla con borde externo de línea punteada.
   </td>
   <td>
   Para ver el efecto de tabla con borde externo de línea punteada.
   </td>
</tr>
</table>

  • Para tablas con el borde de las celdas punteado:

<table border="1" width=60% align="center" >
<tr>
  <th class="punteado">
   <center>Ejemplo</center>
   </th>
  <th class="punteado">
   <center>Ejemplo</center>
   </th>
</tr>
   <tr>
  <td class="punteado">
   Para ver el efecto de tabla con celdas de línea punteada.
   </td>
  <td class="punteado">
   Para ver el efecto de tabla con celdas de línea punteada.
   </td>
  </tr>
</table>

Nota: Recordemos que las etiquetas <th> y </th> definen celdas de encabezamiento, pero algunos navegadores no las interpretan correctamente y no ubican el texto en el centro. Para asegurarnos de que el texto quede en el centro lo encerramos entre las etiquetas <center> y </center>.

Índice Hojas de Estilo en Cascada CSS
Generalidades
Ejemplos de códigos CSS
Crear menú dinámico con CSS
Tabla con borde punteado
Campos de texto estilos avanzados
Enlace con aspecto de botón
Crear recuadros con CSS

3 comentarios :

▼▲ Ocultar / Mostrar comentarios
Comentario escrito por FENIX : #

Me ayudo bastante, especialmete el atributo de estilo: border-width.

Comentario escrito por Pedro Pablo Pachón : #

Fenix: Gracias por su visita.
Saludos.

Comentario escrito por noticiero calientico : #

HOLA AMIGO ME PODRIAS DECIR COMO SE HACE PARA QUE LA PARTE IZQUIERDA GENERAL DE TU BLOG QUEDE PEGADA DE LA PARTE DERECHA DEL BLOG? LO DIGO XQ LA MAYORIA DE LAS PLANTILLAS DE BLOGGER ESTAS 2 ESTAN SEPARADAS Y M GUSTA EL ESTILO DE TU PAGINA ME PUEDES RESPONDER A MI CORREO POR FAVOR MONTIELFERNANDO@LIVE.COM

Este blog ya cumplió su ciclo, por esta razón, aunque sigue a disposición de los usuarios, no se harán más publicaciones ni se atenderán más consultas. La respuesta a su inquietud puede estar entre los comentarios hechos hasta aquí.

El autor.