Tablas CSS
El aspecto de una tabla HTML se puede mejorar mucho con CSS:
| Compañía | Contacto | País |
|---|---|---|
| Caja de alimentación de Alfred | María Anders | Alemania |
| supermercado de berglund | Cristina Berglund | Suecia |
| Centro comercial Moctezuma | francisco chang | México |
| comercio serio | roland mendel | Austria |
| Comercio de la isla | helen bennett | Reino Unido |
| comida real | Felipe Cramer | Alemania |
| Laughing Bacchus Winecellars | yoshi tannamuri | Canadá |
| Almacenes de alimentos reunidos | giovanni rodelli | Italia |
Bordes de la tabla
Para especificar los bordes de la tabla en CSS, use la borderpropiedad.
El siguiente ejemplo especifica un borde negro para los elementos <table>, <th> y <td>:
Ejemplo
table, th, td {
border: 1px solid black;
}
Mesa de ancho completo
La tabla anterior puede parecer pequeña en algunos casos. Si necesita una tabla que abarque toda la pantalla (ancho completo), agréguela width: 100%al elemento <table>:
Ejemplo
table {
width: 100%;
}
bordes dobles
Observe que la tabla de los ejemplos anteriores tiene bordes dobles. Esto se debe a que tanto la tabla como los elementos <th> y <td> tienen bordes separados.
Para eliminar los bordes dobles, eche un vistazo al siguiente ejemplo.
Contraer bordes de tabla
La border-collapsepropiedad establece si los bordes de la tabla deben contraerse en un solo borde:
Ejemplo
table
{
border-collapse: collapse;
}
Si solo desea un borde alrededor de la tabla, solo especifique la borderpropiedad para <tabla>:
Ejemplo
table
{
border: 1px solid black;
}