Si queremos comprender mejor las tablas receptivas, primero debemos saber qu\u00e9 significa cuando decimos que un dise\u00f1o es receptivo.<\/p>\n
El dise\u00f1o receptivo es el dise\u00f1o que es ajustable a las pantallas de diferentes tama\u00f1os. Cuando hablamos de una imagen o tabla HTML, se trata de lo que sucede cuando la pantalla es m\u00e1s estrecha que el ancho m\u00ednimo de una tabla de datos.<\/p>\n
Tablas receptivas como parte de un dise\u00f1o receptivo<\/strong><\/h3>\nHacer que las tablas respondan ha sido todo un desaf\u00edo desde la introducci\u00f3n del dise\u00f1o web receptivo<\/a>.<\/p>\nLas tablas de datos suelen ser bastante amplias y, a menudo, es necesario mantener una sola fila de datos si queremos que realmente tenga sentido. Por supuesto, las mesas pueden flexionarse en ancho, pero \u00bfes esa realmente una soluci\u00f3n? Bueno, puede ser hasta el punto en que comiencen a envolver el contenido de las celdas de una manera que no queremos que lo hagan. Tambi\u00e9n hay un punto en el que simplemente no pueden ir m\u00e1s estrechos.<\/p>\n
Por suerte, hay 3 patrones que nos pueden ayudar a solucionar este problema:<\/p>\n
\n- \n
El desbordamiento horizontal<\/strong><\/h3>\n<\/li>\n<\/ol>\nLa tabla de desbordamiento horizontal en HTML se puede ver f\u00e1cilmente en su totalidad simplemente desplaz\u00e1ndose hacia la derecha y hacia la izquierda. El primer campo suele ser fijo y los dem\u00e1s se vuelven visibles a medida que el usuario se desplaza por el contenido.<\/p>\n
Sin embargo, hay un inconveniente. Es posible que el usuario no sepa o no note que la tabla es desplazable. Si eso sucede, existe la posibilidad de que se pierdan la mayor parte de la mesa. Para evitar la posibilidad de que el usuario no vea el contenido m\u00e1s importante, los campos clave deben estar en las primeras 3 columnas.<\/p>\n
\n- \n
Las tablas de transici\u00f3n<\/strong><\/h3>\n<\/li>\n<\/ol>\nUna tabla CSS de transici\u00f3n es una buena soluci\u00f3n si desea evitar el desplazamiento, que es la parte necesaria para ver las tablas de desbordamiento horizontales.<\/p>\n
Lo que sucede con esta tabla es que los t\u00edtulos de los campos est\u00e1n formateados en puntos de interrupci\u00f3n de CSS inferiores a un formato de fila en lugar de una estructura de columna.<\/p>\n
Desafortunadamente, tambi\u00e9n hay un inconveniente. Una tabla de transici\u00f3n CSS disminuye la capacidad de escaneado y la comparaci\u00f3n de campos.<\/p>\n
\n- \n
Las tablas de prioridades<\/strong><\/h3>\n<\/li>\n<\/ol>\nLas tablas de prioridad simplemente ocultan campos en tama\u00f1os de pantalla inferiores. Las tablas formateadas de esta manera suelen verse hermosas, pero los problemas ocurren si los campos omitidos son, de hecho, los m\u00e1s importantes.<\/p>\n
Enfoques de tablas receptivas<\/strong><\/h3>\nHay varias formas de hacer tablas receptivas.<\/p>\n
\n- Squash<\/strong>: puede aplastar la tabla HTML horizontalmente moviendo el borde de la tabla HTML si no hay mucho contenido en las columnas. Al hacer esto, puede evitar cambiar todo el dise\u00f1o de su mesa.<\/li>\n
- Desplazamiento vertical<\/strong>: si desea evitar cambiar el contenido y\/o el dise\u00f1o de su tabla, los usuarios pueden desplazarse hacia la izquierda y hacia la derecha para ver la tabla completa.<\/li>\n
- Contraer por filas<\/strong>: puede convertir su tabla en varias tablas m\u00e1s peque\u00f1as dividiendo cada fila en su propia columna.<\/li>\n
- \n
Contraer por columnas<\/strong>: necesita aprender HTML para hacer esto porque esta parte es un poco complicada. En las tablas de estilo CSS, el orden del c\u00f3digo es por filas de tabla y
\ncontenedores bloqueados. Si desea colapsar su tabla por columnas, debe manipular con JavaScript o cambiar el marcado.<\/p>\nCosas a evitar al crear una tabla receptiva<\/strong><\/h3>\nLas personas han probado muchos m\u00e9todos diferentes para crear tablas receptivas y aqu\u00ed hay algunos que no son particularmente efectivos. Probablemente deber\u00edas evitarlos por completo.<\/p>\n
\n- \n
\n- Usando JavaScript para generar una segunda tabla m\u00e1s estrecha, luego ocultar y mostrar alternativamente por punto de interrupci\u00f3n. Este m\u00e9todo dividir\u00e1 las ID \u00fanicas en las tablas.<\/li>\n
- Uso de JavaScript y el marcado normal de la tabla en una ruptura para reorganizar la tabla. Las tablas horizontales y verticales requieren marcas diferentes, mientras que este m\u00e9todo tambi\u00e9n requiere la manipulaci\u00f3n de DOM y muchos detectores de eventos JS.<\/li>\n
- Mantener el marcado de la tabla y cambiar a display:flex para el contenido de la tabla alineado verticalmente.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n
NOTA: Si todo lo anterior suena demasiado complicado como para intentarlo, no se desanime. Hay formas m\u00e1s sencillas de crear tablas receptivas. Puede visitar w3schools.com para obtener m\u00e1s consejos \u00fatiles (w3schools HTML ofrece una variedad de explicaciones de ayuda HTML para los creadores de sitios web). As\u00ed que echemos un vistazo a algunas de las herramientas que pueden resultarle \u00fatiles.<\/p>\n
C\u00f3mo crear tablas receptivas<\/strong><\/h2>\npara WordPress<\/h3>\nwpDataTables<\/a><\/h4>\n
Las tablas de datos suelen ser bastante amplias y, a menudo, es necesario mantener una sola fila de datos si queremos que realmente tenga sentido. Por supuesto, las mesas pueden flexionarse en ancho, pero \u00bfes esa realmente una soluci\u00f3n? Bueno, puede ser hasta el punto en que comiencen a envolver el contenido de las celdas de una manera que no queremos que lo hagan. Tambi\u00e9n hay un punto en el que simplemente no pueden ir m\u00e1s estrechos.<\/p>\n
Por suerte, hay 3 patrones que nos pueden ayudar a solucionar este problema:<\/p>\n
- \n
- \n
El desbordamiento horizontal<\/strong><\/h3>\n<\/li>\n<\/ol>\n
La tabla de desbordamiento horizontal en HTML se puede ver f\u00e1cilmente en su totalidad simplemente desplaz\u00e1ndose hacia la derecha y hacia la izquierda. El primer campo suele ser fijo y los dem\u00e1s se vuelven visibles a medida que el usuario se desplaza por el contenido.<\/p>\n
Sin embargo, hay un inconveniente. Es posible que el usuario no sepa o no note que la tabla es desplazable. Si eso sucede, existe la posibilidad de que se pierdan la mayor parte de la mesa. Para evitar la posibilidad de que el usuario no vea el contenido m\u00e1s importante, los campos clave deben estar en las primeras 3 columnas.<\/p>\n
- \n
- \n
Las tablas de transici\u00f3n<\/strong><\/h3>\n<\/li>\n<\/ol>\n
Una tabla CSS de transici\u00f3n es una buena soluci\u00f3n si desea evitar el desplazamiento, que es la parte necesaria para ver las tablas de desbordamiento horizontales.<\/p>\n
Lo que sucede con esta tabla es que los t\u00edtulos de los campos est\u00e1n formateados en puntos de interrupci\u00f3n de CSS inferiores a un formato de fila en lugar de una estructura de columna.<\/p>\n
Desafortunadamente, tambi\u00e9n hay un inconveniente. Una tabla de transici\u00f3n CSS disminuye la capacidad de escaneado y la comparaci\u00f3n de campos.<\/p>\n
- \n
- \n
Las tablas de prioridades<\/strong><\/h3>\n<\/li>\n<\/ol>\n
Las tablas de prioridad simplemente ocultan campos en tama\u00f1os de pantalla inferiores. Las tablas formateadas de esta manera suelen verse hermosas, pero los problemas ocurren si los campos omitidos son, de hecho, los m\u00e1s importantes.<\/p>\n
Enfoques de tablas receptivas<\/strong><\/h3>\n
Hay varias formas de hacer tablas receptivas.<\/p>\n
- \n
- Squash<\/strong>: puede aplastar la tabla HTML horizontalmente moviendo el borde de la tabla HTML si no hay mucho contenido en las columnas. Al hacer esto, puede evitar cambiar todo el dise\u00f1o de su mesa.<\/li>\n
- Desplazamiento vertical<\/strong>: si desea evitar cambiar el contenido y\/o el dise\u00f1o de su tabla, los usuarios pueden desplazarse hacia la izquierda y hacia la derecha para ver la tabla completa.<\/li>\n
- Contraer por filas<\/strong>: puede convertir su tabla en varias tablas m\u00e1s peque\u00f1as dividiendo cada fila en su propia columna.<\/li>\n
- \n
Contraer por columnas<\/strong>: necesita aprender HTML para hacer esto porque esta parte es un poco complicada. En las tablas de estilo CSS, el orden del c\u00f3digo es por filas de tabla y
\ncontenedores bloqueados. Si desea colapsar su tabla por columnas, debe manipular con JavaScript o cambiar el marcado.<\/p>\nCosas a evitar al crear una tabla receptiva<\/strong><\/h3>\n
Las personas han probado muchos m\u00e9todos diferentes para crear tablas receptivas y aqu\u00ed hay algunos que no son particularmente efectivos. Probablemente deber\u00edas evitarlos por completo.<\/p>\n
- \n
- \n
- \n
- Usando JavaScript para generar una segunda tabla m\u00e1s estrecha, luego ocultar y mostrar alternativamente por punto de interrupci\u00f3n. Este m\u00e9todo dividir\u00e1 las ID \u00fanicas en las tablas.<\/li>\n
- Uso de JavaScript y el marcado normal de la tabla en una ruptura para reorganizar la tabla. Las tablas horizontales y verticales requieren marcas diferentes, mientras que este m\u00e9todo tambi\u00e9n requiere la manipulaci\u00f3n de DOM y muchos detectores de eventos JS.<\/li>\n
- Mantener el marcado de la tabla y cambiar a display:flex para el contenido de la tabla alineado verticalmente.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n
NOTA: Si todo lo anterior suena demasiado complicado como para intentarlo, no se desanime. Hay formas m\u00e1s sencillas de crear tablas receptivas. Puede visitar w3schools.com para obtener m\u00e1s consejos \u00fatiles (w3schools HTML ofrece una variedad de explicaciones de ayuda HTML para los creadores de sitios web). As\u00ed que echemos un vistazo a algunas de las herramientas que pueden resultarle \u00fatiles.<\/p>\n
C\u00f3mo crear tablas receptivas<\/strong><\/h2>\n
para WordPress<\/h3>\n
wpDataTables<\/a><\/h4>\n
- Desplazamiento vertical<\/strong>: si desea evitar cambiar el contenido y\/o el dise\u00f1o de su tabla, los usuarios pueden desplazarse hacia la izquierda y hacia la derecha para ver la tabla completa.<\/li>\n
- Squash<\/strong>: puede aplastar la tabla HTML horizontalmente moviendo el borde de la tabla HTML si no hay mucho contenido en las columnas. Al hacer esto, puede evitar cambiar todo el dise\u00f1o de su mesa.<\/li>\n
- \n
- \n
![\"Tablas](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-200973-61e8bd6a5ae22.jpg\")
<\/a><\/p>\n