Guida utente Annulla

Presentare il contenuto mediante le tabelle

  1. Guida utente di Dreamweaver
  2. Introduzione
    1. Nozioni di base sul design responsive
    2. Novità di Dreamweaver
    3. Sviluppo Web con Dreamweaver - Panoramica
    4. Dreamweaver / Domande frequenti
    5. Scelte rapide da tastiera
    6. Requisiti di sistema di Dreamweaver
    7. Riepilogo delle funzioni
  3. Dreamweaver e Creative Cloud
    1. Sincronizzare le impostazioni di Dreamweaver con Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Utilizzare i file Photoshop in Dreamweaver
    4. Operazioni con Adobe Animate e Dreamweaver
    5. Estrarre file SVG ottimizzati per il Web da Libraries
  4. Aree di lavoro e viste di Dreamweaver
    1. Area di lavoro di Dreamweaver
    2. Ottimizzare l'area di lavoro di Dreamweaver per lo sviluppo visivo
    3. Eseguire ricerche nei file in base al nome file o al contenuto | Mac OS
  5. Configurare i siti
    1. Siti di Dreamweaver
    2. Configurare una versione locale del sito
    3. Collegamento a un server di pubblicazione
    4. Configurare un server di prova
    5. Importare ed esportare le impostazioni di un sito Dreamweaver
    6. Passaggio di siti Web esistenti da un server remoto alla cartella principale del sito locale
    7. Funzioni di accessibilità in Dreamweaver
    8. Impostazioni avanzate
    9. Impostazione delle preferenze del sito per il trasferimento dei file
    10. Specificare le Impostazioni del server proxy in Dreamweaver
    11. Sincronizzare le impostazioni di Dreamweaver con Creative Cloud
    12. Utilizzo di Git in Dreamweaver
  6. Gestire i file
    1. Creare e aprire file
    2. Gestire file e cartelle
    3. Scaricamento e caricamento dei file da e verso il server
    4. Depositare e ritirare i file
    5. Sincronizzare i file
    6. Confrontare file per verificare le differenze
    7. Applicare la maschera file a file e cartelle del sito Dreamweaver
    8. Attivare le Design Notes per i siti di Dreamweaver
    9. Impedire un potenziale attacco exploit del Gatekeeper
  7. Layout e progettazione
    1. Usare i riferimenti visivi per il layout
    2. Informazioni sull'utilizzo di CSS per creare il layout della pagina
    3. Progettazione di siti Web reattivi con Bootstrap
    4. Creazione e utilizzo di media query in Dreamweaver
    5. Presentare il contenuto mediante le tabelle
    6. Colori
    7. Responsive design con i layout a griglia fluida
    8. Extract in Dreamweaver
  8. CSS
    1. Nozioni sui fogli di stile CSS
    2. Creazione del layout delle pagine con CSS Designer
    3. Utilizzare i preprocessori CSS in Dreamweaver
    4. Impostare le preferenze di stile CSS in Dreamweaver
    5. Spostare le regole CSS in Dreamweaver
    6. Convertire CSS in linea in una regola CSS in Dreamweaver
    7. Utilizzare i tag div
    8. Applicare sfumature allo sfondo
    9. Creare e modificare effetti di transizione CSS3 in Dreamweaver
    10. Formattazione del codice
  9. Contenuto e risorse delle pagine
    1. Impostare le proprietà di pagina
    2. Impostare le proprietà dei collegamenti CSS e le proprietà dei collegamenti CSS
    3. Lavorare con il testo
    4. Ricercare e sostituire testo, tag e attributi
    5. Pannello DOM
    6. Modifica nella vista Dal vivo
    7. Codifica dei documenti in Dreamweaver
    8. Selezionare e visualizzare gli elementi nella finestra del documento
    9. Definire le proprietà del testo nella finestra di ispezione Proprietà
    10. Eseguire il controllo ortografico di una pagina Web
    11. Utilizzo dei filetti orizzontali in Dreamweaver
    12. Aggiungere e modificare le combinazioni di caratteri in Dreamweaver
    13. Operazioni con le risorse
    14. Inserire e aggiornare le date in Dreamweaver
    15. Creare e gestire le risorse preferite in Dreamweaver
    16. Inserire e modificare le immagini in Dreamweaver
    17. Aggiungere oggetti multimediali
    18. Aggiunta di video in Dreamweaver
    19. Inserire video HTML5
    20. Inserire file SWF
    21. Aggiungere effetti audio
    22. Inserire l'audio HTML5 in Dreamweaver
    23. Operazioni con le voci di libreria
    24. Utilizzare testo in arabo e in ebraico in Dreamweaver
  10. Collegamenti e navigazione
    1. Informazioni sui collegamenti e sulla navigazione
    2. Collegamenti
    3. Mappe immagine
    4. Risoluzione dei problemi di collegamenti
  11. Widget ed effetti jQuery
    1. Utilizzare i widget jQuery UI e Mobile in Dreamweaver
    2. Usare effetti jQuery in Dreamweaver
  12. Programmazione dei siti Web
    1. Programmazione in Dreamweaver
    2. Ambiente di codifica in Dreamweaver
    3. Impostare le preferenze di codifica
    4. Personalizzare la colorazione del codice
    5. Scrivere e modificare codice
    6. Suggerimenti sul codice e completamento del codice
    7. Comprimere ed espandere codice
    8. Riutilizzo del codice con gli snippet
    9. Comando Lint
    10. Ottimizzare il codice
    11. Modificare il codice nella vista Progettazione.
    12. Utilizzo del contenuto dell'intestazione delle pagine
    13. Inserimento di server-side include in Dreamweaver
    14. Uso delle librerie di tag in Dreamweaver
    15. Importazione di tag personalizzati in Dreamweaver
    16. Utilizzare i comportamenti JavaScript (istruzioni generali)
    17. Applicare comportamenti JavaScript incorporati
    18. Informazioni su XML e XSLT
    19. Eseguire trasformazioni XSL server-side in Dreamweaver
    20. Esecuzione di trasformazioni XSL client-side in Dreamweaver
    21. Aggiungere entità di carattere per XSLT in Dreamweaver
    22. Formattazione del codice
  13. Flussi di lavoro di interazione con altri prodotti
    1. Installazione e uso delle estensioni in Dreamweaver
    2. Aggiornamenti in app in Dreamweaver
    3. Inserire documenti Microsoft Office in Dreamweaver (solo Windows)
    4. Operazioni con Fireworks e Dreamweaver
    5. Modificare il contenuto nei siti Dreamweaver mediante Contribute
    6. Integrazione tra Dreamweaver e Business Catalyst
    7. Creare campagne e-mail personalizzate
  14. Modelli
    1. Informazioni sui modelli di Dreamweaver
    2. Riconoscere i modelli e i documenti basati sui modelli
    3. Creare un modello di Dreamweaver
    4. Creare aree modificabili nei modelli
    5. Creare aree e tabelle ripetute nei modelli in Dreamweaver
    6. Usare le aree opzionali nei modelli
    7. Definire attributi di tag modificabili in Dreamweaver
    8. Creare modelli nidificati in Dreamweaver
    9. Modificare, aggiornare ed eliminare modelli
    10. Esportare e importare contenuti xml in Dreamweaver
    11. Applicare o rimuovere un modello da un documento esistente
    12. Modificare il contenuto nei modelli di Dreamweaver
    13. Regole di sintassi per i tag di modello in Dreamweaver
    14. Impostare le preferenze di evidenziazione per le aree dei modelli
    15. Vantaggi dell'uso dei modelli in Dreamweaver
  15. Dispositivi mobili e multischermo
    1. Creare media query
    2. Cambiamento dell'orientamento della pagina per i dispositivi mobili
    3. Creare web app per dispositivi mobili utilizzando Dreamweaver
  16. Siti, pagine e moduli Web dinamici
    1. Applicazioni Web
    2. Configurare il computer per lo sviluppo di applicazioni
    3. Risoluzione dei problemi relativi alle connessioni di database
    4. Rimozione di script di connessione in Dreamweaver
    5. Progettare pagine dinamiche
    6. Panoramica sulle origini di contenuto dinamico
    7. Definire le origini di contenuto dinamico
    8. Aggiungere contenuto dinamico alle pagine
    9. Modifica del contenuto dinamico in Dreamweaver
    10. Visualizzare i record di database
    11. Fornire dati dal vivo e risoluzione dei problemi in Dreamweaver
    12. Aggiungere comportamenti server personalizzati in Dreamweaver
    13. Creazione di moduli con Dreamweaver
    14. Usare moduli per raccogliere informazioni dagli utenti
    15. Creare e attivare i moduli ColdFusion in Dreamweaver
    16. Creare moduli Web
    17. Supporto HTML5 avanzato per gli elementi modulo
    18. Sviluppare un modulo con Dreamweaver
  17. Sviluppo visivo delle applicazioni
    1. Creare pagine principali e di dettaglio in Dreamweaver
    2. Creare pagine di ricerca e di risultati
    3. Creare una pagina di inserimento record
    4. Costruire una pagine di aggiornamento record in Dreamweaver
    5. Costruzione di pagine di eliminazione record in Dreamweaver
    6. Utilizzare comandi ASP per modificare un database in Dreamweaver
    7. Creare una pagina di registrazione
    8. Creare una pagina di login
    9. Creare una pagina accessibile solo agli utenti autorizzati
    10. Protezione delle cartelle in ColdFusion utilizzando Dreamweaver
    11. Utilizzo di componenti ColdFusion in Dreamweaver
  18. Verifica, anteprima e pubblicazione dei siti Web
    1. Anteprima delle pagine
    2. Visualizzare in anteprima pagine web di Dreamweaver su più dispositivi
    3. Verificare il sito Dreamweaver
  19. Risoluzione dei problemi
    1. Problemi risolti
    2. Problemi noti

 

 

