Come utilizzare il blocco tabella di WordPress

Il Blocco tabella di WordPress ti consente di creare una tabella per i tuoi articoli o le tue pagine. Questo è ottimo per mostrare dati tabulati. È facile da usare e può essere adattato per adattarsi al design del tuo sito web.

In questo articolo, esamineremo da vicino il Blocco tabella. Vedremo come aggiungerlo a post e pagine, le sue impostazioni e opzioni, le best practice e le domande frequenti.

Come aggiungere il blocco tabella al tuo articolo o pagina

Fare clic sull'inseritore di blocchi in cui si desidera aggiungere il blocco e cercare Tabella. Quando viene visualizzato il Blocco tabella, fai clic su di esso per aggiungerlo al tuo contenuto. In alternativa, puoi utilizzare l'inseritore nella parte superiore sinistra dello schermo o digitare /table e premere invio.

Questo aggiunge il Blocco tabella in cui è possibile specificare il numero di colonne e righe. Inserisci il numero di colonne e righe che desideri per la tua tabella e fai clic su Crea tabella.

La tua tabella apparirà sullo schermo dove puoi aggiungere contenuto alla cella e aggiungere una didascalia in basso. Lo stile predefinito varierà in base al tema WordPress che stai utilizzando. Sto usando il tema WordPress Twenty Twenty-One per i miei esempi.

Impostazioni e opzioni del blocco tabella

Diamo un'occhiata alle impostazioni e alle opzioni.

Barra degli strumenti Blocco tabella

La barra degli strumenti Blocco tabella viene visualizzata sopra la tabella quando si fa clic sulla tabella.

Cambia tipo di blocco o stile

Ciò consente di aggiungere la tabella a un gruppo, impostare il numero di colonne per il layout (non le colonne della tabella) e selezionare lo stile desiderato per la tabella. Ci sono due opzioni per lo stile. Lo stile predefinito ha uno sfondo a tinta unita, mentre Stripes aggiunge una striscia grigia a ogni altra riga. Passando il mouse sulle opzioni viene fornita un'anteprima.

Cambia allineamento

Imposta la tabella su sinistra, centro, destra, larghezza ampia o larghezza completa. Larghezza ampia e Larghezza intera non sono supportate da tutti i temi. L'ho impostato su larghezza ampia in questo esempio.

Allineamento delle colonne

Scegli l'allineamento per ogni colonna individualmente. Impostali sull'allineamento a sinistra, al centro o a destra. In questo esempio, ho impostato la colonna di sinistra su Destra e il resto su Centro.

grassetto e corsivo

Le impostazioni in grassetto e corsivo regolano il testo che hai evidenziato. Qualsiasi testo all'interno della tabella o della didascalia può essere reso grassetto, corsivo o entrambi. È necessario selezionare ogni cella in modo indipendente.

Collegamento

Aggiungi un collegamento a qualsiasi cosa nella tabella o nella didascalia. Ho aggiunto collegamenti ai nomi degli orologi e nella didascalia per questo esempio. Mentre digiti un URL, cerca nel tuo sito web gli URL che hai usato in precedenza e li offre come suggerimenti.

Altre opzioni per il tavolo

Si apre una casella a discesa con diverse opzioni. Ciascuna delle seguenti opzioni viene aggiunta all'immagine sopra:

Codice in linea : mostra il testo in stile codice.

Immagine in linea : apre il Catalogo multimediale in cui è possibile selezionare un'immagine da posizionare in linea nella posizione del cursore. È possibile selezionare l'immagine per modificarne la larghezza.

Input da tastiera : aggiunge tag da tastiera al contenuto per definire l'input da tastiera. Viene visualizzato con il carattere monospazio predefinito del browser.

Barrato : inserisce una linea attraverso il testo che hai evidenziato.

Pedice : rende il testo che hai evidenziato come un pedice.

Apice : rende apice il testo che hai evidenziato.

Colore testo : consente di modificare il colore del testo evidenziato. Puoi selezionare tra i colori preimpostati, scegliere un colore utilizzando lo strumento di selezione dei colori o inserire il valore come codice esadecimale o RBG.

Modifica tabella

L'opzione Modifica tabella apre una casella a discesa in cui è possibile inserire o eliminare righe e colonne. Aggiungili prima o dopo la riga o la colonna che hai selezionato. Ciò semplifica la modifica delle dimensioni del tavolo in qualsiasi momento. Ho aggiunto entrambi in questo esempio.

Opzioni di blocco

Il pulsante Opzioni blocco tabella apre una casella a discesa con più opzioni tra cui scegliere. Le opzioni della tabella includono:

Nascondi altre impostazioni : questa opzione nasconde la barra laterale destra per darti uno spazio di lavoro più pulito.

Copia : copia il Blocco tabella negli appunti. Puoi quindi incollarlo ovunque desideri all'interno di quella pagina o post.

Duplica : crea un duplicato del Blocco tabella sotto la tabella.

Inserisci prima : inserisce lo spazio per un blocco prima del Blocco tabella.

Inserisci dopo : inserisce lo spazio per un blocco dopo il Blocco tabella.

Sposta in : posiziona una linea blu all'interno dell'editor di blocchi. Puoi spostare la linea verso l'alto o verso il basso utilizzando i tasti freccia. Una volta che ottieni la linea blu nella posizione in cui desideri spostare il tuo blocco tabella, premi Invio e il tuo blocco viene automaticamente spostato nella nuova posizione.

