Inizia con HTML: Tabelle

HTML, abbreviazione di HyperText Markup Language. È uno standard che funge da riferimento per lo sviluppo delle pagine web nelle sue diverse versioni, definisce una struttura di base e un codice (chiamato codice HTML) per definire il contenuto di una pagina web, come testo, immagini, video, tra gli altri. Per cominciare a capire come viene definita la struttura di questo linguaggio, in questo tutorial inizieremo conoscendo le etichette con cui vengono gestite le tabelle, che sono molto utili soprattutto quando si costruiscono le strutture di newsletter e mailing.
L'obiettivo di questo tutorial è fornire una spiegazione che aiuti i grafici a comprendere nel modo più semplice possibile la struttura e la logica dei documenti HTML per ottenere le conoscenze di base che consentiranno loro di generare file in questa lingua.

Requisiti

- Possedere un editor di codice come Dreamweaver CS6, Blocco note ++, testo sublime tra gli altri disponibili su Internet.
- Avere un browser Web installato come Chrome, Firefox, Opera, Safari, Edge o Internet Explorer.
Passaggio 1: conoscere le etichette per la creazione di tabelle
con questa etichetta definiamo l'inizio della tabella nella struttura HTML.
permette la creazione di una riga per la tabella
rappresentano l'intestazione delle colonne, queste colonne sono costituite da celle.
<>> è la rappresentazione delle celle che andranno a trovarsi nelle righe della tabella.
Queste sono tutte le etichette che ci serviranno per creare le tabelle, nel passaggio successivo impareremo come vengono dichiarate all'interno del codice e il loro ordine.
Passaggio 2: dichiarazione logica delle etichette.
È importante sapere che in HTML la stragrande maggioranza dei tag deve essere aperta, che è proprio quando li dichiariamo e inoltre devono essere chiusi, il seguente esempio illustra questo concetto:

Come puoi vedere, ogni etichetta deve avere la sua apertura e chiusura. Si differenziano principalmente per la barra "/" con cui si chiude l'etichetta. Ogni volta che viene creato un tag, è obbligatorio dichiararne la chiusura allo stesso modo.
Passaggio 3: dichiarazione gerarchica delle etichette.
L'etichetta È il primo che si dichiara per indicare la creazione di una tabella, di conseguenza per iniziare a creare le celle che conterranno le informazioni da visualizzare.
Le tabelle sono costituite da colonne e righe.

Facendo attenzione all'ordine gerarchico che ogni etichetta deve avere, creeremo la tabella e introdurremo le righe che ci serviranno per la tabella nell'immagine mostrata sotto:

Il codice nella tabella dovrebbe essere simile a questo:

Sebbene le righe della tabella siano già definite, è necessario creare le celle che compongono le colonne della tabella. L'immagine seguente illustra questo concetto:

Il codice nella tabella dovrebbe essere simile a questo:

Passaggio 4: aggiunta di contenuti alle celle
Ogni tag [colore = # 7030a0] [/ color] è equivalente a una cella nella nostra tabella, quindi è qui che è possibile aggiungere le informazioni. Cambieremo nella prima etichetta [color = # 44546a] [/ color] ha dichiarato la riga all [color = # 7030a0] [/ color] per tag di intestazione [color = # 002060][/Colore]. Nel [colore = # 7030a0][/ color] del resto delle righe aggiungiamo contenuto di esempio. Il codice HTML Dovrebbe sembrare come questo:

 
 
 
Articolo
 
Nome
 
Cognome
 

 
 
1
 
Pedro
 
Rose
 

 
 
2
 
John
 
Fonti
 

Passaggio 5: salva il documento in HTML e visualizza il file
Nel programma di modifica del codice andiamo al menu File / Salva mentre salviamo il documento in formato .html

Successivamente apriamo il documento nel browser di nostra preferenza:

La tabella che abbiamo creato dovrebbe assomigliare all'immagine qui sotto.

Finora abbiamo appreso il nome e la funzione delle etichette HTML per costruire tabelle, il loro ordine gerarchico, la loro disposizione logica e per aggiungere contenuto ad esse. Ora siamo pronti per aggiungere attributi grafici alle tabelle.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo