Preguntas Frecuentes - FAQ

EverWeb no tiene ninguna herramienta para insertar tablas. La mejor forma de añadir una tabla es pegar un pequeño fragmento de código de tabla en un widget HTML Snippet: el texto sigue siendo texto real que los buscadores y los lectores de pantalla pueden leer, y para cambiarlo solo tienes que editar las palabras. También puedes mostrar una hoja de Google Sheets, alinear el contenido con un contenedor o, como último recurso, usar una imagen.

Qué opción usar

Añadir una tabla con el widget HTML Snippet

1. Abre la página, haz clic en la pestaña Widgets y arrastra HTML Snippet (Widget de fragmento de HTML) a la página.
2. Ve a Inspector > Ajustes del widget, pega el código de abajo en el cuadro Código HTML y haz clic en Aplicar.
3. Deja Embed Option (opción de inserción) en Auto, o elige Direct Embed (inserción directa). No elijas External Frame (marco externo): es posible que los buscadores no lean lo que hay dentro.
4. Marca Adjust height to content (ajustar la altura al contenido) para que el cuadro crezca hasta que quepa la tabla.
5. En una página adaptable, pon el widget dentro de un contenedor, o marca Anchura completa en Inspector > Métricas, para que se ajuste a la pantalla.
6. Haz clic en Vista previa para comprobarlo y luego publica.

Aquí tienes una lista de precios que puedes copiar. Cambia las palabras y los precios por los tuyos:

<div class="ew-table">
<table>
  <caption>Prices</caption>
  <thead>
    <tr><th>Service</th><th>Time</th><th>Price</th></tr>
  </thead>
  <tbody>
    <tr><td>Haircut</td><td>30 minutes</td><td>$35</td></tr>
    <tr><td>Cut and colour</td><td>90 minutes</td><td>$95</td></tr>
    <tr><td>Children's cut</td><td>20 minutes</td><td>$20</td></tr>
  </tbody>
</table>
</div>
<style>
.ew-table { overflow-x: auto; }
.ew-table table { width: 100%; border-collapse: collapse; font-size: 16px; }
.ew-table caption { text-align: left; font-weight: bold; padding: 8px 0; }
.ew-table th, .ew-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #dddddd; }
.ew-table thead th { background: #f2f2f2; }
.ew-table tbody tr:nth-child(even) { background: #fafafa; }
</style>

Cómo cambiarla:

• Añadir una fila: copia una línea completa que empiece por <tr> y termine en </tr>, pégala debajo y cambia las palabras.
• Añadir una columna: añade otro <th>...</th> a la fila de encabezado y otro <td>...</td> a cada una de las demás filas.
• Cambiar el título: edita el texto de <caption>, o borra esa línea si no quieres título.
• Colores: cambia #f2f2f2 (fila de encabezado) y #fafafa (una de cada dos filas) por tus propios colores.

Tablas anchas en los teléfonos

La línea overflow-x: auto permite que una tabla ancha se desplace de lado dentro de su cuadro en un teléfono, en lugar de estrechar todas las columnas. Para una tabla con muchas columnas, añade min-width: 700px; a la línea .ew-table table para que las columnas sigan siendo legibles y los visitantes deslicen el dedo de lado. Siempre que puedas, limita las tablas para teléfonos a unas cuatro columnas cortas.

¿Ya tienes la tabla en Excel, Numbers o Google Sheets? Un "generador de tablas HTML" en línea puede convertir una hoja de cálculo pegada en código de tabla. Pega en el snippet solo la parte <table>.

Mostrar una hoja de Google Sheets

Va bien para un calendario de partidos o un horario que cambia cada semana: los cambios en la hoja aparecen en tu sitio web al poco tiempo, sin volver a publicar.

1. En Google Sheets, elige File > Share > Publish to web (Archivo > Compartir > Publicar en la Web), haz clic en la pestaña Embed (Insertar), elige la hoja y haz clic en Publish (Publicar).
2. Copia el código que te da (empieza por <iframe).
3. Pégalo en un HTML Snippet como se explica arriba. En el código, cambia width="..." por width="100%" para que se ajuste a un teléfono.

Cualquiera puede ver una hoja publicada, así que no pongas datos privados en ella. Es posible que los buscadores no cuenten la hoja como parte de tu página.

Alinear el contenido con una Fila de contenedor

Para unas pocas columnas de texto sin líneas de cuadrícula, como una dirección a la izquierda y el horario de apertura a la derecha, haz clic en Contenedores en la barra de herramientas, elige Fila de contenedor y arrastra un Cuadro de texto a cada columna. En Ajustes del widget > Mostrar, configura Ajuste como Ajuste (pasar a la línea siguiente) para que las columnas se apilen en un teléfono. Como cada columna se apila entera, esto no sirve para datos que tienen que seguir alineados en filas. Consulta Crea una página adaptable con contenedores para que se apile bien en un teléfono.

Una imagen de una tabla (último recurso)

Puedes crear la tabla en Pages, Word o Excel, guardarla como imagen y añadirla a la página. Es rápido, pero los buscadores y los lectores de pantalla no pueden leer las palabras, el texto se ve diminuto en un teléfono y cada cambio te obliga a crear una imagen nueva. Si lo haces, describe la tabla en el texto alternativo de la imagen y enlaza a una copia en PDF que los visitantes puedan ampliar e imprimir: consulta ¿Cómo enlazo a un PDF para que los visitantes puedan abrirlo o descargarlo?

Otros desarrolladores también crean widgets de tablas para EverWeb, como tablas de datos, tablas de precios y tablas con búsqueda. Los encontrarás en la página de complementos de EverWeb. Para instalar uno, consulta Instala y usa widgets de terceros en EverWeb. El creador del widget es quien le da soporte.

Artículos relacionados

• Añade un calendario de reservas, un feed de Instagram u otro código externo con el widget HTML Snippet
• Crea una página adaptable con contenedores para que se apile bien en un teléfono
• Haz que tu sitio web sea accesible: texto alternativo, títulos, texto de los enlaces y contraste
• Añade unas preguntas frecuentes que se abren y se cierran (acordeón)
• Instala y usa widgets de terceros en EverWeb