Modifica come HTML : questa opzione cambia nell'editor di codice in modo che tu possa il contenuto come HTML.

Aggiungi a blocchi riutilizzabili : questa opzione aggiunge il tuo Blocco tabella ai blocchi riutilizzabili in modo da poterlo riutilizzare su qualsiasi pagina o post.

Gruppo : crea un gruppo in modo da poter regolare tutti i blocchi insieme.

Rimuovi blocco : questa opzione elimina il blocco tabella.

Impostazioni blocco tabella

Le impostazioni del Blocco tabella sono posizionate con le altre impostazioni nella barra laterale destra. Fai clic sull'icona a forma di ingranaggio nell'angolo in alto a destra se la barra laterale non è aperta, quindi fai clic in un punto qualsiasi del Blocco tabella per mostrare le impostazioni. Vedrai la parola Tabella con un'icona e una breve descrizione. Vedrai anche le opzioni per Stili, Colore, Impostazioni tabella e Avanzate. Fare clic su ciascuno dei titoli per aprire le relative impostazioni.

Stili

Gli stili di blocco tabella consentono di selezionare tra una tabella senza strisce o con strisce. Puoi anche impostare lo stile predefinito nella casella a discesa sotto i due stili, oppure puoi lasciarlo come non impostato. Gli stili forniscono un'anteprima

Colore

Il colore ti dà il controllo sul testo, sulla griglia e sui colori di sfondo del Blocco tabella. Scegli tra diversi colori preselezionati o seleziona un colore personalizzato dal selettore colori.

Per il testo e la griglia, scegline uno. Per lo sfondo, scegli un colore a tinta unita o crea una sfumatura. Sia il testo che i colori di sfondo consentono di inserire il codice esadecimale o RGB. Il gradiente di sfondo può essere lineare o radiale. Lineare include un'impostazione che consente di controllare la direzione.

Nell'esempio sopra, ho selezionato il bianco per il testo e la griglia e ho selezionato alcune sfumature di blu per un gradiente radiale.

Se hai selezionato lo stile a strisce, il colore di sfondo controllerà il colore a strisce dello sfondo. Le strisce possono essere uno sfondo a tinta unita o sfumato.

Impostazioni tabella

Le Impostazioni tabella forniscono opzioni che possono essere attivate o disattivate. Le impostazioni includono:

Larghezza fissa : rende le celle della stessa dimensione, in modo che la tabella appaia coerente. Impedisce alle cellule di adattarsi alle dimensioni del suo contenuto e di renderle di dimensioni diverse.

Sezione intestazione : aggiunge una riga in alto con testo in grassetto. È separato dalle altre celle con una linea in grassetto. Questi si distinguono e funzionano come etichette per le colonne.

Sezione piè di pagina : aggiunge una riga in fondo alla tabella che funge da piè di pagina. È separato dalle altre celle con una linea in grassetto, ma il testo non è in grassetto per impostazione predefinita. Questo è utile per riassumere le informazioni, fornire un totale o ripetere il titolo per tabelle di grandi dimensioni.

Avanzate

Le impostazioni Advanced Table Block includono un'opzione per un ancoraggio HTML e un campo per aggiungere classi CSS aggiuntive. L'ancora funziona come un URL speciale in modo da poter collegare direttamente al Blocco tabella. Il campo Classi CSS consente di aggiungere una classe CSS personalizzata per definire lo stile del blocco. Ha una classe di default per lo stile che hai selezionato nelle impostazioni dello stile.

Suggerimenti e best practice per un utilizzo efficace del blocco tabella

Utilizzare il Blocco tabella ogni volta che è necessario visualizzare dati o contenuti tabulati. Non usarli per creare colonne. Il Blocco Colonne è il migliore per questo.

Aggiungi un titolo per la tabella con il Blocco paragrafo.

Crea titoli per le righe aggiungendo un'intestazione. Usa etichette chiare e facili da capire.

Usa Larghezza fissa per rendere il tavolo più lucido e professionale.

Seleziona Stripes per tabelle più grandi per renderle più facili da leggere.

Usa un piè di pagina per riepilogare le informazioni o per mostrare nuovamente i titoli se la tabella è grande.

Domande frequenti sul blocco tabella

Qual è l'uso migliore del Blocco tabella?

Questo blocco è ottimo per creare tabelle e grafici.

Il Blocco tabella può essere utilizzato per creare colonne?

Sì, ma non ti dà abbastanza controllo sulle colonne. È meglio usare il blocco colonna per questo.

La dimensione del tavolo può essere modificata in un secondo momento?

Sì. Inserisci o elimina righe o colonne utilizzando le opzioni della tabella.

Conclusione

Questo è il nostro sguardo al Blocco tabella di WordPress. Questo è un blocco eccellente per creare tabelle di base e puoi persino modellarle in una certa misura per abbinarle al tuo sito web. Questo blocco è uno dei vantaggi dell'editor blocchi. Le tabelle create con questo blocco sono semplici, ma funzionano alla grande e sono facili da costruire.

Vogliamo sentire da voi. Usi il Blocco tabella nei tuoi contenuti WordPress? Fateci sapere la vostra esperienza nei commenti.

Immagine in primo piano tramite Seahorse Vector / shutterstock.com