• 262

  • 0

Vota

5

Tabella in HTML

Segnalibro

In questo articolo scoprirai il momento più importante durante la creazione del tuo sito: le tabelle!
Penso che tu abbia prestato attenzione al fatto che negli articoli precedenti non ci occupavamo dell'allineamento, a meno che, ovviamente, non considerassimo l'allineamento sul bordo sinistro, centrale e destro del browser. In realtà, questo è estremamente insufficiente per un bel design di pagina. Un esempio lampante di questo è la nostra forma, che abbiamo creato nel precedente articolo. Come puoi vedere, il modulo è MOLTO irregolare. Qui, proprio per allineare gli elementi della pagina in modo più accurato rispetto ai soli bordi del browser, sono state inventate le tabelle html.
Cominciamo creando una semplice tabella html.
Ma prima di farlo, ripristiniamo il codice che ci rimane dopo aver creato il modulo, ovvero questo: Creare moduli in HTML
Il principio di creazione di tabelle in html è il seguente: viene creata una tabella, quindi viene creata una riga, quindi tutte le colonne di una determinata riga, quindi la riga successiva, di nuovo tutte le colonne successive di quella data e così via.
La tabella viene creata utilizzando il tag <table> e termina con il tag </table>. Questo, penso, è comprensibile. Una tabella ha righe e colonne, quindi è necessario crearle. Ora, secondo il principio della creazione di tabelle, è necessario creare una riga. Una stringa viene creata utilizzando il tag <tr>. Di conseguenza, un segnale per terminare la linea è il tag di chiusura </tr>. All'interno del tag <tr>, è necessario creare colonne create utilizzando il tag <td>. E già all'interno di questo tag ci sono quegli elementi che dovrebbero trovarsi all'interno di questa cella. Dopo aver impilato tutti gli elementi, puoi chiudere la colonna usando il tag </td>. Successivamente, si apre un nuovo tag <td>. Gli elementi vengono nuovamente inseriti al suo interno, dopo di che </td> viene chiuso. Questo è il segnale alla fine della seconda colonna. E così via, tutte le colonne di cui hai bisogno. Alla fine, la linea è chiusa con il tag </tr>. Quindi la riga successiva e così via. E termina con il tag di chiusura </table>.
Per renderlo più chiaro, scriviamo le seguenti righe immediatamente dopo il modulo:

 

(1, 1) (1, 2)
(2, 1) (2, 2)

 

Qui abbiamo creato una tabella composta da due righe (due tag <tr>) e due colonne (due tag <td> in ciascun tag <tr>). Come elemento, ho deciso di prendere il testo semplice sotto forma di coordinate di cella. Di conseguenza, la prima cifra indica il numero di riga e la seconda indica il numero di colonna. Era un esempio lampante di un tavolo.

Ora parliamo di attributi. Innanzitutto, gli attributi del tag <table>.

 

1) L'attributo " border", il cui valore imposta lo spessore della cornice della tabella in pixel. Per impostazione predefinita, non esiste alcun frame. Impostiamo il valore di questo attributo su "2".

2) Gli attributi " width" e " height" specificano rispettivamente la larghezza e l'altezza della tabella. È possibile specificare la dimensione, sia in unità assolute (pixel, px), sia in relazione (percentuale,%). La dimensione relativa, che buona, è che si adatta sempre a qualsiasi risoluzione del monitor dell'utente e di qualsiasi browser. E quelli assoluti sono buoni perché con qualsiasi browser e qualsiasi risoluzione del monitor non ci saranno sorprese con il design associato, ad esempio, con elementi di stretching (se il monitor è widescreen, per esempio). Quale scegliere: dipende da te, ma personalmente preferisco principalmente le dimensioni relative, a volte diluendo con dimensioni assolute, a seconda della situazione. Impostiamo il valore degli attributi "width" e "height" su "30%".

Penso di averti dato abbastanza attributi. Quindi il tag <table> è simile al seguente:

Guarda nel browser come appare la nostra tabella ora.

 

(1, 1) (1, 2)
(2, 1) (2, 2)

 

