Archivio Domande

EverWeb non ha uno strumento Inserisci tabella. Il modo migliore per aggiungere una tabella è incollare un breve codice di tabella in un widget Snippet HTML (HTML Snippet): il testo resta testo vero, che i motori di ricerca e i lettori di schermo possono leggere, e lo modifichi cambiando le parole. Puoi anche mostrare un foglio Google, allineare gli elementi con un Contenitore oppure, come ultima soluzione, usare un'immagine.

Quale soluzione usare

Aggiungere una tabella con il widget Snippet HTML

1. Apri la pagina, fai clic sulla scheda Widget e trascina Snippet HTML sulla pagina.
2. Vai in Ispettore > Impostazioni widget, incolla il codice qui sotto nella casella Codice HTML e fai clic su Applica.
3. Lascia Embed Option (opzione di incorporamento) su Auto, oppure scegli Direct Embed (incorporamento diretto). Non scegliere External Frame (riquadro esterno): i motori di ricerca potrebbero non leggere ciò che contiene.
4. Spunta Adjust height to content (adatta l'altezza al contenuto), così la casella si allunga per contenere la tabella.
5. In una pagina Responsive, metti il widget dentro un Contenitore, oppure spunta Larghezza piena in Ispettore > Metriche, così si adatta allo schermo.
6. Fai clic su Anteprima per controllarla, poi pubblica.

Ecco un listino prezzi che puoi copiare. Sostituisci le parole e i prezzi con i tuoi:

<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>

Come modificarlo:

• Aggiungere una riga: copia un'intera riga che inizia con <tr> e finisce con </tr>, incollala sotto e cambia le parole.
• Aggiungere una colonna: aggiungi un altro <th>...</th> alla riga delle intestazioni e un altro <td>...</td> a ognuna delle altre righe.
• Cambiare il titolo: modifica il testo in <caption>, oppure elimina quella riga se non vuoi un titolo.
• Colori: sostituisci #f2f2f2 (riga delle intestazioni) e #fafafa (una riga sì e una no) con i tuoi colori.

Tabelle larghe sui telefoni

La riga overflow-x: auto permette a una tabella larga di scorrere lateralmente all'interno della sua casella su un telefono, invece di schiacciare tutte le colonne. Per una tabella con molte colonne, aggiungi min-width: 700px; alla riga .ew-table table, così le colonne restano leggibili e i visitatori scorrono con il dito. Per i telefoni, se puoi, limita le tabelle a circa quattro colonne brevi.

Hai già la tabella in Excel, Numbers o Google Sheets? Un "generatore di tabelle HTML" online può trasformare un foglio di calcolo incollato in codice di tabella. Incolla nello snippet solo la parte <table>.

Mostrare un foglio Google

Ideale per un calendario delle partite o un orario che cambia ogni settimana: le modifiche al foglio compaiono sul tuo sito web dopo poco tempo, senza pubblicare di nuovo.

1. In Google Sheets, scegli File > Share > Publish to web (File > Condividi > Pubblica sul web), fai clic sulla scheda Embed (Incorpora), scegli il foglio e fai clic su Publish (Pubblica).
2. Copia il codice che ti viene fornito (inizia con <iframe).
3. Incollalo in uno Snippet HTML come sopra. Nel codice, cambia width="..." in width="100%", così si adatta a un telefono.

Chiunque può vedere un foglio pubblicato, quindi non inserirvi dati privati. I motori di ricerca potrebbero non considerare il foglio come parte della tua pagina.

Allineare gli elementi con una Riga contenitore

Per qualche colonna di testo senza linee di griglia, come un indirizzo a sinistra e gli orari di apertura a destra, fai clic su Contenitori nella barra degli strumenti, scegli Riga contenitore e trascina una Casella di Testo in ogni colonna. In Impostazioni widget > Visualizza, imposta A capo su A capo, così sul telefono le colonne si impilano. Poiché ogni colonna si impila per intero, questa soluzione non va bene per dati che devono restare allineati per righe. Vedi Crea una pagina responsive con i Contenitori, in modo che sul telefono si impili in modo ordinato.

Un'immagine di una tabella (ultima soluzione)

Puoi creare la tabella in Pages, Word o Excel, salvarla come immagine e aggiungerla alla pagina. È veloce, ma i motori di ricerca e i lettori di schermo non possono leggerne le parole, il testo diventa minuscolo su un telefono e ogni modifica significa creare una nuova immagine. Se scegli questa strada, descrivi la tabella nel testo alternativo dell'immagine, e aggiungi un link a una copia in PDF che i visitatori possono ingrandire e stampare: vedi Come faccio a creare un link a un PDF che i visitatori possano aprire o scaricare?

Anche sviluppatori di terze parti creano widget di tabelle per EverWeb, come tabelle di dati, tabelle di prezzi e tabelle con ricerca. Li trovi nella pagina dei componenti aggiuntivi di EverWeb. Per installarne uno, vedi Installa e usa widget di terze parti in EverWeb. L'assistenza per il widget la offre chi lo ha creato.

Articoli correlati

• Aggiungi un calendario di prenotazione, un feed di Instagram o altro codice esterno con il widget Snippet HTML
• Crea una pagina responsive con i Contenitori, in modo che sul telefono si impili in modo ordinato
• Rendi accessibile il tuo sito web: testo alternativo, titoli, testo dei link e contrasto
• Aggiungi una sezione FAQ con domande che si aprono e si chiudono (accordion)
• Installa e usa widget di terze parti in EverWeb