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>. Twittear

Í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

◄Anterior | Siguiente►