Las tablas HTML pueden tener bordes de diferentes estilos y formas.
¿Cómo agregar un borde?
Cuando agregas un borde a una tabla, también agregas bordes alrededor de cada celda de la tabla:
Para agregar un borde, use la propiedad CSS border sobre los elementos table, th, y td.
Ejemplo:
Bordes colapsados
Para evitar tener bordes duplicados como el ejemplo anterior, establezca la propiedad CSS border-collapse a collapse.
Esto hará que los bordes colapsen en un solo borde:
Ejemplo:
Estilos de borde
Si estableces un color de fondo para cada celda y le das al borde un color blanco (el mismo que el fondo del documento), obtendrás la impresión de un borde invisible:
Ejemplo:
Bordes redondeados
Con la propiedad CSS border-radius, los bordes obtienen esquinas redondeadas:
Ejemplo:
/* Bordes*/
table, th, td {
border-radius: 10px;
}
Para quitar el borde alrededor de la tabla, quita el elemento table del selector CSS.
Ejemplo:
/* Quita el elemento table*/
th, td {
border-radius: 10px;
}
Bordes punteados
Con la propiedad CSS border-style, puedes establecer la apariencia del borde de una tabla.
Los siguientes valores están permitidos:
dotteddashedsoliddoublegrooveridgeinsetoutsetnonehidden
Ejemplo:
Bordes de color
Con la propiedad border-color, puedes establecer el color del borde.
Ejemplo:
Resumen
En HTML puedes personalizar las tablas a las necesidades de la página web. Las tablas HTML pueden tener bordes de diferentes estilos y formas.
Traducido con 💚 desde W3Schools.com