Le tabelle non vengono più usati per creare layout delle pagine e per configurazione dei singoli elementi, perché questa tecnica non fornisce la flessibilità e adattabilità alla struttura del sito.
1. Come creare una tabella nel linguaggio HTML
Una tabella in html viene creata usando la coppia di tag <table> </ table>. Questo tag serve da contenitore per vari elementi della nostra futura tabella e tutti gli elementi devono essere all'interno di questa copia di tag. Dopo di che posiamo gia dividere la nostra tabella in rige con atraverso il tag tr e colonne tag td. Tag th indica le celle con il titolo della colonna. Ad esempio, utilizzando questa struttura che vedete sotto si può creare una tabella costituita da due righe e due colonne:
testo del titolo | testo del titolo |
---|---|
dati della tabella | dati della tabella |
Ho aggiunto la formattazione con dei stili per rendere il nostro esempio piu compressivo
Per impostazione predefinita, le celle in una tabella html non hanno bordi visibili. I bordi possono essere definiti usando le proprietà border:
Gli spazi tra le celle della tabella vengono rimossi con l'aiuto della proprietà table {border-collapse: collapse;}
La larghezza della tabella di default è uguale alla larghezza del suo contenuto interno. Per impostare la larghezza, dobbiamo impostare il valore per larghezza con la proprietà width:
Video relativo alla creazione delle tabelle in html.
Tabelle 1 parte, 9:16 minute
2. Come creare le righe nella tabella html
Righe nelle tabelle vengono create utilizzando il tag <tr>. Il numero di righe orizzontali nella tabella è determinato dal numero di copia di tag <tr> </ tr>.
3. Come creare titoli della colonna in una cella
Elemento<th> crea titolo della colonna, è una cella speciale, dove il testo è evidenziato in grassetto. Numero di celle di intestazione è determinato dal numero di coppie di tag <th> </ th>. Per l'elemento sono disponibili seguenti attributi colspan, rowspan, headers
4. Come vengono creati semplici celle al interno della tabella.
Le copie di tag <td> </ td>, che si trova nella stessa riga, determinano il numero di celle in una riga della tabella. Il numero di coppie di celle <td> deve essere uguale al numero di coppie di celle creati con il tag <th> (con i titolo della colonna ). Per questi tag sono disponibili seguenti attributi colspan, rowspan, headers .
Video relativo alla creazione e gestione delle tabelle nel linguaggio HTML
10. Tabelle 2 parte, 5:50 minute
5. Come aggiungere un titolo alla tabella
Elemento <caption> crea una descrizione per la nostra tabella . Viene messo subito dopo il tag <table>, oltre la riga o cella.
№ per ordine | Nome del prodotto | Unita di misurazione | Quantita | Costo per un cilo. | Costo finale |
---|---|---|---|---|---|
1. | Pomodori freschi | кг | 15,20 | 69,00 | 1048,80 |
2. | Cetrioli freschi | кг | 2,50 | 48,00 | 120,00 |
In totale : | 1168,80 |
6. Raggruppamento di righe e colonne nella tabella
Elemento <colgroup> crea un gruppo di colonne , mettendo in evidenza le cellule logicamente simili. Ragruppa una o più colonne per unica formattazione, che consente di applicare gli stessi stili alle colonne invece di ripetere gli stili per ogni cella o per ogni riga. L'elemento viene inserito subito dopo il tag <table> e <caption>.
Elemento<col> forma un gruppo di colonne che dividono la tabella in sezioni non incluse nella struttura complessiva, vale a dire, che non contengono le informazioni dello stesso tipo. Permette di specificare le proprietà CSS diversi per ogni colonna all'interno del grupo <colgroup>. Con l'aiuto di vari stili CSS posiamo modificare il colore di sfondo della cella .Per elemento <col> è disponibile attributo <span>, che specifica il numero di colonne da unire.
№ | Nome | Prezzo , euro. |
---|---|---|
1 | Matita di colore | 20,00 |
2 | Righello di 20 см | 30,00 |
7.Ragrupamento sezioni delle tabella.
Elemento <thead> crea un gruppo di intestazioni per le rige della tabella per stabilire un unico disegno. Vine utilizzato in combinazione con gli elementi <tbody> e <tfoot > per specificare parte della tabella.
L'elemento deve essere utilizzato nel seguente ordine: come un elemento figlio del elemento <table>, va dopo <caption> e <colgroup> , e prima di elementi <tbody>, <tfoot> e <tr> . In una tabella puo essere utilizzato solo una volta .
L'elemento <tbody> raggruppa intestazioni della tabella . Viene utilizzato in combinazione con gli elementi <thead> e <tfoot> .
Elemento <tfoot> crea un gruppo di righe per fornire informazioni sugli importi o risultati nella parte inferiore della tabella. Viene utilizzato nella tabella una sola volta. Situata dopo il tag <thead>, prima del tag <tbody> e <tr>.
Questo raggruppamento di righe è stato pensato inizialmente per assicurare al visitatore che scorrendo la tabella mantiene sempre in vista le intestazioni delle colonne e al momento di stampa questi elementi possono servire come intestazione di pagina. Tuttavia i browser moderni non seguono questa struttura pensata o quindi o semplicemente mostrano <thead> e <tfoot> come semplici righe con i dati o al massimo, mettono queste righe all'inizio o alla fine della tabella
8. Come faccio a unire le celle di una tabella
Attributi colspan и rowspan combinano celle della tabella. Attributo colspan specifica il numero di celle collegate in orizzontale e rowspan - in senso verticale.
№ | Nome del prodotto | Unita di misurazione. | Quantita | Prezzo per un chilo in euro. | Prezzo in euro. |
---|---|---|---|---|---|
1. | Pomodori freschi | кг | 15,20 | 69,00 | 1048,80 |
2. | Citrioli freschi | кг | 2,50 | 48,00 | 120,00 |
Totale: | 1168,80 |
9. Attributi degli elementi della tabella
Attributo | Descrizione,valore che puo assumere |
---|---|
colspan | Il numero di celle nella riga da unire in orizzontale. <td colspan="3"> Possibili valori : numero da 1 a 999. |
headers | Specifica un elenco di celle di intestazione che contengono le informazioni di intestazione della cella corrente. Sono pensati per i browser vocali. <th id="identificatore">...</th> <th headers="identificatore">...</th> I valori accettati: un elenco di nomi di celle separati da spazi; Questi nomi devono essere assegnati alle cellule attraverso il loro attributo id. |
rowspan | Il numero di celle di una colonna per la loro unione in verticale. <td rowspan="2"> I valori possibili: numero da 1 a 999. |
span | Numero di colonne unite per attribuire un unico stile, il valore predefinito è 1. <col span="2"> I valori accettati: qualsiasi numero intero positivo. |
Esempio della tabella e guarda anche altre cliccando qui
Pizza | Ingredienti | Peso | Costo |
---|---|---|---|
PROSCIUTTO | Pomodoro, Mozzarella, Prosciutto Cotto | 300gr | 6 euro |
SICILIA | Pomodoro, Mozzarella, Olive tritate, Capperi | 400gr | 6,5 euro |
4 FORMAGGI | Gorgonzola, Fontina, Parmigiano, Mozzarella | 380gr | 8 euro |
BOSCAIOLA | Pomodoro, Mozzarella, Funghi Champignon | 480gr | 7euro |