Ora parliamo degli attributi del tag <tr>:
1) L'attributo "height ". Si noti che il tag <tr> non ha l'attributo "width ", tuttavia, questo è logico, perché il tag <tr> è responsabile della stringa e quindi dell'altezza. E le colonne sono responsabili della larghezza.
In realtà, anche l'attributo "height" non è realmente utilizzato, quindi possiamo dire che il tag <tr> non ha alcun attributo.
Il più ricco nel numero di attributi è il tag <td>, che è responsabile della cella della tabella:
1) L'attributo "width". La spiegazione è la stessa dell'attributo del tag <tr>. Di conseguenza, non esiste un attributo "altezza".
2) Attributo "colspan ". Il valore di questo attributo indica il numero di colonne occupate da questa cella. Inserisci questo attributo nel valore "2", dove abbiamo le coordinate "(1, 1)". Guarda il risultato.
3) L'attributo "rowspan". Il valore di questo attributo indica il numero di righe occupate da questa cella. Impostare questo attributo su "2", dove le coordinate sono "(1, 2)". Guarda il risultato.
4) Attributo "align". Il valore di questo attributo indica che l'elemento è allineato orizzontalmente all'interno della cella. Esistono tre valori: "left" (sinistra), "center" (centro), "right" (destra). L'impostazione predefinita è allineamento a sinistra. Allineamo le coordinate "(1, 1)" al centro e le coordinate "(2, 1)" a destra. Vedi il risultato
5) Attributo "valign". Il valore di questo attributo indica l'allineamento verticale dell'elemento all'interno della cella. Ancora una volta, ci sono solo tre valori: "top" (in alto), "middle" (in mezzo), "bottom" (in basso). Il valore predefinito è "middle". Cambiamo il valore di questo attributo sull'elemento (2, 1) in alto. E anche sull'elemento "(2, 2)" imposta il valore su "bottom". Guarda il risultato.
Quindi la tua tabella ha questo codice HTML:

 

 

In linea di principio, con la teoria tutto. Ma in pratica, devi imparare come applicare questa conoscenza. E come pratica, stiamo ora allineando la nostra forma. Per iniziare, elimina tutti i tag <br>, poiché ora il tag <tr> passerà a una nuova riga.

Ora mettiamo l'intero contenuto del modulo nella tabella, cioè subito dopo il tag <form> scriviamo il tag <table>, e immediatamente prima del tag </form> chiudiamo la tabella usando il tag </table> (non dimenticare il principio di annidamento!). Consiglio di mettere temporaneamente una casella accanto alla tabella per vedere come tutto è allineato e come viene diviso lo spazio totale tra gli elementi della tabella.

Ora posizioniamo ogni riga del modulo in un tag <tr> separato. E creiamo due colonne: la prima per la descrizione dell'elemento e la seconda per l'elemento del modulo stesso. E così facciamo fino a <textarea>.

Con l'area di testo, lo facciamo: in primo luogo, la spiegazione (di seguito denominata etichetta) è stipata in una riga e la larghezza è suddivisa in due colonne. L'area di testo nella riga successiva della tabella e anche due colonne di larghezza. Inoltre, allineammo sia l'etichetta che l'area di testo al centro.

Quindi inseriamo tutto in una riga e una cella, ma questa cella sarà larga due colonne.

Questo è tutto ciò che devi sapere per un uso corretto delle tabelle, quindi devi solo riempire la tua mano. Ti dirò questo: la tabella è la funzione più utilizzata durante la creazione di una pagina HTML e quasi nessun sito può farne a meno. È vero, le tabelle sono l'argomento più difficile nella conoscenza di base dell'HTML, per cui è necessario esercitarsi e sbarazzarsi dello stereotipo secondo cui solo il testo può essere un elemento di una tabella (questo è ciò che ci è stato insegnato a scuola, nei libri di testo e in generale nella vita). E quando ti sbarazzi di questo stereotipo e capisci che un elemento può significare non solo testo, ma anche immagini, collegamenti, moduli, elementi del modulo e persino intere tabelle, allora puoi presumere che il lavoro sia fatto.

  • Creato il:
  • 2020-04-14 19:37:00
  • Visualizzazioni
  • 262

  • Comenti
  • 0

Recensioni mancante

La pubblicazione della recensione aviene dopo il controllo del administratore.



Condivide articolo


Altri articoli ...