Una guida dettagliata per iniziare con le tabelle HTML

Tabella HTML

Panoramica

Il Web è pieno di informazioni come risultati di calcio, punteggi di cricket, elenchi di nomi di dipendenti e indirizzi e-mail. Le tabelle HTML consentono di visualizzare informazioni in quelli che sono comunemente noti come dati tabulari.

NOTA: ho già aggiunto lo stile usando i CSS, quindi i miei elementi appariranno diversi. Ma funzioneranno esattamente allo stesso modo.
Se vuoi rendere i tuoi elementi simili ai miei, puoi trovare il mio file CSS nei link indicati di seguito:
CSS: https://gist.github.com/abhishekjakhar/2ea51dfc0dcf6f6ed0d44ac0e72f9c54

Tabella di base

Possiamo creare una tabella HTML usando l'elemento table. Ha un tag di apertura e chiusura e racchiude al suo interno tutte le righe e le celle della tabella.

Ora, digitiamo una riga di tabella. Le tabelle sono costituite da file di informazioni che attraversano la pagina. Un elemento

viene utilizzato per creare una riga di tabella.

Tuttavia, non esiste alcun elemento per la colonna della tabella. Le colonne della tabella dipendono dal numero di celle della tabella all'interno di ogni riga. Un elemento

è esattamente lo stesso numero di colonne che otterrai nella riga della tabella.

Per ricapitolare:

viene utilizzato per creare una cella di tabella. Quindi sostanzialmente il numero di elementi che aggiungerai all'interno dell'elemento
: l'elemento table rappresenta i dati in una serie di righe e colonne. Le tabelle devono essere utilizzate solo per la visualizzazione di dati tabulari e mai per il layout di pagina.
  • : l'elemento riga della tabella definisce una riga di celle in una tabella. Le righe della tabella possono essere riempite con celle di tabella e celle di intestazione della tabella.
  • : l'elemento della cella della tabella contiene dati e rappresenta una singola cella della tabella. Ogni cella della tabella deve trovarsi all'interno di una riga della tabella.elementi della riga della tabella (<tr>) e delle celle della tabella (<td>) per formare una tabella
    Nota: gli elementi non hanno attributi. Se hai già lavorato con le tabelle in passato, potresti aver usato alcuni attributi in passato. Tuttavia, ora sono tutti deprecati.

    Elemento di intestazione della tabella

    Abbiamo creato una tabella di base, ma non è chiaro che la nostra prima riga nella tabella sia in realtà un tentativo di etichettare ciascuna delle nostre colonne. In questo momento, la prima riga sembra semplicemente un'altra riga nella nostra tabella.

    Possiamo usare un elemento di intestazione di tabella su ciascuna di queste tre colonne per dire al browser, ai crawler dei motori di ricerca e agli screen reader che si tratta in realtà di intestazioni e non solo di dati regolari.

    Ora cambieremo le celle di tabella nella prima riga in una cella di intestazioni di tabella. Per fare ciò sostituiremo

    per la testa e per il corpo.

    - L'elemento head della tabella (da non confondere con l'elemento della cella dell'intestazione della tabella) definisce un insieme di righe che compongono l'intestazione di una tabella.
  • - L'elemento body della tabella definisce una o più righe che compongono il contenuto principale (o "body") di una tabella.table head (<thead>) e table body (<tbody>) elementi

    Elemento del piede da tavolo

    Abbiamo una testata da tavolo e un elemento body da tavolo. Quindi, naturalmente, c'è anche un elemento del piede da tavolo. Ma la domanda è: qual è il punto dell'elemento footer della tabella quando abbiamo già le intestazioni della tabella che etichettano le colonne?

    In generale, un elemento piè di pagina della tabella dovrebbe contenere un riepilogo della tabella. Potrebbe trattarsi di alcune celle finali contenenti somme, totali e medie per ogni colonna. Potrebbe anche contenere alcune meta informazioni come le informazioni sul copyright o la fonte di dati all'interno di una tabella.

    Ora, penseresti che il piè di pagina del tavolo andrebbe in fondo al tavolo. Tuttavia, in realtà dovrebbe andare subito dopo l'elemento head della tabella e subito prima dell'elemento body della tabella.

    - L'elemento footer della tabella definisce una serie di righe che riepilogano le colonne della tabella.elemento foot table (<tfoot>)

    Elemento didascalia

    Questo elemento è sostanzialmente un titolo per la tabella e dovrebbe venire immediatamente dopo il tag di apertura della tabella. È bello aggiungere perché riassume rapidamente ciò che una tabella potrebbe contenere.

    Ora abbiamo trattato gli elementi essenziali degli elementi della tabella in HTML.

    Puoi saperne di più sulle tabelle nei link indicati di seguito.

    Spero che tu abbia trovato questo post informativo e utile. Mi piacerebbe sentire il tuo feedback!

    Grazie per aver letto!

    highresolution-wallpapers.net © 2020
    con .

    Il testo nella prima riga è più audace delle altre righe a causa dell'elemento <th> utilizzato all'interno della prima <tr>

    Tavolo Head & Body

    Simile alla struttura del nostro documento HTML, in cui abbiamo una testa e un corpo, possiamo anche aggiungere una testa e un corpo al nostro tavolo. Non useremo sicuramente gli stessi elementi HTML perché la sintassi non sarà più valida. Per la tabella, abbiamo