Las tablas HTML, que alguna vez se usaron ampliamente en diseños web, ahora son un problema para muchos diseñadores web. Las tablas a menudo funcionan mejor con anchos fijos, lo que significa que pueden causar estragos en el diseño de sitios web receptivos que, de lo contrario, serían perfectos en píxeles. Entonces, ¿qué se supone que debe hacer WordPresser?
Lo primero que debe hacer con las tablas es usarlas con moderación. Las tablas deben usarse para datos tabulares y nada más.
¿No está seguro de si la tabla es la opción correcta para su conjunto de datos específico? Ejecute una prueba de hoja de cálculo. ¿Tendrían sentido estos datos cuando se presentaran en una hoja de cálculo?
Si es así, la elección correcta es una tabla HTML. Si no, considere usar una lista u otro elemento para representar sus datos.
Una vez que haya identificado la mesa como su mejor opción, ¿entonces qué? Asegúrese de que se vea bien sin importar el tamaño de su dispositivo para ver la tabla. Es mas facil decirlo que hacerlo. ¿verdad?
No tengas miedo. En este tutorial, aprenderá acerca de cinco herramientas diferentes que puede usar para hacer que las tablas HTML respondan maravillosamente.
Continúe leyendo o continúe usando estos enlaces:
Cómo maneja WordPress las tablas
No hay una respuesta clara a esta pregunta. La forma en que se presentan las tablas en WordPress varía según el tema, ya que los estilos de tabla son administrados por el CSS que viene con cada tema.
Entonces, las tablas se representan de acuerdo con las reglas CSS contenidas en el tema activo. Cambie de tema y cambiará la forma en que se representan las tablas.
Algunos temas tienen un mejor soporte integrado para tablas receptivas que otros. Por ejemplo, TwentySixteen puede funcionar bastante bien con las tablas, siempre que solo tengan dos o tres columnas llenas de pequeños bits de datos.
Sin embargo, no todos los temas están diseñados tan minuciosamente como TwentySixteen.
Echemos un vistazo a cómo TwentySixteen maneja una tabla HTML cuando se renderiza en un dispositivo móvil. Aquí hay un fragmento de HTML que creará una tabla con cinco columnas y seis filas.
Muestra los sistemas de gestión de contenidos más populares según W3Techs.
Cuando se carga en una publicación con el tema secundario de TwentySixteen activado, esta tabla se ve muy bien en una computadora portátil o en un monitor de escritorio. Inmediatamente puede ver que TwentySixteen incluye un estilo de mesa bien pensado.
Podemos usar el modo de dispositivo de Chrome Developer Tools para ver cómo se ve todo en un dispositivo más pequeño.
Bueno, no es perfecto.
Los desarrolladores de TwentySixteen han habilitado estilos CSS que hacen que las tablas respondan. Si esta tabla solo tuviera dos o tres columnas, probablemente se vería bastante bien.
Sin embargo, esta tabla tiene cinco columnas, lo que es demasiado para el estilo de tabla predeterminado incluido en TwentySixteen.
Arreglemos esta tabla.
Creación manual de tablas receptivas
La primera opción que veremos es un ajuste manual que incluye agregar CSS y JavaScript al tema. Puede sonar difícil, pero en realidad es bastante simple.
Para que las tablas respondan, necesitamos tres cosas:
- Tabla HTML correctamente formateada.
- Una pequeña pieza de código JavaScript para asociar cada celda de encabezado de tabla con celdas de datos que aparecen en la misma columna de tabla.
- Se activará un conjunto simple de reglas CSS cuando la imagen se reduzca por debajo del ancho especificado. Este fragmento de CSS reordenará las filas de la tabla en columnas, ocultará la fila de celdas de encabezado y agregará el contenido de las celdas de encabezado a cada celda de datos.
Es importante recordar que la tabla tiene que estar correctamente formateado para que funcione.
El script está diseñado para buscar celdas de encabezado en thead elemento y asígnelos como atributos HTML a las celdas de datos wa tbody elemento.
Si crea una tabla que no contiene thead y tbody los elementos del código no funcionarán.
Aquí está el código JavaScript que usaremos:
Aquí está el CSS apropiado.
La forma más fácil de usar este código es agregarlo directamente a la publicación o página donde aparece la tabla. Puede hacer esto colocando CSS en el medio style las etiquetas y el código JavaScript caen entre script Etiquetas.
Si elige hacer esto, asegúrese de minimizar JavaScript antes de incluirlo en su procesador de textos, o la función wpautop agregará saltos de párrafo a su script, rompiéndolo en el proceso.
El resultado es muy bonito por cierto. Así es como se ve la tabla de vista previa en la vista previa de iPhone5 en Google Chrome.
Una mejor forma de hacer mesas.
Agregar CSS y JavaScript directamente a la publicación no es Lo mejor manera de agregar código.
Si solo usa este código una vez, está bien agregarlo directamente a la publicación o página donde aparece la tabla.
Sin embargo, si tiene la intención de usar tablas regularmente, una mejor manera de agregar código es incrustarlo directamente en sus archivos de temas.
Agregar el código directamente al tema no es realmente tan difícil. Puedes hacerlo en solo cuatro pasos.
- Asegúrese de usar un tema secundario primero para evitar perder su trabajo la próxima vez que actualice su tema.
- Segundo, copia y pega CSS en el tema. estilo.css expediente.
- Tercero, guarde el JavaScript como un archivo separado y cárguelo en el directorio de temas.
- Cuarto, usa
wp_enqueue_scriptpara funcionar en tus motivos funciones.php archivo para agregar un recurso de JavaScript a su tema, asegurándose de configurarloin_footera la verdad cuando lo haces.
La parte más difícil del proceso es agregar un archivo de script con wp_enqueue_scriptpero puedo hacer este paso un poco más fácil.
Aquí hay un fragmento de código que puede agregar a funciones.php archivo que agregará un archivo JavaScript al tema, asumiendo que es un archivo JavaScript responsive-tables.js y colóquelo en el directorio del tema principal.
Su funciones.php El archivo puede verse un poco diferente, pero esto le da una idea de cómo debería verse la función de escritura en cola.
Daniel Pataki, autor de WPMU DEV y desarrollador de WordPress, discutió wp_enqueue_script función en detalle en este blog. Por lo tanto, puede consultar este tutorial, como lo hice yo, si tiene problemas con este paso.
Después de completar los cuatro pasos, CSS y JavaScript estarán disponibles en cada página de su sitio web, y todas las tablas de su sitio web responderán.
Muy bueno.
Uso de un complemento para crear una tabla
Por supuesto, es posible que no desee lidiar con todos estos problemas y prefiera simplemente usar un complemento de tabla de WordPress.
Ciertamente, hay muchos complementos de tabla en el directorio de complementos de WordPress, muchos de los cuales afirman que hacen que las tablas respondan.
Para ahorrar tiempo de búsqueda, consulte nuestra publicación sobre cómo elegir el mejor complemento de tabla de WordPress que compara diferentes complementos de tabla receptivos que funcionan bien en la representación de tablas en dispositivos de cualquier tamaño.
¿Cuál opción es correcta para ti?
Bueno, eso depende.
¿Con qué frecuencia utiliza tablas?
¿Qué conjuntos de datos presenta en las tablas HTML?
¿Necesita un complemento que pueda hacer todo el trabajo pesado o desea estar en contacto directo con el código de su sitio web?
La forma en que responda estas preguntas lo ayudará a determinar cuál de estas herramientas es adecuada para su sitio de WordPress.
- ¿Necesita una poderosa herramienta de tablas que pueda usar para crear tablas complejas que se puedan ordenar y buscar? ¿Está lidiando con grandes conjuntos de datos y tablas de ancho fijo que desea desplazar sin comprometer el diseño receptivo de su sitio web? Luego elija uno de los complementos que revisamos en esta publicación.
- ¿Le gusta jugar con el código y desea una solución artesanal que requiera pocos recursos y se vea hermosa? Prueba la implementación manual y adáptala a tus necesidades.
- ¿Estás buscando un botón simple? Eche un vistazo a las tablas de respuesta automática de Magic Liquidizer o las tablas de respuesta. Uno de estos dos te hará feliz, estoy seguro.
Las mesas no tienen que verse mal en los teléfonos inteligentes y las tabletas. Con un poco de pensamiento y esfuerzo, puede usar tablas HTML en su sitio de WordPress y hacer que se vean geniales en cualquier dispositivo.
Etiquetas:
