Cómo crear tablas responsivas en WordPress (plugin TablePress + método manual)

receptivoEl diseño de los formularios se adapta a los distintos tamaños de pantalla, garantizando que elEquipamiento diverso(por ejemplo, ordenadores, teléfonos inteligentes) para una legibilidad y un diseño óptimos. Mediante el uso de CSS media queries y los principios del diseño responsivo, es posible crear tablas que se muestren sin problemas en cualquier dispositivo. En este artículo, trataremos el uso de plugins como TablePress) es una forma sencilla de crear formularios responsivos, y también explicará cómo utilizar manualmente la función HTML responder cantando CSS Cree formularios personalizados con capacidad de respuesta.

Creación de formularios responsivos con plugins

El rico ecosistema de plugins de WordPress facilita la adición de todo tipo de funcionalidades sin tener que escribir código.TablePress es uno de los mejores plugins para crear tablas responsivas, aquí le explicamos cómo instalarlo y utilizarlo TablePress Los pasos.

Paso 1: Instalar y activar el plugin TablePress

Inicie sesión en el panel de administración de WordPress.
Navegue hasta "plug-in (componente de software)">"Añadir nuevo plugin".
Buscar "TablePress", haga clic en "Instalar ahora" y, a continuación, active el plugin.

Paso 2: Crear un nuevo formulario

Una vez instalado el plugin, acceda al plugin TablePress desde el menú de la izquierda y seleccione "Añadir nueva tabla".

Formularios de entradaleyendaydescripcionesy el requeridofilajunto concolumnas.
- Ejemplo:
  - leyenda: Programa
  - descripciones: Disposiciones detalladas para el programa de demostración
  - Número de filas y columnas: 4 respectivamente

Haga clic en "Añadir formulario" cuando haya terminado.

Paso 3: Introducir los datos del formulario

En la página de la nueva tabla, introduzca los datos. Se pueden añadir datos manualmente a cada fila y columna, adecuados para los encabezados de las tablas y el contenido de las celdas de datos.

Se puede establecer el título del formulario, la descripción y otras opciones generales.

Paso 4: Configurar las opciones del formulario

TablePress ofrece diversas opciones de configuración de tablas que permiten personalizar las funciones de ordenación de celdas, paginación y búsqueda.
Seleccione los ajustes adecuados y previsualice el formulario, haga clic en "Guardar cambios" cuando esté satisfecho.

Paso 5: Incrustar el formulario en la página o post

Tras completar la configuración del formulario, TablePress genera unshortcode.

Ponga el shortcode en elPegar directamente en el editor de una página o artículoEl formulario se mostrará automáticamente y responderá a los diferentes tamaños de pantalla de los dispositivos.

TablePress también permite importar o exportar tablas para quienes necesiten compartir los datos de las tablas en varios sitios web.

Cree manualmente formularios responsivos (no necesita ningún plugin)

Además de utilizar el plugin, también puede utilizar manualmente la función HTML responder cantando CSS Cree formularios con capacidad de respuesta. El método manual permite un control más preciso del aspecto del formulario y no requiere la instalación de plug-ins adicionales.

Paso 1: Crear la estructura de la tabla HTML Introduzca el siguiente código en la sección HTML de la página para crear la estructura base del formulario:





















            Cabecera 1       Cabecera 2       Cabecera 3     
  
            Celda 1       Celda 2       Celda 3     
          Celda 4       Celda 5       Celda 6

Cabecera 1	Cabecera 2	Cabecera 3
Celda 1	Celda 2	Celda 3
Celda 4	Celda 5	Celda 6

Paso 2: Añadir estilos CSS básicos en HTML <style> piezatal vezAñada estilos básicos a la tabla en un archivo CSS externo para que sea coherente en todos los anchos de pantalla:

.responsive-table {
  anchura: 100%.
  border-collapse: colapso;
}

.responsive-table th, .responsive-table td {
  borde: 1px sólido #ddd;
  acolchado: 8px;
  alineación del texto: izquierda;
}

.responsive-table th {
  color de fondo: #f2f2f2;
}

Paso 3: Utilice las consultas de medios para conseguir capacidad de respuesta a través de CSS media (medios de comunicación) para configurar la tabla para que se muestre en bloques en una pantalla pequeña para facilitar la lectura del contenido. El siguiente código le ayudará a conseguirlo:

@media only screen and (max-width: 768px) {
  .responsive-table {
    visualización: bloque;
    anchura: 100%.
  }

  .responsive-table th, .responsive-table td {
    visualización: bloque;
    anchura: 100%.
  }

  .responsive-table th {
    posición: absoluta;
    arriba: -9999px;
  }

  .responsive-table tr {
    margen inferior: 15px;
  }

  .responsive-table td {
    posición: relativa;
    acolchado-izquierdo: 50%.
  }

  .responsive-table td:before {
    contenido: attr(datos-th) ":";
    posición: absoluta;
    izquierda: 0;
    anchura: 50%.
    acolchado-izquierdo: 15px;
    font-weight: bold;
  }
}

En el código anterior:

Solicitud de informaciónAsegúrese de que la anchura de la pantalla es inferior a 768px Cuando la tabla cambia a la disposición en bloques.
td:antesLas pseudoclases añaden contenido de cabecera de tabla a cada celda para mejorar la legibilidad en pantallas pequeñas.

Paso 4: Añadir un formulario HTML a una página de WordPress Por último, se HTML responder cantando CSS Pegue el código en el bloque HTML de la página, y obtendrá un formulario responsivo personalizado que se adapta a diferentes pantallas, y podrá previsualizar si el formulario se muestra correctamente en diferentes pantallas.

¿Qué método elegir?

Si no está familiarizado con el código o necesita configurar tablas rápidamente, se recomienda un plugin como TablePress, pero si necesita más libertad de personalización y control, los métodos manuales HTML y CSS son más apropiados. Ambos métodos pueden ayudarle a implementar tablas responsivas en WordPress para mejorar la experiencia del usuario.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres