Come creare una tabella in HTML: descrizione dettagliata

I tavoli sono uno dei più importanti, ma ancheelementi complessi di tempo che devono essere presenti sulle pagine web. Con il loro aiuto è conveniente inviare informazioni importanti e utili in una forma abbastanza concisa. Ovviamente, la maggior parte degli editor di modelli in esecuzione su motori diversi ti consente di inserire automaticamente una tabella su una pagina di un sito o una singola pubblicazione, ma cosa succede se il design di una risorsa web, le sue pagine vengono create da zero? Quindi prima del wizard iniziale ci può essere un problema: come creare la tabella in HTML. Scopriamo come creare questo elemento correttamente e rapidamente.

Scegli un editor

Innanzitutto, quando inizi a creare un tavolo,Dovresti determinare l'editor in cui lavorerai. Naturalmente, il modo più semplice per scegliere il programma in cui si crea il codice principale del sito. Ma è meglio usare un vecchio buon notebook per questi scopi.

Puoi chiedere perché complicare la tua vita, perché se fai tutto contemporaneamente nell'editor, puoi vedere il risultato anche in una sola volta, e anche usare le istruzioni del programma.

Sì, è vero, ma creando un tavolo connon solo sarai in grado di studiare a fondo il principio stesso della sua creazione, ma anche di non permettere fastidiosi errori di battitura e errori nel codice principale. A volte capita che il cursore si sposti accidentalmente, e nel processo di scrittura il codice si insinui nell'errore, che a volte è difficile da trovare. Creando una tabella in un notebook, puoi copiare il suo codice e incollarlo nel posto desiderato.

Algoritmo per la creazione di una tabella

Innanzitutto, compileremo un breve algoritmo su come creare una tabella in HTML. Questo è necessario per comprendere la sequenza di ogni passaggio. Quindi analizzeremo come eseguire ciascuno degli elementi.

Iniziamo con le azioni preparatorie.

1. Disegna un diagramma del tavolo su un foglio di carta.

2. Contare il numero di righe e celle. Se il numero dell'ultimo è diverso, consideriamo separatamente ogni riga.

3. Determinare il numero di celle nelle intestazioni di riga (ad esempio, celle "No", "Nome", ecc.).

4. Registra i parametri principali della tabella: colore, altezza e larghezza, allineamento del testo - in generale, tutto ciò di cui hai bisogno.

Successivamente, vai direttamente alla creazione di una tabella:

1. Inserisci i tag della tabella.

2. Inserisci i tag delle righe in base alla quantità di cui hai bisogno.

3. Nelle righe inseriamo i tag delle celle (regolari e maiuscole), anche in base al numero che hai scritto su carta.

4. Impostare i parametri per la tabella nel suo complesso.

5. Se necessario, impostare gli indicatori per le singole celle.

6. Riempi le nostre celle di testo.

Crea un tavolo

Quindi, hai scelto l'editor, ora facciamoscopriamo come creare una tabella in HTML. Il tag con cui una tabella (<table>) è inserita nel codice della pagina è una coppia, cioè la nostra costruzione inizia con questo tag e termina con </ table>.

Dopo aver inserito i tag della tabella, procediamo alla creazione di linee e celle.

Immediatamente, notiamo che questi elementi sono anche associati. Il tag <tr> specifica stringhe e <td> - celle.

Per le celle capitali, usa l'elemento coppia <th>.

Come già accennato, la prima cosa da farelinee, quindi prescrivi le celle al loro interno. Per non confonderci, ti consigliamo di indentare una o due righe tra ogni blocco o di prescrivere un nuovo blocco di elementi usando il tasto Tab.

Come può essere? Così:

• <Table>;
• <Tr>;
• <th> No. p / p </ th>;
• <th> Cognome </ th>;
• </ tr>;
• <Tr>;
• <td> 1 <td>;
• <td> Ivanov </ td>;
• </ tr>;
• </ table>.

Come puoi vedere, non c'è niente di difficile. La cosa principale - non confondersi nel numero di righe e celle. Altrimenti, la tabella potrebbe essere inclinata.

