Cómo hacer Bordes de tabla de lujo con CSS

Hay varias opciones disponibles para crear elegantes fronteras utilizando CSS. 

FRONTERAS

Una de las ventajas del uso de CSS es que usted puede crear efectos usando código que de otro modo hubiera necesitará software gráfico 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 los gráficos puede reducir el tiempo de carga de las páginas, así que visita su sitio web es una experiencia más agradable.

Tipo Tipo style = text / css encerrado en las etiquetas de la cabeza / cabeza - por debajo de las etiquetas estándar HTML head y por encima de las etiquetas de JavaScript incluido en el encabezado. Tipo! y pase una línea. Tipo - e ir a la siguiente línea. Tipo / estilo de cerrar la etiqueta de estilo. Se debe tener este aspecto:

estilo type = text / css -

- / Estilo

Asignar un atributo de clase a su mesa en la etiqueta de la tabla abertura en el cuerpo del documento. Si desea que los ajustes de fronteras para aplicar a cada mesa en el documento, puede optar por no asignar una clase a su mesa. Para controlar qué tablas específicas se aplican los ajustes fronterizos, establecer un atributo de clase. En el siguiente ejemplo, el atributo de clase asignado es de muestra:

clase de tabla = muestra

Escriba table.sample sin las comillas en la línea en blanco entre las etiquetas! ----. Ir a la siguiente línea. Escriba la izquierda rizado soporte ({), pase una línea y escriba el rizado corchete de cierre (}). Esto le indica al navegador que cualquier propiedad que escribe dentro de los paréntesis se aplican a los elementos de la tabla con la muestra nombre de la clase en este documento. Se debe tener este aspecto:

estilo type = text / css - table.sample {

} - / Estilo

Escriba la propiedad border en la línea en blanco entre las llaves. Para aplicar los valores de toda la tabla, frontera tipo. Para aplicar los valores a 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 (:).

Establezca las tres propiedades de borde (ancho, estilo y color). El ancho se establece en píxeles (px). Están salpicadas Las opciones de estilo disponibles, discontinua, sólido, doble, groove, ridge, inserción y principio. Ajuste el color mediante un nombre (negro), RGB (rgb (0,0,0)), o el valor hexadecimal (# 000000). El ancho del borde, el estilo y el color (en ese orden), todos deben estar presentes para que la frontera que aparece en la página. Para ver el detalle de los diversos estilos, utilice un ajuste mínimo de 5px para el ancho.

En el ejemplo que sigue, los ajustes se aplican a 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. Se debe tener este aspecto:

Tipo style = text / css - table.sample {border: 5px negro sólido;} - / estilo

Consejos y advertencias

Los atributos se utilizan en HTML para modificar los elementos HTML. En este caso, el elemento de HTML es la mesa - comenzando con la tabla. La clase es un atributo HTML. Hay más de 10 atributos para el elemento de la tabla. Controlan muchos entornos, incluyendo cellpadding, cellspacing, bgcolor y el ancho del borde. CSS configuración anular atributos HTML.

Los selectores (table.sample), las propiedades y los valores están en diferentes líneas en el ejemplo citado por sólo claridad. Usted puede poner todos los elementos en una sola línea, como en este ejemplo:

Tipo style = text / css

! -

table.sample {border: 1px solid verde; border-left: trazos # 550000; border-right: puntos # 007700;}

-

/ Estilo

CSS configuraciones reemplazan la configuración del HTML.