Explicación detallada del uso real del diseño de la tabla HTML

¿Cuándo se usará la tabla?

Ahora, las tablas <able> generalmente ya no se usan para el diseño general de las páginas web. Sin embargo, cuando se enfrentan a ciertos diseños específicos, como la entrada de formulario y la presentación de datos, los formularios pueden ser la opción más apropiada.

La impresión intuitiva de una tabla es que los elementos están perfectamente dispuestos por múltiples celdas, lo que puede ver claramente filas y columnas. Esto puede asociarse con Excel. Desde la posición de Excel en el procesamiento de datos y las estadísticas, podemos comprender la importancia de las tablas en las páginas web.

En pocas palabras, cuando puede sentir intuitivamente que se organizan múltiples elementos en el concepto de filas y columnas, el uso de tablas lo hará mucho más fácil. Por ejemplo, el formulario de solicitud en Caniuse.com:

Usar una mesa es simple, pero a veces la tabla termina con cada cuadrícula, que puede no ser lo que desea. Por ejemplo, si algunas cuadrículas tienen rupturas de línea, entonces toda la mesa se ve muy desagradable porque la línea se rompe. Especialmente para las tablas utilizadas para la presentación de datos, la asignación de ancho es un tema muy importante. Es posible que deba calcular cuidadosamente el ancho total de la tabla para los datos que pueden presentarse en cada columna de cuadrículas.

Esto se debe a que una tabla tiene sus propias características en el diseño, y seguirá ciertos principios y determinará su diseño real a través de los cálculos. A continuación, este artículo utiliza ejemplos de pruebas de tabla reales para explorar cómo las tablas calculan su propio diseño.

Este artículo solo se centra en los métodos más comunes para aplicar tablas y no enumera todos los casos. Los diferentes navegadores tienen diferentes análisis de algunos conceptos de tablas, pero los cálculos de diseño son básicamente consistentes (si hay diferencias, se mencionarán por separado).

Los siguientes formularios de prueba se presentarán de esta manera (el contenido se toma de la trayectoria de cero):

Al mismo tiempo, la tabla establecerá el colapso del borde: colapso; y espacio fronterizo: 0;. Esta es también la práctica más común para aplicar tablas, y normalizar.css usa esta parte como la definición de inicialización.

La capa de tabla del atributo CSS definida en el elemento <able> determinará el algoritmo aplicado a la tabla durante el cálculo del diseño. Tiene dos valores, automáticos y fijos. En casos normales, se usa el valor predeterminado automático.

La diferencia entre estos dos algoritmos es si el diseño de ancho de la tabla está relacionado con el contenido de datos en la tabla. Este artículo discutirá el principio del cálculo del diseño de las tablas al tomar estos dos valores.

Diseño automático de la mesa -auto

La característica del diseño automático de la tabla es que el diseño de ancho de la tabla está relacionado con todo el contenido de datos en la tabla. Debe obtener todo el contenido de la tabla antes de que se pueda determinar el diseño de ancho final y luego mostrarse juntos.

De esta manera, el punto clave es que el contenido es relevante. ¿Qué pasa si la tabla define un ancho fijo (500px aquí) y todas las celdas no definen el ancho (solo discutiendo CSS definen anchos), ¿qué sucede? Ver los resultados:

En la tabla anterior, la parte en blanco está escrita con & nbsp; espacios. Después de la comparación, podemos encontrar los siguientes puntos:

Las columnas segunda y tercera tienen el mismo ancho.

El ancho de la columna 1 y la relación de ancho de cualquier columna que lo siga parece ser 2: 1.

Agregue el borde y los márgenes internos, y los anchos de todas las columnas se suman, igual al ancho definido por la tabla.

No hay un ancho definido en cada celda, por lo que el diseño de ancho está completamente determinado por los datos de contenido específicos (información de texto). ¿Cómo explicar tal resultado? Primero puede inferir intuitivamente dicha lógica:

Paso 1: Seleccione el texto con la mayor cantidad de contenido de texto de cada columna (comprenda que si el texto no envuelve la línea, el texto ocupa el ancho más ancho) como representante.

Paso 2: Compare los anchos de los representantes de cada columna y asignarles el ancho total de la tabla, incluidos las fronteras y los márgenes internos de acuerdo con su relación proporcional.

Refiriéndose a la lógica anterior, y luego mirando la tabla anterior, ¿hay alguna razón? Tenga en cuenta que la relación de ancho mencionada anteriormente parece ser 2: 1, ¿será esto? Echemos un vistazo a la versión que elimina los márgenes internos:

Use la herramienta de depuración front-end para ver el ancho de las celdas anteriores, y encontrará que esta tabla es diferente de antes, y la relación está muy cerca de 2: 1 (sí, también hay un pequeño punto debido al borde, pero sin el borde, no puede distinguir las columnas).

Se puede ver que al analizar la relación proporcional de ancho, el ancho de contenido, el margen interno y el borde se tendrán en cuenta. Esto también muestra que no es una medida de la cantidad de palabras, sino una medida del ancho que las palabras pueden ocupar en el estado de no se rompe (el 2: 1 aquí proviene del hecho de que los caracteres chinos son iguales en ancho). Use los márgenes internos naturalmente solo para hacer una mesa más hermosa :).

¿Qué sucede cuando hay una definición de ancho? Aquí hay una tabla con un ancho definido en parte de las celdas:

Su código HTML correspondiente es: