-
Cómo hacer Fantasía bordes de tabla con CSS
-
Una de las ventajas del uso de CSS es que se pueden crear efectos utilizando código que de otro modo necesitaría software de gráficos para lograr. CSS aumenta el número de opciones de diseño disponibles que puede utilizar a través de código. El uso de código en lugar de gráficos puede reducir el tiempo de carga la página, por lo que visitar su sitio web es una experiencia más agradable.Instrucciones
1 Tipo <style type = "text / css"> cerrado en el <head> </ head> etiquetas - por debajo de las etiquetas de la cabeza HTML estándar y sobre los etiquetas de JavaScript incluido en la cabecera. Escriba <! - Y saltar una línea. Tipo -> e ir a la siguiente línea. Escriba </ style> para cerrar la etiqueta de estilo. Debe tener un aspecto como este:
<Style type = "text / css">
<! -->
</ Style>2 Asignar un atributo de la clase a su mesa en la etiqueta de la tabla abertura en el cuerpo del documento. Si desea que la configuración de fronteras para aplicar a cada mesa individual en su documento, puede optar por no asignar una clase a su mesa. Para controlar las mesas específica la configuración de borde se aplican a, establecer un atributo de clase. En el siguiente ejemplo, el atributo de clase asignado es de muestra:
<Table class = "ejemplo">
3 Tipo "table.sample" sin las comillas en la línea en blanco entre los <! - -> Etiquetas. Ir a la siguiente línea. Escriba el corchete izquierdo ({), salte una línea y escriba el corchete derecho (}). Esto le indica al navegador que cualquier propiedad que escribe dentro de los paréntesis se aplican a los elementos de la tabla con el nombre de la clase de muestra en este documento. Debe tener un aspecto como este:
<Style type = "text / css">
<! -
table.sample
{}
->
</ Style>4 Escriba la propiedad border en la línea en blanco entre las llaves. Para aplicar los valores de la tabla general, el tipo de "frontera". Para aplicar los valores de los distintos lados, escriba la opción adecuada. Las opciones disponibles son las fronteras, border-left, border-right, border-top y border-bottom. Siga la propiedad border con dos puntos (:).
5 Establecer las tres propiedades de borde (ancho, estilo y color). El ancho se establece en píxeles (px). Las opciones de estilo disponibles son puntos, guiones, sólido, doble, surco, canto, inserción y principio. Ajuste el color usando un nombre (negro), RGB (RGB (0,0,0)), o el valor hexadecimal (# 000000). El ancho del borde, estilo y color (en ese orden) deben todos estar presentes para que aparezca la frontera en la página. Para ver el detalle de los distintos estilos, utilizar una configuración mínima de 5px para el ancho.
En el ejemplo que sigue, los ajustes se aplican a todos los cuatro lados de la frontera de las tablas en el documento con una muestra nombre de la clase. El ancho del borde es de cinco píxeles, el estilo de borde es sólido y el color del borde es negro. Debe tener un aspecto como este:
<Style type = "text / css">
<! -
table.sample
{
frontera: 5px sólido negro;
}
->
</ Style>Consejos y advertencias
- Los atributos se utilizan en HTML para modificar los elementos HTML. En este caso, el elemento HTML es la tabla - comenzando con <table>. La clase es un atributo HTML. Hay más de 10 atributos disponibles para el elemento de la tabla. Controlan muchos entornos, incluyendo cellpadding, cellspacing, bgcolor y ancho del borde. configuración de CSS tienen prioridad sobre los atributos HTML.
- El selector (table.sample), propiedades y valores están en diferentes líneas en el ejemplo citado por sólo claridad. Puede colocar todos los elementos en una sola línea como en este ejemplo:
- <Style type = "text / css">
- <! -
- table.sample {border: 1px solid verde; border-left: trazos # 550000; border-right: punteada # 007700;}
- ->
- </ Style>
- configuración de prioridad sobre los valores CSS HTML.
