Creazione di una tabella in HTML

Nelle tabelle è conveniente inserire i dati combinati tra loro da alcune dipendenze. Per creare tabelle in HTML, vengono utilizzati tag HTML speciali. Con il loro aiuto, puoi costruire una tabella di qualsiasi complessità. Inoltre, la pratica del layout tabellare è molto comune, consentendo di posizionare gli elementi in modo bello e conveniente su una pagina web.

Creazione della prima tabella

Apri l'editor di testo come al solito, crea un file HTML vuoto e incolla il seguente codice tra i tag:

  1 
  2 
  3 
  4 
  5 
  6 

Salva il documento. Apri il file. Se non ci sono errori di battitura ovunque, il browser produrrà il seguente risultato:

Ordiniamo il codice descritto:

1. tag annuncia al browser che è necessario creare una tabella.
2. L'attributo border definisce i bordi della tabella e il parametro 1 il loro spessore in pixel.
3. Con l'aiuto di imposta le righe della tabella.
4. Numero di tag determina il numero di colonne.
5. Numeri tra tag sono i contenuti delle celle.

Se vuoi lasciare la cella vuota, dovresti scrivere un carattere invisibile, ad esempio uno spazio, e non lasciarlo senza alcun contenuto. Questo è necessario per la corretta visualizzazione di una cella vuota da parte di tutti i browser. Alcuni di essi potrebbero distorcere il risultato, se ciò non avviene.

Il contenuto delle celle può essere assolutamente qualsiasi elemento dell'HTML: numeri, testo, immagini, le tabelle stesse e persino intere pagine. La cosa principale qui non è solo sapere come creare una tabella in HTML, ma anche osservare il nidificazione dei tag.

Imposta la dimensione

L'esempio sopra ha dato un tavolino, scomodo per la percezione visiva. È possibile adattare le dimensioni della tabella ai parametri richiesti utilizzando due attributi:

1. larghezza: imposta la larghezza.
2. altezza - imposta l'altezza.

I valori di questi attributi possono essere pixel o percentuali. Alcuni browser non funzionano correttamente con percentuali relative all'attributo height. Pertanto, dovresti testare il tuo codice in molti dei più comuni:

• IE.
• Mozilla Firefox.
• Opera.
• Konqueror.
• Safari.

Se la visualizzazione non è corretta, è necessario modificare il valore dell'altezza della tabella in percentuale in base al valore in pixel. La scelta a favore dei pixel può essere fatta anche perché un visitatore del tuo sito può entrare da un dispositivo dotato di un piccolo monitor (cellulare). Il testo nella tabella HTML sul monitor del telefono verrà adattato alle sue dimensioni. E se le percentuali sono impostate, la tabella sarà così piccola che sarà impossibile leggerla.

Usando gli attributi width e height, impostiamo le dimensioni: la larghezza della tabella HTML è 300 e l'altezza è di 200 pixel:

  1 
  2 
  3 
  4 
  5 
  6 

Di conseguenza, il browser mostrerà una tabella con le dimensioni di cui abbiamo bisogno:

posizionamento

Il significato di questa azione è quello di localizzare sia il contenuto delle celle che la posizione del tavolo stesso su una pagina web. Tuttavia, la tecnologia HTML nelle tabelle posizionate su una pagina Web è limitata alla loro posizione a sinistra (per impostazione predefinita), al centro e a destra utilizzando l'attributo align e i valori necessari per esso:

La sintassi è:

  ... 

In futuro, imparando la tecnologia CSS, imparerai come posizionare verticalmente gli elementi dei documenti web.

Per impostare la posizione dei contenuti della cella, gli stessi attributi con gli stessi valori vengono applicati al tag. :

  ...   ... 
  contenuto di celle 

Posiziona il nostro tavolo a destra e allinea il contenuto delle sue celle al centro:

  1 
  2 
  3 
  4 
  5 
  6 

Il risultato dovrebbe essere questo:

Concatenazione di stringhe

Per creare più celle di una riga in una cella, l'attributo colspan viene utilizzato con un valore uguale al numero di celle da unire. I seguenti tag vengono rimossi nel codice. insieme ai loro contenuti. Numero di tag da eliminare uguale al valore dell'attributo colspan meno uno.

Considera questa regola con l'esempio. Supponiamo di aver bisogno di creare una tabella al centro della pagina con numeri arbitrari della dimensione di 4 colonne e 3 righe. Quindi unire le celle 2 e 3 orizzontalmente nella seconda riga in modo che il browser produca il seguente risultato:

Il codice seguente implementerà questa tabella in un documento Web:

  11 
  20 
  4 
  14 
  58 
  36 
  80 
  19 
  10 
  15 
  29 

Nota il codice HTML nella tabella in cui sono combinate le due celle:

  58   36   80 