Utilizzare le tabelle per presentare i contenuti nel sito web. Inoltre, come dividere e unire le celle della tabella e importare ed esportare dati in formato tabulare.

Le tabelle sono uno strumento particolarmente utile per presentare dati e disporre testo e grafica in una pagina HTML. Una tabella è costituita da una o più righe contenenti una o più celle. Sebbene le colonne non vengano specificate in maniera esplicita nel codice HTML, Dreamweaver consente di modificare sia le colonne che le righe e le celle.

Dreamweaver visualizza la larghezza della tabella e della colonna per ogni colonna di tabella, quando la tabella viene selezionata o quando il punto di inserimento viene posizionato su di essa. Accanto alle larghezze si trovano le frecce per il menu dell'intestazione della tabella e per i menu dell'intestazione della colonna. I menu consentono di accedere rapidamente ai comandi più comuni relativi alle tabelle. Potete attivare o disattivare le larghezze e i menu.

Se la larghezza della tabella o di una colonna non è visualizzata, significa che per la tabella o la colonna non è stata specificata una larghezza nel codice HTML. Se sono visualizzati due numeri, significa che la larghezza visiva che appare nella vista Progettazione non corrisponde a quella specificata nel codice HTML. Ciò può avvenire quando ridimensionate una tabella trascinandone l'angolo inferiore destro o quando aggiungete contenuto a una cella di larghezza maggiore rispetto a quella impostata.

Ad esempio, se impostate la larghezza di una colonna su 200 pixel e successivamente aggiungete un contenuto la cui larghezza è di 250 pixel, vengono visualizzati due numeri per la colonna: 200 (larghezza specificata nel codice) e (250) tra parentesi (larghezza visiva della colonna visualizzata sullo schermo).

Nota:

potete anche creare il layout delle pagine utilizzando il posizionamento CSS.

Precedenza per la formattazione delle tabelle in HTML

Quando formattate una tabella nella vista Progettazione, potete definire le proprietà dell'intera tabella o delle righe, colonne o celle selezionate nella tabella. Quando si imposta una proprietà, ad esempio il colore di sfondo o l'allineamento, su un valore per l'intera tabella e su un valore diverso per singole celle, la formattazione delle celle ha la precedenza sulla formattazione delle righe, che a sua volta ha la precedenza sulla formattazione della tabella.

L'ordine di precedenza per la formattazione delle tabelle è il seguente:

  1. Celle
  2. Righe
  3. Table

