En este artículo aprenderás a cómo crear tablas responsive en wordpress sin plugins, que carguen rápido y al momento. De esta forma podrás crear tablas que se adapten perfectamente a todos los dispositivos.
Esto lo vamos a hacer gracias a la web IanrMedia.unl.edu, accede pulsando al enlace antes de seguir con el tutorial, así lo puedes replicar.
El enlace lleva exactamente a su sección «generador de tablas responsive«. Dentro de dicha sección podrás ver que tienes diferentes opciones para personalizar la tabla, y esta a su vez, te generará un código html que puedes copiar y pegar en tu página web.
Table Options
Primero que todo vamos a ver cuáles son las opciones y como se utilizan cada una de ellas.
- Por un lado, vamos a tener a of rows que esto se refiere a cuantas filas quiere que tenga.
- Luego también vamos a tener of columns que viene siendo para cuantas columnas quiere que tenga.
En table title vas a poder cambiar el título de la tabla.
- Bordered table esto es por si quieres que la tabla tenga bordes, es lo habitual.
- Striped tables es para que tenga las rayas y demás, por defecto está seleccionado también.
- 100% Width es si quieres que ocupe el ancho completo, es recomendable selecciónalo.
- Scrollable table es la opción que puedas hacer scroll horizontal con el móvil, esta no se suele habilitar.
Puedes habilitar otras opciones interesantes como:
- First row as table header, esto hace que la fila de arriba sea un poco más grande, porque se puede colocar como títulos.
- First column as table header, en caso de que quieras destacar la primera columna.
Luego, si quieres cambiar la alineación del texto a izquierda, centro y derecha, podrías también modificarlo.
Reset table data
Por debajo tenemos cómo queremos rellenar la tabla, como ves en la imágen yo lo estoy completando con un ejemplo relacionado a «Jugadores y Partidos».
¿Cómo queda la tabla en ordenadores?
En desktop podrás observar una preview de cómo quedaría tu tabla en tamaño de pantalla de ordenador.
¿Cómo queda la tabla en móviles?
También con la opción de mobile, verás como quedaría en dispositivos móviles.
Posiblemente no te deje ver la preview, pero puedes pegarlo en tu web, y ver directamente cómo queda aplicado en la web, visitando el enlace desde tu teléfono móvil o tablet.
HTML Output
Una vez hayas copiado todo el código html generado, te dirijes a la entrada o página dónde quieras añadir dicha tabla.
Ahora añades una línea HTML o si estás en el editor antiguo, te dirijes a la sección de HTML.
Puedes cargar una Vista previa guarando como borrador, antes de publicar la entrada, para asegurarte de que todo va perfectamente.
Cómo ves, así se vería la talba anterior desde una vista más estrecha (similar a pantalla de móvil).
Además, añadiendo un poco de código CSS podrías hacer que la tabla se vea mucho más bonita o con otro estilo.
A continuación te adjunto un vídeo para que veas todo lo comentado puesto en práctica.
Leer Más
Leer Más
Leer Más
Leer Más
Leer Más
Leer Más
Leer Más
Leer Más
Leer Más
![Cómo hacer que funcione el shortcode [year] en los títulos de WordPress](https://gabiflorensa.com/wp-content/uploads/2022/04/maxresdefault-17.jpg)
Leer Más
Leer Más
Leer Más