Bordes de tablas HTML
Las tablas HTML pueden tener bordes de diferentes estilos y formas.
Cómo agregar un borde
Cuando agrega un borde a una tabla, también agrega bordes alrededor de cada celda de la tabla:
Para agregar un borde, use la borderpropiedad CSS en los
elementos table, thy
td:
Ejemplo
table, th, td
{
border: 1px solid black;
}
Bordes de tabla contraídos
Para evitar tener bordes dobles como en el ejemplo anterior, establezca la border-collapse
propiedad CSS en collapse.
Esto hará que los bordes colapsen en un solo borde:
Ejemplo
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Bordes de la tabla de estilo
Si establece un color de fondo para cada celda y le da al borde un color blanco (el mismo que el fondo del documento), obtendrá la impresión de un borde invisible:
Ejemplo
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
Bordes de mesa redonda
Con la border-radiuspropiedad, los bordes obtienen esquinas redondeadas:
Ejemplo
table, th, td {
border: 1px solid
black;
border-radius: 10px;
}
Omita el borde alrededor de la tabla tableomitiendo del selector css:
Ejemplo
th, td {
border: 1px solid
black;
border-radius: 10px;
}
Bordes de tabla punteados
Con la border-stylepropiedad, puede establecer la apariencia del borde.
Se permiten los siguientes valores:
dotteddashedsoliddoublegrooveridgeinsetoutsetnonehidden
Ejemplo
th, td {
border-style: dotted;
}
Color del borde
Con la border-colorpropiedad, puede establecer el color del borde.
Ejemplo
th, td {
border-color: #96D4D4;
}