Ad esempio, se impostate il blu come colore di sfondo di una singola cella, quindi impostate il giallo come colore di sfondo dell'intera tabella, la cella blu non diventa gialla poiché la formattazione della cella ha la precedenza sulla formattazione della tabella.

Nota:

quando impostate le proprietà in una colonna, Dreamweaver modifica gli attributi del tag td corrispondente a ciascuna cella della colonna.

Informazioni sulla divisione e sull'unione delle celle di tabella

Potete unire un numero qualsiasi di celle adiacenti (a condizione che la selezione abbia la forma di una linea o di un rettangolo) in modo da creare una singola cella che occupi più righe o colonne. Una cella, a sua volta, può essere divisa in un numero qualsiasi di righe o colonne, indipendentemente dal fatto che sia stata o meno unita in precedenza. La tabella viene ristrutturata automaticamente da Dreamweaver con l'aggiunta dei necessari attributi colspan o rowspan in modo da ottenere la disposizione specificata.

Nell'esempio seguente, le celle al centro delle prime due righe sono state unite in un'unica cella che occupa due righe.

Celle unite

Inserire una tabella e aggiungere contenuto

Utilizzate il pannello o il menu Inserisci per creare una nuova tabella. Successivamente, aggiungete testo e immagini alle celle di tabella con le stesse modalità con le quali vengono aggiunti all'esterno di una tabella.

  1. Collocate il punto di inserimento nella posizione in cui la tabella dovrà apparire nella pagina.

    Nota:

    se il documento è vuoto, potete posizionare il punto di inserimento solo all'inizio del documento.

    • Selezionate Inserisci > Tabella.

    • Nella categoria HTML del pannello Inserisci, fate clic su Tabella.

  2. Impostate gli attributi della finestra di dialogo Tabella e fate clic su OK per creare la tabella.
    Creazione di una tabella
    Creazione di una tabella

    Righe

    Determina il numero di righe della tabella.

    Colonne

    Determina il numero di colonne della tabella.

    Larghezza tabella

    Specifica la larghezza della tabella in pixel o sotto forma di percentuale rispetto alla larghezza della finestra del browser.

    Spessore bordo

    Specifica la larghezza in pixel dei bordi della tabella.

    Spaziatura celle

    Specifica la distanza in pixel tra le celle adiacenti della tabella.

    Nota:

    Se non assegnate valori espliciti alle opzioni Margine celle e Spaziatura celle, la maggior parte dei browser visualizza la tabella come se le opzioni Spessore bordo e Margine celle fossero impostate su 1 e l'opzione Spaziatura celle su 2. Per far sì che i browser visualizzino la tabella senza bordi e senza spaziatura o margine delle celle, impostate Margine celle e Spaziatura celle su 0.

    Margine celle

    Specifica la distanza in pixel tra il contenuto e i bordi della cella.

    Nessuno

    Non attiva alcuna intestazione di colonna o di riga per la tabella.

    A sinistra

    Consente di utilizzare la prima colonna per contenere tutte le intestazioni della tabella, così da poter inserire un'intestazione per ogni riga della tabella.

    Margine superiore

    Consente di utilizzare la prima riga per contenere tutte le intestazioni della tabella, così da poter inserire un'intestazione per ogni colonna della tabella.

    Entrambe

    Consente di inserire nella tabella intestazioni sia di riga sia di colonna.

    Nota:

    Si consiglia di utilizzare le intestazioni nel caso in cui i visitatori del sito Web facciano uso di uno screen reader. Gli screen reader leggono le intestazioni delle tabelle e consentono agli utenti di individuare immediatamente le informazioni contenute nelle tabelle.

    Didascalia

    Consente di inserire un titolo da visualizzare al di fuori della tabella.

    Riepilogo

    Fornisce una descrizione della tabella. Gli screen reader leggono il testo riassuntivo, che però non viene visualizzato nel browser dell'utente.

Importare ed esportare le tabelle

I dati di tabella creati in altre applicazioni (ad esempio Microsoft Excel) e salvati in un formato di testo delimitato (con voci separate da tabulazioni, virgole, due punti, punto e virgola o altri delimitatori) possono essere importati in Dreamweaver e formattati come tabella.

Potete inoltre esportare i dati di una tabella di Dreamweaver in un file di testo in cui il contenuto delle celle adiacenti è separato da un delimitatore. I delimitatori utilizzabili sono la virgola, i due punti, il punto e virgola o lo spazio. Quando esportate una tabella, viene esportata l'intera tabella. Non potete selezionare parti della tabella da esportare.

Nota:

Se desiderate esportare una parte dei dati di una tabella, ad esempio le prime sei righe o colonne, copiate le celle contenenti i dati, incollarle all'esterno della tabella per creare una nuova tabella, quindi esportate la nuova tabella.

Importare dati di tabella

  1. Selezionate File > Importa > Importa dati di tabella.

  2. Specificate le opzioni relative ai dati della tabella e fate clic su OK.

    File di dati

    Il nome del file da importare. Fate clic sul pulsante Sfoglia per selezionare un file.

    Delimitatore

    Il delimitatore utilizzato nel file da importare.

    Se selezionate Altro, viene visualizzata una casella di testo a destra del menu a comparsa. Inserite il delimitatore utilizzato nel file.

    Nota:

    specificate il delimitatore utilizzato al momento del salvataggio del file di dati. In caso contrario, il file non verrà importato in modo corretto e non potrete formattare i dati sotto forma di tabella.

    Larghezza tabella

    La larghezza della tabella.

    • Selezionate Adatta ai dati per adattare la larghezza di ogni colonna alla stringa di testo più lunga presente nella colonna.

    • Selezionate Imposta a per specificare una larghezza di tabella fissa espressa in pixel o come percentuale della larghezza della finestra del browser.

    Bordo

    Specifica la larghezza in pixel dei bordi della tabella.

    Margine celle

    Il numero di pixel tra il contenuto e i bordi delle celle.

    Spaziatura celle

    Il numero di pixel tra celle adiacenti della tabella.

    Nota:

    Se non assegnate valori espliciti alle opzioni Bordo, Margine celle e Spaziatura celle, la maggior parte dei browser visualizza la tabella come se le opzioni Bordo e Margine celle fossero impostate su 1 e l'opzione Spaziatura celle su 2. Per far sì che i browser visualizzino la tabella senza spaziatura o margine delle celle, impostate Margine celle e Spaziatura celle su 0. Per visualizzare i bordi delle celle e della tabella quando l'opzione Bordo è impostata su 0, selezionate Visualizza > Riferimenti visivi > Bordi delle tabelle.

    Formatta riga superiore

    Specifica il tipo di formattazione eventualmente applicato alla riga superiore della tabella. Selezionate una delle quattro opzioni di formattazione: Nessuna formattazione, Grassetto, Corsivo o Grassetto corsivo.