Poiché il valore del parametro colspan è 2, 1 tag è stato eliminato. seguendolo (2 - 1 = 1) con tutti i suoi contenuti. Se fosse necessario combinare tre celle, verranno rimosse 2 etichette. .

Unisci le colonne

Le celle verticali vengono combinate utilizzando l'attributo rowspan. Il valore numerico di esso determina il numero di celle da tagliare verticalmente. Questo argomento presenta le maggiori difficoltà per gli studenti.

Il seguente metodo è il più facile da capire: creare una tabella e numerare le celle con numeri diversi. Ad esempio:

Il codice della tabella sarà il seguente:

  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 

Eliminiamo i numeri a due cifre combinando le colonne con i numeri 6 e 10, 7 e 11, 8 e 12. Lasciare i numeri nelle celle combinate verticalmente: 6, 7 e 8.

Combina 6 e 10. Nel tag contenente il numero 6, prescrivi: e la struttura 10 cancellare affatto. Allo stesso modo, devi fare per le restanti coppie di numeri. Di conseguenza, il codice verrà trasformato come segue:

  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 

Il browser dovrebbe produrre la tabella di cui abbiamo bisogno:

Suggerimento: fino a quando non si ottiene un'azione automatica quando si combinano le colonne, utilizzare questo metodo utilizzando i numeri, sostituendoli con i dati desiderati.

Contenuto della cella

Come accennato in precedenza, gli elementi delle celle possono essere qualsiasi elemento HTML. Nella tabella, ad esempio, l'implementazione di una semplice tabella di frutta e dei loro fiori sarà conveniente:

Come puoi vedere, le celle in questa tabella contengono testo, immagini e un riempimento di colore di sfondo. Gli elementi della cella sono applicabili e tutti i tag HTML funzioneranno. La tabella può contenere anche collegamenti ipertestuali in tutte le loro forme (testo, collegamenti immagine, ecc.).

È particolarmente necessario stipulare il riempimento delle celle con il colore: poiché sono vuote, non contengono dati, è necessario registrare uno spazio vuoto: . In questo caso, la larghezza della cella potrebbe non corrispondere a quella richiesta. E quasi sempre succede. In questo caso, a questo tag L'attributo width viene applicato con il valore richiesto: .

Per la corretta visualizzazione del colore applicato al testo o allo sfondo, ci sono i cosiddetti colori sicuri in HTML. Una tabella dei loro codici può essere trovata su molti siti. Il colore sicuro dell'HTML non significa che possa danneggiare il computer, ma significa che verrà visualizzato sulla console di un visitatore del tuo sito futuro proprio come te lo intendi, senza distorsioni.

Intestazioni di tabella

Spesso è necessario intestare il tavolo. Questo viene fatto usando un tag coppia speciale. . Viene posizionato immediatamente dopo il tag.

In un browser, questa tabella sarà simile a questa:

Oltre ai nomi delle tabelle, usa i nomi di colonne o righe usando un tag. . Il testo nella tabella HTML racchiuso tra questi tag verrà visualizzato in grassetto. A questo tag, applichiamo l'attributo di fusione cella orizzontale colspan. Trasformiamo la tabella sopra come esempio, apportando modifiche al codice:

  Tabella con numeri 
  anche 
  dispari 
  2 
  1 
  4 
  3 
  6 
  5 

Di conseguenza, il browser mostrerà un'intestazione con un'intestazione di colonna:

Per creare intestazioni laterali quando sono elementi di una colonna specifica, il tag trova immediatamente dopo il tag prima del primo tag .

Documento web di layout di tabella

Questo è il modo più comune per creare pagine web. L'essenza del layout della tabella è di posizionare gli elementi nella pagina del sito in celle usando le tabelle. Allo stesso tempo, vengono prese parti separate del sito (footer, intestazione, corpo), che a loro volta possono anche essere celle. In pratica, la disposizione delle tabelle viene eseguita nella maggior parte dei casi in base al seguente algoritmo:

• il web designer prepara un layout del sito;
• utilizzando editor grafici o altro software, i singoli elementi del layout (pulsanti, immagini) vengono tagliati e diventano indipendenti;
• un programmatore web crea una tabella di elementi del sito come previsto dal progettista, lasciando le celle vuote;
• il programmatore web ricrea un'immagine del sito dagli elementi tagliati utilizzando linguaggi di marcatura e di programmazione Web, monitorando la funzionalità e l'operabilità di ciascuno di essi.

Il layout della tabella del sito consente di creare in modo bello e logico il contenuto (contenuto) per fornire al visitatore che lo ha visitato. Tuttavia, ha due svantaggi:

1. Richiede una grande quantità di codice.
2. Rende il sito più pesante e riduce la velocità del suo caricamento.

Ma a volte, per rispettare il compito tecnico con il posizionamento rigoroso degli elementi, il layout HTML nella tabella diventa l'unica soluzione.