24. Bordes de una tabla

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;
}