Esportare una tabella

  1. Posizionate il punto di inserimento in una cella della tabella.
  2. Selezionate File > Esporta > Tabella.
  3. Specificate le seguenti opzioni:

    Delimitatore

    Specifica il carattere delimitatore da utilizzare per separare le voci nel file esportato.

    Interruzioni di riga

    Specifica il sistema operativo in cui verrà aperto il file esportato: Windows, Macintosh o UNIX. Il carattere che indica la fine di una riga di testo varia a seconda del sistema operativo.

  4. Fate clic su Esporta.
  5. Inserite un nome da assegnare al file e fate clic su Salva.

Selezionare gli elementi di una tabella

Potete selezionare un'intera tabella, riga o colonna in un'unica operazione, così come selezionare una o più celle singole.

Quando posizionate il puntatore su una tabella, una colonna o una cella, Dreamweaver evidenzia tutte le celle nella selezione per mostrare quali celle saranno selezionate. Ciò risulta utile in presenza di tabelle senza bordi, tabelle nidificate o celle che occupano più colonne o righe. Potete modificare il colore di evidenziazione nelle preferenze.

Nota:

Se posizionate il puntatore sul bordo di una tabella e si tiene premuto il tasto Ctrl (Windows) o Comando (Macintosh), viene evidenziata l'intera struttura della tabella, ossia tutte le celle. Ciò si rivela utile quando desiderate visualizzare la struttura di una sola tabella in una serie di tabelle nidificate.

Selezionare un'intera tabella

Per selezionare una tabella, effettuate una delle seguenti operazioni:

  • Fate clic sull'angolo superiore sinistro della tabella per selezionare la tabella.
  • Fate clic in una cella della tabella, quindi selezionate il tag nel selettore di tag presente nell'angolo inferiore sinistro della finestra del documento.
  • Fate clic in una cella della tabella, quindi fate clic sul menu dell'intestazione della tabella, infine selezionate Seleziona tabella. Vengono visualizzate le maniglie di selezione sul bordo inferiore e destro della tabella selezionata.
  • Fate clic in una cella della tabella e selezionate Modifica > Tabella > Seleziona tabella.

Selezionare una o più righe o colonne

  1. Posizionate il puntatore sul margine sinistro di una riga o sul margine superiore di una colonna.
  2. Quando il puntatore assume la forma di una freccia di selezione, fate clic per selezionare una riga o una colonna oppure trascinate il mouse per selezionare più righe o colonne.
    Selezionare una riga

Selezionare una colonna singola

  1. Fate clic nella colonna.
  2. Fate clic sul menu dell'intestazione della colonna, quindi selezionate Seleziona colonna.

Selezionare una cella singola

  1. Effettuate una delle operazioni seguenti:

    • Fate clic nella cella, quindi selezionate il tag <td> nel selettore di tag presente nell'angolo inferiore sinistro della finestra del documento.
    • Tenete premuto il tasto Ctrl (Windows) o Comando (Macintosh) e fate clic nella cella.

Selezionare una riga di celle o un blocco rettangolare di celle

Effettuate una delle operazioni seguenti:
  • Trascinate il mouse da una cella a un'altra.

  • Fate clic in una cella, fate clic tenendo premuto il tasto Ctrl (Windows) o Comando (Macintosh) nella stessa cella per selezionarla, quindi fate clic su un'altra cella tenendo premuto il tasto Maiusc.

Selezionare un blocco di celle

Selezionare celle non adiacenti

Tenete premuto il tasto Ctrl (Windows) o Comando (Macintosh) e fate clic sulle celle, righe o colonne che desiderate selezionare.

Al clic del mouse, gli elementi già selezionati vengono eliminati dalla selezione, mentre tutti quelli non selezionati vengono aggiunti alla selezione corrente.

Modificare il colore di evidenziazione degli elementi di tabella

  1. Selezionate Modifica > Preferenze (Windows) o Dreamweaver > Preferenze (Macintosh).
  2. Selezionate Evidenziazione dall'elenco Categoria a sinistra, effettuate una delle operazioni seguenti e fate clic su OK.
    • Per modificare il colore di evidenziazione degli elementi della tabella, fate clic sulla casella del colore delle aree modificabili, quindi selezionate un colore di evidenziazione utilizzando l'apposito selettore oppure inserite il valore esadecimale del colore di evidenziazione desiderato nella casella di testo.

    • Per attivare o disattivare l'evidenziazione per gli elementi di tabella, selezionate o deselezionate l'opzione Mostra per mouseover.

    Nota:

    queste opzioni influiscono su tutti gli oggetti che Dreamweaver evidenzia quando il puntatore viene spostato su di esse.

Impostare le proprietà della tabella

