Día 48: CSS Table Borders
La ruta del desarrollador web frontend autónomo🤹♂️
El aspecto de una tabla HTML se puede mejorar con CSS.
Bordes de la tabla
Para especificar los bordes de la tabla en CSS, use la propiedad border.
El siguiente ejemplo especifica un borde sólido para los elementos <table>, <th> y <td>:
Ejemplo:
Ancho completo de la tabla
La tabla anterior puede parecer pequeña en algunos casos. Si necesita una tabla que abarque toda la pantalla (ancho completo), agregue width: 100% al elemento <tabla>:
Ejemplo:
Bordes dobles
Observe que la tabla de los ejemplos anteriores tienen 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.
Colapsar bordes de la tabla
La propiedad border-collapse establece si los bordes de la tabla deben colapsarse en un solo borde:
Ejemplo:
Si solo quieres un borde alrededor de la tabla, solo especifique la propiedad border para <table>:
Resumen
Para mejorar el aspecto de una tabla HTML con CSS, se puede usar la propiedad border. Para especificar un borde sólido, se puede aplicar esta propiedad a los elementos <table>, <th> y <td>. Si se desea una tabla que abarque toda la pantalla, se puede agregar width: 100% al elemento <table>. Para eliminar los bordes dobles, se puede usar la propiedad border-collapse. Si se desea solo un borde alrededor de la tabla, se debe especificar la propiedad border solo para <table>.
Traducido con 💚 desde W3Schools.com