Si estás pensando cómo diseñar tablas HTML con borde y si ya has hecho el ejemplo de Crear una tabla con HTML habrás visto que el resultado de tu código no es parecido al esperado y que no hay ninguna línea que delimite la tabla.
Buscando documentación por Internet sobre cómo poner un borde a una tabla en HTML verás que se habla del atributo border. Si bien, el atributo border ya no se encuentra dentro de la especificación HTML y su uso no es aconsejado.
Lo que tenemos que hacer es añadir un estilo CSS a nuestra página web para lograr un diseño moderno y adaptable.
El Atributo `border` en HTML (Método Antiguo y Desaconsejado)
Históricamente, para añadir un borde a una tabla, se incluía en la etiqueta <table> el atributo border. Se indicaba un número en píxeles para el grosor del borde, por ejemplo, al usar border="2" o border="8", el borde se hacía visible y más grande respectivamente.
Además, se podían aplicar espaciados a este borde con el atributo cellspacing, indicando también un valor en píxeles de espaciado, por ejemplo, cellspacing="10". De esta forma, se podía personalizar y estilizar la tabla con dos simples atributos aplicados directamente en la etiqueta <table>. Sin embargo, este método ha sido superado por las capacidades de CSS.
Lea también: IVA 21% Excel
Declaración de Bordes con CSS: La Propiedad `border`
El border CSS es una herramienta fundamental para definir los bordes de los elementos en una página web. Si te preguntas cómo modificar bordes en CSS o simplemente qué es el border en CSS, estás en el lugar correcto. Es una propiedad que te permite definir los bordes de los elementos HTML, y es el método recomendado para controlar el diseño de los bordes.
Sintaxis Básica de la Propiedad `border`
Puedes utilizar la propiedad border para especificar el grosor, el estilo y el color del borde de un elemento en una sola declaración. La propiedad que nos permite crear el borde es border, y los parámetros que le ponemos son el grosor del borde, el tipo de línea y el color.
La sintaxis básica del border CSS es simple:
border: [ancho] [estilo] [color];
Por ejemplo, para aplicar un borde de 2 píxeles de grosor, estilo sólido y color negro a un elemento con una de las clases en CSS llamada .element, se utilizaría:
Lea también: Guía IVA reducido
.element {
border: 2px solid black;
}
Para aplicar un estilo referente a las tablas, podríamos usar:
table, td { ... }
Propiedades Individuales y Abreviadas del Borde
El border CSS es una propiedad abreviada que incluye las propiedades constitutivas de border-width, border-style y border-color.
Además de la propiedad border, puedes utilizar propiedades específicas para cada borde, como border-top, border-right, border-bottom y border-left. Esto te permite aplicar estilos diferentes a cada borde de un elemento, lo que puede ser útil para crear diseños más complejos y personalizados.
Lea también: ¿Cómo localizar tus XML del SAT?
- Las propiedades compuestas border-top, border-right, border-bottom y border-left permiten establecer de forma independiente los cuatro bordes (arriba, derecha, abajo e izquierda, respectivamente) de un elemento, definiendo su color, su grosor y su estilo. Se pueden escribir las tres características de cada borde en cualquier orden.
- Las propiedades border-color, border-width y border-style permiten establecer, respectivamente, el color, el grosor y el estilo de los cuatro bordes de un elemento.
- La propiedad border-style en CSS es crucial para definir el estilo de línea de los bordes de un elemento.
En general, para que el navegador muestre un borde, se tendrían que definir las tres propiedades (color, grosor y estilo). Sin embargo, en realidad se puede comprobar que con sólo definir el estilo ya se muestra un borde negro. Los valores se pueden expresar como distancias o como porcentajes.
El border CSS es una herramienta versátil que se utiliza en una amplia variedad de casos. Ya sabes que en HTML es posible estilizar y personalizar casi cualquier cosa con CSS, y esto lo puedes aplicar desde hojas de estilo, declarando cada una de las etiquetas de la tabla y aplicándole sus propios estilos o directamente en el HTML mediante estilos en línea.