Potete modificare le tabelle utilizzando la finestra di ispezione Proprietà.

  1. Selezionate una tabella.
  2. Nella finestra di ispezione Proprietà (Finestra > Proprietà), modificate le proprietà nel modo desiderato.
    Proprietà di tabella
    Proprietà di tabella

    ID tabella

    L'ID della tabella.

    Righe e Colonne

    Il numero di righe e di colonne della tabella.

    La

    La larghezza della tabella in pixel o sotto forma di percentuale rispetto alla larghezza della finestra del browser.

    Nota:

    in genere, non è necessario impostare l'altezza di una tabella.

    MargCell

    Il numero di pixel tra il contenuto e i bordi delle celle.

    SpazCell

    Il numero di pixel tra celle adiacenti della tabella.

    Allinea

    Specifica la posizione in cui viene visualizzata la tabella rispetto agli altri elementi dello stesso paragrafo, ad esempio il testo o le immagini.

    A sinistra allinea la tabella a sinistra degli altri elementi in modo che il testo dello stesso paragrafo venga disposto intorno alla tabella a destra, A destra allinea la tabella a destra degli altri elementi con il testo intorno alla tabella a sinistra, mentre Al centro centra la tabella e dispone il testo sopra e/o sotto la tabella. Predefinito specifica l'allineamento predefinito del browser.

    Nota:

    Se si specifica l'allineamento predefinito, accanto alla tabella non viene visualizzato altro contenuto. Per visualizzare una tabella accanto ad altro contenuto, utilizzate l'allineamento A sinistra o A destra.

    Bordo

    Specifica la larghezza in pixel dei bordi della tabella.

    Nota:

    Se non assegnate dei valori espliciti alle opzioni Bordo, MargCell e SpazCell, la maggior parte dei browser visualizza la tabella come se il bordo e il margine celle fossero impostati su 1 e la spaziatura celle su 2. Per far sì che i browser visualizzino la tabella senza spaziatura o margine delle celle, impostate Bordo, MargCell e SpazCell su 0. Per visualizzare i bordi delle celle e della tabella quando l'opzione Bordo è impostata su 0, selezionate Visualizza > Riferimenti visivi > Bordi delle tabelle.

    Classe

    Imposta una classe CSS nella tabella.

    Nota:

    potrebbe essere necessario espandere la finestra di ispezione Proprietà tabella per visualizzare le opzioni seguenti. Per espandere la finestra di ispezione Proprietà tabella, fate clic sulla freccia di espansione situata nell'angolo inferiore destro.

    Annulla larghezza celle e Annulla altezze celle

    e Annulla altezza celle consentono di eliminare dalla tabella tutti i valori di altezza delle righe o di larghezza delle colonne specificati.

    Converti larghezza celle in pixel

    e Converti altezze tabella in pixel consentono di convertire la larghezza o l'altezza di ciascuna colonna della tabella (e la larghezza dell'intera tabella) nella larghezza corrente espressa in pixel.

    Converti larghezza celle in percentuali

    e Converti altezze tabella in percentuali consentono di convertire la larghezza o l'altezza di ciascuna colonna della tabella (e la larghezza dell'intera tabella) nella larghezza corrente espressa come percentuale della larghezza della finestra del documento.

    Se avete inserito un valore in una casella di testo, premete Tab o Invio (Windows) oppure Invio (Macintosh) per applicarlo.

Impostare le proprietà di celle, righe e colonne

Potete anche utilizzare la finestra di ispezione Proprietà per modificare le celle e le righe di una tabella.

  1. Selezionate la colonna o la riga.
  2. Nella finestra di ispezione Proprietà (Finestra > Proprietà), impostate le opzioni seguenti:

    Orizz

    Specifica l'allineamento orizzontale del contenuto di una cella, riga o colonna. Potete allineare il contenuto a sinistra, a destra o al centro delle celle oppure potete specificare l'allineamento predefinito del browser (generalmente, a sinistra per le celle normali e al centro per le celle delle intestazioni).

    Vert

    Specifica l'allineamento verticale del contenuto di una cella, riga o colonna. Il contenuto può essere allineato in alto, al centro, in basso o alla linea di base oppure in base all'impostazione predefinita del browser (generalmente, al centro).

    Larg. e Alt.

    La larghezza e l'altezza delle celle selezionate espresse in pixel o come percentuale della larghezza o dell'altezza dell'intera tabella. Per specificare una percentuale, inserite il simbolo di percentuale (%) dopo il valore. Lasciate vuoto il campo (impostazione predefinita) per fare in modo che venga automaticamente applicata la larghezza o l'altezza appropriata in base al contenuto della cella e alla larghezza e all'altezza delle altre colonne e righe.

    Per impostazione predefinita, vengono applicate un'altezza di riga e una larghezza di colonna adatte all'immagine di larghezza maggiore o alla riga di testo di lunghezza maggiore contenuta nella colonna. È per questo motivo che una colonna talvolta diventa molto più larga delle altre quando viene riempita con un contenuto.

    Nota:

    potete specificare l'altezza come percentuale dell'altezza totale della tabella, ma la riga potrebbe non essere visualizzata con l'altezza specificata nei browser.

    Sf

    Il colore di sfondo di una cella, colonna o riga, scelto mediante il selettore colore.

    Unisci celle

    Consente di combinare le celle, le righe o le colonne selezionate e creare un'unica cella. Potete unire solo le celle che formano un blocco rettangolare o lineare.

    Dividi cella

    Suddivide una cella creando due o più celle. Potete dividere una sola cella alla volta. Se sono selezionate più celle, il pulsante è disattivato.

    No a capo

    Impedisce il ritorno a capo mantenendo tutto il testo della cella su una riga singola. Se l'opzione è attivata, le celle si allargano in modo da contenere tutti i dati digitati o incollati in una cella. Normalmente, le celle si espandono orizzontalmente in modo da contenere la parola più lunga o l'immagine più larga della cella, quindi si espandono verticalmente per contenere il contenuto rimanente.

    Intest

    Formatta le celle selezionate come intestazioni di tabella. Per impostazione predefinita, il contenuto delle celle di intestazione di una tabella è in grassetto e centrato.

    Nota:

    Le larghezze e le altezze possono essere espresse in pixel o percentuali e convertite tra queste due unità di misura.

    Nota:

    quando impostate le proprietà in una colonna, Dreamweaver modifica gli attributi del tag td corrispondente a ciascuna cella della colonna. Tuttavia, quando impostate determinate proprietà per una riga, Dreamweaver cambia gli attributi del tag tr invece di cambiare quelli di ciascun tag td nella riga. Se desiderate applicare lo stesso formato a tutte le celle di una riga, è consigliabile applicare il formato al tag tr in modo da ottenere un codice HTML più chiaro e conciso.

  3. Premete Tab o Invio per applicare il valore.

Formattare tabelle e celle

Potete cambiare l'aspetto delle tabelle impostando le proprietà della tabella e delle celle oppure applicando una formattazione predefinita. Prima di impostare le proprietà della tabella e delle celle, tenete presente che l'ordine di priorità per la formattazione è il seguente: celle, righe, tabelle.

Nota:

Per formattare il testo all'interno di una cella di tabella, utilizzate le stesse procedure con cui si formatta un testo esterno alla tabella.