Abbiamo analizzato la creazione della tabella in HTML, ora possiamo passare ai parametri sia della matrice stessa che delle sue righe e celle.

Opzioni di tabella

Quando il codice è scritto, dovresti prestare attenzione ai seguenti punti: allineamento nella tabella HTML, colore dei bordi, sfondo, testo e così via.

I parametri della tabella sono specificati nel tag <table>. Questi includono:

1. Bordo: la larghezza dei bordi. Impostato per intero. Per impostazione predefinita, i limiti di qualsiasi tabella sono zero.

2. Bordercolor - colore del bordo. Può essere impostato come codice colore esadecimale (# 00008B) e il suo nome in inglese (DarkBlue). Di default è sempre grigio.

3. Bgcolor - colore di sfondo. Imposta anche per codice o nome.

4. Allinea - allineamento del testo dietro al tavolo. Di default - a sinistra. Ci sono le seguenti opzioni per questo parametro:

• sinistra - fascia destra;
• avvolgimento a destra a sinistra;
• center - emette il tavolo al centro senza avvolgere.

5. Larghezza e altezza: la larghezza e l'altezza del tavolo. Può essere impostato sia in pixel che in percentuale (rispetto alla dimensione del browser finestra).

Prescrivere un particolare indicatore, si dovrebbe prestare particolare attenzione al design. Dopo aver specificato il parametro, dovrebbe esserci un segno di uguale, dopo il quale il valore specificato viene indicato tra virgolette.

Per quanto riguarda il colore del testo, è realizzato allo stesso modo del semplice testo in formato HTML.

Esempio di una tabella:

• <table border = "2" bordercolor = "# 00008B" bgcolor = "#FFFFFF" align = "center" width = "800" height = "800">;
• <Tr>;
• <th> No. p / p </ th>;
• <th> Cognome </ th>;
• </ tr>;
• <Tr>;
• <td> 1 <td>;
• <td> Ivanov </ td>;
• </ tr>;
• </ table>.

Opzioni di stringa

Quindi, abbiamo già capito come creare una tabella in HTML e scrivere i suoi parametri principali. Ma cosa succede se abbiamo bisogno di allocare una stringa? Disegnala non come il testo principale del tavolo?

I parametri della stringa sono specificati nel tag <tr> allo stesso modo dei dati della tabella. Le seguenti variabili possono essere impostate per una stringa:

1. Già conosciuti al confine, bordercolor e bgcolor.

2. Allinea - allineamento del testo nella linea. Può essere lasciato, centro e destra.

3. Valign: questo tag allinea verticalmente il testo. Accetta i seguenti valori:

• in alto: il testo è allineato al bordo superiore;
• al centro - nel centro;
• in basso - sul bordo inferiore.

Esempio di layout di linea:

• <tr border = "3", bordercolor = "# 00007F" bgcolor = "# FFFFE0" align = "center" valign = "middle">;
• <th> No. p / p </ th>;
• <th> Cognome </ th>;
• </ tr>.

Parametri delle celle

E l'ultima cosa che vale la pena prestare attenzione èchi vuole sapere come creare una tabella in HTML: i parametri delle singole celle, sia normali che superiori. Di fatto, tutto è fatto nello stesso modo di un tavolo o di una fila. L'unica cosa è aggiunta a due elementi più importanti:

1. Colspan: questo parametro indica il numero di colonne che una cella può estendere.

2. Rowspan: indica già il numero di righe occupate da questa cella.

Poiché la formattazione non è diversa dalla scrittura di una stringa, non forniremo un esempio del codice.

risultati

Fare un tavolo non è così difficile come potrebbe sembrare a prima vista. La cosa principale quando si scrive il codice è la perseveranza e l'attenzione.

Per quanto riguarda come inserire una tabella in HTML, la sua cifra è sufficiente per copiare e incollare esattamente nella posizione della pagina in cui, a tuo parere, dovrebbe essere localizzata.

Non aver paura di sperimentare e presto imparerai perfettamente la tecnica di creazione dei tavoli. Buona fortuna!