Tablas de CSS (Tablas)

Las tablas se utilizan generalmente para mostrar datos en tablas.

Con hojas de estilo CSS

Cuando construye tablas sin estilo o atributosAl construir tablas sin estilo o atributosAl mostrar tablas HTML sin estilo o atributos, el navegador las mostrará sin bordes. Estilizar las tablas con CSS puede mejorar enormemente su apariencia.

Las siguientes secciones le mostrarán cómo usar CSS para controlar el diseño y la representación de los elementos de la tabla para crear tablas elegantes y consistentes.

Agregar bordes a la tabla

CSS borderEs el mejor método para definir el borde de la tabla

El siguiente ejemplo establecerá un borde negro<table>，<th>y<td>elemento.

table,　th,　td　{
　　　　border:　1px solid black;
}

Colapsar los bordes de la tabla

Si ve la salida del ejemplo anterior, notará que cada celda de la tabla tiene un borde separado y hay un espacio entre los bordes de las celdas adyacentes. Esto ocurre porque, por defecto, los bordes de las celdas de la tabla están separados. Pero puede usar el elementoborder-collapseLa propiedad aplicada en el atributo se utiliza mejor para definir el borde de la tabla

En el siguiente ejemplo, las reglas de estilo colapsarán los bordes de las celdas de la tabla y aplicarán un borde negro de un píxel a los elementos de la tabla y las celdas.

table {
　　　　border-collapse: collapse;
}
table,　th,　td　{
　　　　border:　1px solid black;
}

También puede usar el valor de CSS para eliminar el espacio entre los bordes de las celdas de la tablaborder-spacingLa propiedad es 0. Sin embargo, solo elimina el espacio, sin fusionar como cuando configura el borde border-collapse para colapsar.

Ajustar el espacio interno de la tabla

Por defecto, las celdas de tabla creadas por el navegador son exactamente lo suficientes para contener los datos de la celda. Para agregar más espacio alrededor del contenido de la celda de la tabla, se puede usar la propiedad CSS padding, como se muestra a continuación:

th,　td　{
　　　　padding:　15px;
}

border-spacingSi los bordes de la tabla están separados (configuración predeterminada), también se puede usar la propiedad CSS para ajustar el espacio entre los bordes de las celdas.

Las siguientes reglas de estilo se aplican entre todos los bordes de la tabla10Espacio entre píxeles:

table {
　　　　border-spacing:　10px;
}

Controlar el diseño de la tabla

Por defecto, la tabla se expande y contrae para adaptarse a los datos que contiene. Cuando los datos se llenan en la tabla, siempre que haya espacio, los datos continuarán expandiéndose. Sin embargo, a veces es necesario establecer un ancho fijo para la tabla para gestionar el diseño.

Puede utilizar la propiedad layout de CSS para lograr esto. Esta propiedad define el algoritmo utilizado para disponer las celdas, filas y columnas de la tabla. Esta propiedad toma uno de dos valores:-propiedad layout para realizar esta operación. Esta propiedad define el algoritmo utilizado para disponer las celdas, filas y columnas de la tabla. Esta propiedad toma uno de dos valores:

• auto —Se utiliza el algoritmo de disposición de tabla automática. Con este algoritmo, se puede ajustar el ancho de la tabla y de las celdas para adaptarse al contenido. Este es el valor predeterminado.

• fixed -Se utiliza un algoritmo de disposición de tabla fija. Con este algoritmo, la disposición horizontal de la tabla no depende del contenido de las celdas; solo depende del ancho de la tabla, del ancho de las columnas y del espaciado de los bordes o celdas.

En el siguiente ejemplo, las reglas de estilo indican que la tabla se está utilizando un algoritmo de disposición fija y tiene300px de ancho fijo.

table {
　　　　width:　300px;
　　　　table-layout: fixed;
}

sin la propiedad table-El valor fijo de la propiedad layout, en tablas grandes, el usuario no verá ninguna parte de la tabla hasta que el navegador presente toda la tabla.

maneja las celdas vacías

El empty-La propiedad cellsCSS controla los bordes y tiene un fondo de celda renderizado separado cuando no hay contenido claro en la tabla.

Esta propiedad puede tomar uno de tres valores: show, hide o inherit.

Las siguientes reglas de estilo ocultan las celdas vacías en el elemento table.

table {
　　　　border-collapse: separate;
　　　　empty-cells: hide;
}

controla la posición del título de la tabla

El caption-sideCSS para establecer la posición vertical del cuadro de título de la tabla.

Las siguientes reglas de estilo colocan el título de la tabla debajo de su tabla padre. Sin embargo, para cambiar la alineación horizontal del texto del subtítulo, se puede usar la propiedadtext-alignPropiedades.

caption {
　　　　caption-side: bottom;
}