Modificare il formato di tabelle, righe, celle o colonne

  1. Selezionate una tabella, cella, riga o colonna.
  2. Nella finestra di ispezione Proprietà (Finestra > Proprietà), fate clic sulla freccia di espansione situata nell'angolo inferiore destro e modificate le proprietà nel modo desiderato.
  3. Apportate le modifiche necessarie alle proprietà.

    Per ulteriori informazioni sulle opzioni, fate clic sull'icona Aiuto nella finestra di ispezione Proprietà.

    Nota:

    quando impostate le proprietà in una colonna, Dreamweaver modifica gli attributi del tag td corrispondente a ciascuna cella della colonna. Quando invece impostate alcune proprietà per una riga, Dreamweaver modifica gli attributi del tag tr anziché modificare gli attributi di ciascun tag td della riga. Se desiderate applicare lo stesso formato a tutte le celle di una riga, è consigliabile applicare il formato al tag tr in modo da ottenere un codice HTML più chiaro e conciso.

Aggiungere o modificare i valori di accessibilità di una tabella nella vista Codice

Modificate gli attributi appropriati nel codice.
Nota:

Per individuare velocemente i tag nel codice, fate clic nella tabella, quindi selezionate il tag <table> nel selettore di tag nella parte inferiore della finestra del documento.

Aggiungere o modificare i valori di accessibilità di una tabella nella vista Progettazione

  • Per modificare la didascalia della tabella, evidenziatela e digitate una nuova didascalia.
    • Per modificare l'allineamento della didascalia, posizionate il punto di inserimento nella didascalia, fate clic con il pulsante destro del mouse (Windows) o fate clic tenendo premuto il tasto Ctrl (Macintosh), quindi selezionate Modifica codice tag.

    • Per modificare il sommario della tabella, fate clic con il pulsante destro del mouse (Windows) o fate clic tenendo premuto il tasto Ctrl (Macintosh), quindi selezionate Modifica codice tag.

Ridimensionamento di tabelle, colonne e righe

Ridimensionamento delle tabelle

Potete cambiare le dimensioni di un'intera tabella oppure di singole righe e colonne. Quando ridimensionate un'intera tabella, variano proporzionalmente le dimensioni di tutte le celle. Se per le celle di una tabella sono state specificate esplicitamente le larghezze e le altezze, il ridimensionamento della tabella cambia la dimensione visiva delle celle nella finestra del documento, ma non modifica le larghezze e le altezze delle celle specificate.

Potete ridimensionare una tabella trascinando una delle sue maniglie di selezione. Dreamweaver visualizza la larghezza della tabella con il menu dell'intestazione nella parte superiore o inferiore della tabella, quando la tabella è selezionata o il punto di inserimento si trova al suo interno.

Talvolta la larghezza delle colonne impostata nel codice HTML non corrisponde alla larghezza visualizzata sullo schermo. In tal caso, potete pareggiare le larghezze. Le larghezze delle tabelle e delle colonne e i menu delle intestazioni vengono visualizzati in Dreamweaver per agevolare la definizione del layout delle tabelle. Potete attivare e disattivare larghezze e menu in base alle vostre esigenze.

Ridimensionamento delle colonne e righe

Potete modificare la larghezza di una colonna o l'altezza di una riga nella finestra di ispezione Proprietà o trascinando i bordi della colonna o della riga. Se si verificano dei problemi durante il ridimensionamento, annullate la larghezza delle colonne o l'altezza delle righe e ricominciare.

Nota:

potete inoltre modificare i valori di larghezza e altezza direttamente nel codice HTML utilizzando la vista Codice.

Dreamweaver visualizza le larghezze delle colonne con i menu delle intestazioni delle colonne nella parte superiore o inferiore delle colonne quando la tabella è selezionata o quando il punto di inserimento si trova al suo interno. Potete attivare o disattivare tali menu in base alle vostre esigenze.

Ridimensionare una tabella

Selezionate la tabella. Se quando selezionate la tabella siete nella vista Dal vivo, viene mostrato Visualizzazione elemento. Fate clic sull'icona del panino per accedere alla modalità di formattazione della tabella.

  • Per ridimensionare la tabella orizzontalmente, trascinate la maniglia di ridimensionamento situata sul lato destro.

  • Per ridimensionare la tabella verticalmente, trascinate la maniglia di ridimensionamento situata sul lato inferiore.

  • Per ridimensionare la tabella in entrambe le direzioni, trascinate la maniglia di selezione situata nell'angolo inferiore destro.

Per uscire dalla modalità di formattazione della tabella nella vista Dal vivo, premete Esc o fate clic fuori dalla tabella. Potete utilizzare le opzioni del menu Modifica > Tabella per modificare ulteriormente la tabella.

Nota: le opzioni disponibili nel menu Modifica > Tabella sono diverse se selezionate l'intera tabella o una singola cella. Nella vista Dal vivo, Visualizzazione elemento mostra "tabella" quando è selezionata l'intera tabella e "td" quando è selezionata una determinata cella. Per passare dalla modalità di formattazione della cella a quella della tabella, fate clic sul bordo della tabella.

Modificare la larghezza di una colonna lasciando inalterata la larghezza complessiva della tabella

  1. Nella vista Progettazione, trascinate il bordo destro della colonna da modificare.

    Poiché anche la larghezza della colonna adiacente viene modificata, le colonne soggette al ridimensionamento sono in realtà due. Le indicazioni visive mostrano come verranno regolate le colonne. La larghezza complessiva della tabella non cambia.

    Modificare la larghezza della colonna mantenendo la larghezza della tabella

    Nota:

    nelle tabelle la cui larghezza è basata sulla percentuale e non sui pixel, se trascinate il bordo destro dell'ultima colonna di destra, viene modificata la larghezza dell'intera tabella ingrandendo o riducendo proporzionalmente tutte le colonne.

Modificare la larghezza di una colonna lasciando inalterata la dimensione delle altre colonne

  1. Nella vista Progettazione, tenete premuto il tasto Maiusc e trascinate il bordo della colonna.

    La larghezza di una colonna cambia. Le indicazioni visive mostrano come vengono organizzate le colonne; la larghezza complessiva della tabella viene modificata per adattare la colonna soggetta al ridimensionamento.

    Modificare la larghezza di una colonna lasciando inalterata la larghezza delle altre colonne

