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 border
propiedad CSS en los
elementos table
, th
y
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-radius
propiedad, los bordes obtienen esquinas redondeadas:
Ejemplo
table, th, td {
border: 1px solid
black;
border-radius: 10px;
}
Omita el borde alrededor de la tabla table
omitiendo del selector css:
Ejemplo
th, td {
border: 1px solid
black;
border-radius: 10px;
}
Bordes de tabla punteados
Con la border-style
propiedad, puede establecer la apariencia del borde.
Se permiten los siguientes valores:
dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden
Ejemplo
th, td {
border-style: dotted;
}
Color del borde
Con la border-color
propiedad, puede establecer el color del borde.
Ejemplo
th, td {
border-color: #96D4D4;
}