- Border, border-collapse
- border-spacing
- caption-side
- empty-cells
- table-layout
<style>
table {
border: 10px solid #690
}
</style>
entonces estamos seleccionando solo la tabla, la salida será:
pero si seleccionamos
<style>
table,th,td {
border: 3px solid #690
}
</style>
la salida será:
Podemos observar un detalle, Por que los bordes dobles o sencillos?
Esto sucede porque por naturaleza los elementos table, th y td poseen separación en sus margenes
border-collapse
Las tablas tienen dos modos de presentación de los bordes que se selecciona con la propiedad border-collapse: separado (separate) y colapsado (collapse). En el modo separado existe un hueco entre los bordes de cada celda, mientras que en el modo colapsado los bordes se superponen. Si no se establece el modo de presentación, los navegadores aplican el modo separado.
<style>
table, td, th {
border: 1px solid black;
border-collapse:collapse
}
</style>
y la salida será:
Tambien tenemos la propiedad
border-spacing
Establece la separación entre los bordes de las celdas adyacentes de una tabla
Es una propiedad que permite colocar el elemento caption(el titulo de la tabla) en una posición concreta. Los valores permitidos son top, right, left, bottom y hacen que el título establecido en caption se coloque en el lugar especificado.
empty-cells
Especifica si desea o no mostrar bordes y fondo en celdas vacías en una tabla