Modificare visivamente l'altezza di una riga

Trascinate il bordo inferiore della riga.

Pareggiare la larghezza delle colonne specificata nel codice con la larghezza visualizzata

  1. Fate clic in una cella.
  2. Fate clic sul menu dell'intestazione della tabella, quindi selezionate Pareggia tutte le larghezze.

    Dreamweaver reimposta la larghezza specificata nel codice in modo che corrisponda alla larghezza visiva.

Annullare tutte le larghezze e le altezze impostate in una tabella

  1. Selezionate la tabella.
  2. Effettuate una delle operazioni seguenti:
    • Selezionate Modifica > Tabella > Annulla larghezza celle oppure Modifica > Tabella > Annulla altezza celle.

    • Nella finestra di ispezione Proprietà (Finestra > Proprietà), fate clic sul pulsante Annulla altezza celle o Annulla larghezza celle .

    • Fate clic sul menu dell'intestazione della tabella, quindi selezionate Annulla tutte le altezze o Annulla tutte le larghezze.

Annullare la larghezza impostata di una colonna

Fate clic nella colonna, quindi sul menu dell'intestazione della colonna e selezionate Annulla larghezza celle.

Attivare o disattivare le larghezze e dei menu delle tabelle e delle colonne nella vista Progettazione

Selezionate Visualizza > Opzioni vista Progettazione > Riferimenti visivi > Larghezze tabelle.

Aggiungere ed eliminare righe e colonne

Per aggiungere ed eliminare righe e colonne, utilizzate Elabora > Tabella oppure i menu dell'intestazione delle colonne.

Nota:

Se premete Tab nell'ultima cella, viene automaticamente aggiunta una riga alla tabella.

Aggiungere una singola riga o colonna

Fate clic in una cella ed effettuate una delle seguenti operazioni:
  • Selezionate Modifica > Tabella > Inserisci riga o Modifica > Tabella > Inserisci colonna.

    Viene visualizzata una riga al di sopra del punto di inserimento o una colonna a sinistra del punto di inserimento.

  • Fate clic sul menu dell'intestazione della colonna, quindi selezionate Inserisci colonna a sinistra o Inserisci colonna a destra.

     

Aggiungere più righe o colonne

  1. Fate clic in una cella.
  2. Selezionate Modifica > Tabella > Inserisci righe o colonne, completate la finestra di dialogo e fate clic su OK.

    Inserisci

    Indica se devono essere inserite righe o colonne.

    Numero di righe o Numero di colonne

    Il numero di righe o colonne da inserire.

    Posizione

    Specifica se le nuove righe o colonne devono essere visualizzate sopra o sotto la riga o la colonna della cella selezionata.

Eliminare una riga o una colonna

Effettuate una delle operazioni seguenti:
  • Fate clic in una cella all'interno della riga o colonna che desiderate eliminare, quindi selezionate Modifica > Tabella > Elimina riga o Modifica > Tabella > Elimina colonna.

  • Selezionate un'intera riga o colonna, quindi premete Canc.

  • Nella finestra di ispezione Proprietà (Finestra > Proprietà), effettuate una delle seguenti operazioni:
    • Per aggiungere o eliminare delle righe, aumentare o ridurre il valore Righe.
    • Per aggiungere o eliminare delle colonne, aumentare o ridurre il valore Colonne.
Nota:

se vengono eliminate righe o colonne che contengono dati, in Dreamweaver non viene visualizzato alcun messaggio di avviso.

Dividere e unire le celle

Per dividere o unire tra loro delle celle, usate la finestra di ispezione Proprietà o le opzioni del sottomenu Modifica > Tabella.

Unire due o più celle di una tabella

  1. Selezionate celle contigue e disposte in forma di rettangolo.

    Nell'illustrazione seguente, la selezione è di forma rettangolare e consente l'unione delle celle.

    Le celle possono essere unite in un rettangolo di celle

    Al contrario, la selezione dell'illustrazione seguente non è di forma rettangolare e quindi non potete unire le celle.

    Le celle non possono essere unite se la selezione non è di forma rettangolare

  2. Effettuate una delle operazioni seguenti:
    • Selezionate Modifica > Tabella > Unisci celle.

    • Nella finestra di ispezione Proprietà HTML espansa (Finestra > Proprietà), fate clic su Unisci celle.

    Nota:

    se il pulsante non è visualizzato, fate clic sulla freccia di espansione nell'angolo inferiore destro della finestra di ispezione Proprietà per visualizzare tutte le opzioni.

    Tutti i dati contenuti nelle singole celle vengono spostati nella singola cella risultante dall'unione, alla quale vengono applicate le proprietà della prima cella selezionata.

Dividere una cella

  1. Fate clic nella cella ed effettuate una delle seguenti operazioni:
    • Selezionate Modifica > Tabella > Dividi cella.

    • Nella finestra di ispezione Proprietà HTML espansa (Finestra > Proprietà), fate clic su Dividi cella.

    Nota:

    se il pulsante non è visualizzato, fate clic sulla freccia di espansione nell'angolo inferiore destro della finestra di ispezione Proprietà per visualizzare tutte le opzioni.

  2. Nella finestra di dialogo Dividi cella, specificate il tipo di divisione:

    Dividi cella in

    Consente di specificare se la cella deve essere divisa in righe o colonne.

    Numero di righe/Numero di colonne

    Consente di specificare il numero di righe o colonne in cui deve essere divisa la cella.

Aumentare o ridurre il numero di righe o colonne occupate da una cella

Effettuate una delle operazioni seguenti:
  • Selezionate Modifica > Tabella > Aumenta estensione riga o Modifica > Tabella > Aumenta estensione colonna.

  • Selezionate Modifica > Tabella > Riduci estensione riga o Modifica > Tabella > Riduci estensione colonna.

Copiare, incollare ed eliminare celle

Potete copiare, incollare o eliminare una o più celle contemporaneamente mantenendone la formattazione.

Le celle possono essere incollate in corrispondenza del punto di inserimento oppure al posto di una selezione all'interno di una tabella esistente. Per incollare più celle di tabella, il contenuto degli Appunti deve essere compatibile con la struttura della tabella o della selezione all'interno della tabella in cui desiderate incollare le celle.

