Buscar..
Sintaxis
- diseño de la mesa: auto | fijo;
- colapso de la frontera: separado | colapso;
- espacio entre bordes: <length> | <length> <length>;
- células vacías: mostrar | esconder;
- lado del título: arriba | fondo;
Observaciones
Estas propiedades se aplican tanto a los elementos <table> (*) como a los elementos HTML mostrados como display: table o display: inline-table
(*) Los elementos <table> están obviamente diseñados de forma nativa por UA / browsers como display: table
Las tablas HTML son semánticamente válidas para datos tabulares. No se recomienda utilizar tablas para el diseño. En su lugar, utiliza CSS.
diseño de la mesa
La propiedad de table-layout cambia el algoritmo que se usa para el diseño de una tabla.
Debajo de un ejemplo de dos tablas, ambas configuradas al width: 150px :
La tabla de la izquierda tiene table-layout: auto mientras que la de la derecha tiene table-layout: fixed . El primero es más ancho que el ancho especificado (210px en lugar de 150px) pero el contenido se ajusta. Este último toma el ancho definido de 150 px, independientemente de si el contenido se desborda o no.
| Valor | Descripción |
|---|---|
| auto | Este es el valor predeterminado. Define el diseño de la tabla que se determinará por el contenido de sus celdas. |
| fijo | Este valor establece el diseño de la tabla que se determina por la propiedad de ancho proporcionada a la tabla. Si el contenido de una celda excede este ancho, la celda no cambiará de tamaño, sino que dejará que el contenido se desborde. |
colapso de la frontera
La propiedad border-collapse determina si los bordes de las tablas deben separarse o fusionarse.
Debajo de un ejemplo de dos tablas con valores diferentes a la propiedad border-collapse :
La tabla de la izquierda tiene border-collapse: separate mientras que la de la derecha tiene border-collapse: collapse .
| Valor | Descripción |
|---|---|
| separar | Este es el valor predeterminado. Hace que los bordes de la mesa se separen entre sí. |
| colapso | Este valor establece que los bordes de la tabla se fusionen, en lugar de ser distintos. |
espaciado de la frontera
La propiedad de espacio entre border-spacing determina el espacio entre celdas. Esto no tiene ningún efecto a menos que border-collapse se establezca en separate .
Debajo de un ejemplo de dos tablas con valores diferentes a la propiedad de border-spacing :
La tabla de la izquierda tiene border-spacing: 2px (predeterminado), mientras que la de la derecha tiene border-spacing: 8px .
| Valor | Descripción |
|---|---|
| <length> | Este es el comportamiento predeterminado, aunque el valor exacto puede variar entre los navegadores. |
| <length> <length> | Esta sintaxis permite especificar valores horizontales y verticales separados respectivamente. |
celdas vacías
La propiedad de las empty-cells determina si se deben mostrar o no las celdas sin contenido. Esto no tiene ningún efecto a menos que border-collapse se establezca en separate .
Debajo de un ejemplo con dos tablas con diferentes valores establecidos en la propiedad de empty-cells :
La tabla de la izquierda tiene empty-cells: show mientras que la de la derecha tiene empty-cells: hide . El primero muestra las celdas vacías mientras que el segundo no lo hace.
| Valor | Descripción |
|---|---|
| espectáculo | Este es el valor predeterminado. Muestra celdas aunque estén vacías. |
| esconder | Este valor oculta una celda por completo si no hay contenidos en la celda. |
Más información:
- https://www.w3.org/TR/CSS21/tables.html#empty-cells
- https://developer.mozilla.org/en-US/docs/Web/CSS/empty-cells
- http://codepen.io/SitePoint/pen/yfhtq
- https://css-tricks.com/almanac/properties/e/empty-cells/
lado del título
La propiedad del caption-side determina la posición vertical del elemento <caption> dentro de una tabla. Esto no tiene efecto si tal elemento no existe.
Debajo de un ejemplo con dos tablas con diferentes valores establecidos en la propiedad del caption-side del caption-side :
La tabla de la izquierda tiene caption-side: top mientras que la de la derecha tiene caption-side: bottom .
| Valor | Descripción |
|---|---|
| parte superior | Este es el valor predeterminado. Coloca la leyenda sobre la mesa. |
| fondo | Este valor coloca el título debajo de la tabla. |