Las tablas HTML pueden tener bordes de diferentes formas y estilos.
Añadir un borde
Cuando quieres añadir un borde a una tabla, puedes además añadir bordes a cada celda de la tabla. Para ello se utiliza la propiedad CSS border en table, th o td.
Ejm
table, th, td {
border: 1px solid black;
}
Bordes de tabla contraidos
Para evitar tener bordes dobles como en el ejemplo anterior, configura la propiedad CSS border-collapse para colapsar. Esto hará que los bordes colapsen en un solo borde.
Ejm
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Estilo de los bordes de una tabla
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.
Ejm
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
Bordes redondeados
Con la propiedad border-radius, los bordes obtienen esquinas redondeadas.
Ejm
table, th, td {
border: 1px solid black;
border-radius: 10px;
}
Omite el borde alrededor de la tabla omitiendo la tabla del selector css.
Ejm
th, td {
border: 1px solid black;
border-radius: 10px;
}
Bordes de tabla punteados
Con la propiedad border-style puedes cambiar la apariencia del borde.
Ejm
th, td {
border-style: dotted;
}
Color de borde
Con la propiedad border-color, puede establecer el color del borde.
Ejm
th, td {
border-color: #96D4D4;
}