Tagliare o copiare celle

  1. Selezionate una o più celle contigue e disposte in forma di rettangolo.

    Nell'illustrazione seguente, la selezione è di forma rettangolare e consente di tagliare o copiare le celle.

    Le celle possono essere tagliate o copiate in un rettangolo di celle

    Al contrario, la selezione dell'illustrazione seguente non è di forma rettangolare e non è quindi possibile tagliare o copiare le celle.

    Le celle non possono essere tagliate o copiate se la selezione non è di forma rettangolare

  2. Selezionate Modifica > Taglia o modifica > Copia.
    Nota:

    se selezionate un'intera riga o colonna e selezionate Modifica > Taglia, viene eliminato dalla tabella non solo il contenuto delle celle, ma anche l'intera riga o colonna.

Incollare celle di tabella

  1. Selezionate la destinazione delle celle.
    • Per sostituire delle celle esistenti con le celle da incollare, selezionate una serie di celle esistenti con lo stesso formato delle celle contenute negli Appunti. (Ad esempio, se copiate o incollate un blocco di celle 3 x 2, potete selezionare un altro blocco di celle 3 x 2 da sostituire.)

    • Per incollare un'intera riga di celle sopra una cella particolare, fate clic nella cella.

    • Per incollare un'intera colonna di celle a sinistra di una cella particolare, fate clic nella cella.

    Nota:

    se gli Appunti non contengono un'intera riga o colonna di celle e fate clic in una cella per incollare le celle contenute negli Appunti, è possibile (a seconda della posizione all'interno della tabella) che la cella su cui avete fatto clic e le celle adiacenti vengano sostituite dalle celle incollate.

    • Per creare una nuova tabella con le celle incollate, posizionate il punto di inserimento all'esterno della tabella.
  2. Selezionate Modifica > Incolla.

    Se incollate intere righe o colonne in una tabella esistente, queste vengono aggiunte alla tabella. Se incollate una singola cella, il contenuto della cella selezionata viene sostituito. Se l'operazione viene effettuata all'esterno di una tabella, le righe, colonne o celle vengono utilizzate per definire una nuova tabella.

Eliminare il contenuto di una o più celle senza alterarle

  1. Selezionate una o più celle.
    Nota:

    è importante che la selezione non consista completamente di intere righe o colonne.

  2. Premere Canc.

    Nota:

    se selezionate soltanto righe o colonne intere e selezionate Modifica > Cancella o premete Canc, vengono eliminate dalla tabella le righe o colonne intere e non solo il loro contenuto.

Eliminare righe o colonne contenenti celle unite

  1. Selezionate la riga o la colonna.
  2. Selezionate Modifica > Tabella > Elimina riga o Modifica > Tabella > Elimina colonna.

Nidificare tabelle

Una tabella nidificata è una tabella che si trova all'interno di una cella di un'altra tabella. Potete formattare una tabella nidificata come qualunque altra tabella, con l'unica limitazione che la tabella nidificata non deve superare la larghezza della cella che la contiene.

  1. Fate clic in una cella della tabella esistente.
  2. Selezionate Inserisci > Tabella, impostate le opzioni della finestra di dialogo e fate clic su OK.

Ordinare le tabelle

Potete ordinare le righe di una tabella in base al contenuto di un'unica colonna È anche possibile ordinare una tabella in modo più complesso utilizzando come criterio il contenuto di due colonne.

Non è possibile ordinare tabelle che contengono gli attributi colspan o rowspan, ossia tabelle che contengono celle unite.

  1. Selezionate la tabella o fate clic in una cella.
  2. Selezionate Modifica > Tabella > Ordina tabella, impostate le opzioni della finestra di dialogo e fate clic su OK.

    Ordina per

    Specifica i valori di colonna in base ai quali devono essere ordinate le righe della tabella.

    Ordine

    Specifica se deve essere applicato un ordine alfabetico o numerico e ascendente (dalla A alla Z, dal numero più basso al numero più alto) o discendente.

    Se le colonne contengono numeri, selezionate Ordine numerico. Se selezionate l'ordine alfabetico per una colonna contenente numeri a una e due cifre, l'ordine non rispetterà la sequenza numerica (ad esempio, sarà 1, 10, 2, 20, 3, 30 anziché 1, 2, 3, 10, 20, 30).

    Poi per/Ordine

    Specifica l'ordine da applicare a un ordinamento secondario in base a un'altra colonna. Specificate la colonna per l'ordinamento secondario nel menu a comparsa Poi per, quindi il tipo di ordinamento nei menu Ordine.

    Includi la prima riga nell'ordinamento

    Specifica se la prima riga della tabella deve essere inclusa nell'ordinamento. Se invece la prima riga non deve essere spostata, non selezionate questa opzione.

    Ordina righe intestazione

    Specifica di ordinare tutte le righe della sezione thead della tabella in base agli stessi criteri specificati per le righe del corpo principale della tabella. (Le righe thead non vengono spostate dalla sezione thead e rimangono visualizzate nella parte superiore della tabella anche dopo l'ordinamento.) Per informazioni sul tag thead, vedete il pannello Riferimenti (selezionate Aiuto > Riferimenti).

    Ordina righe piè di pagina

    Specifica di ordinare tutte le righe della sezione tfoot della tabella in base agli stessi criteri specificati per le righe della tabella. (Le righe tfoot non vengono spostate dalla sezione tfoot e rimangono visualizzate nella parte inferiore della tabella anche dopo l'ordinamento.) Per informazioni sul tag tfoot, vedete il pannello Riferimenti (selezionate Aiuto > Riferimenti).

    Mantieni invariati i colori di tutte le righe al termine dell'ordinamento

    Specifica che gli attributi di riga della tabella, ad esempio il colore, devono rimanere associati allo stesso contenuto dopo l'ordinamento. Se alle righe della tabella è stata applicata l'alternanza di due colori, non selezionate questa opzione in modo che l'alternanza venga mantenuta nella tabella ordinata. Se gli attributi di riga sono specifici del contenuto di ciascuna riga, selezionate questa opzione in modo che tali attributi rimangano associati alle righe corrette nella tabella ordinata.

Ottieni supporto in modo più facile e veloce

Nuovo utente?