Come modellare i tavoli usando CSS

Fogli in stile a cascata (CSS) sono principalmente utilizzati in combinazione con HTML per stile elementi come tabelle, testo, pulsanti e immagini. Più specificamente, una tipica tabella HTML non è intuitiva e facilmente comprensibile; Pertanto, è necessario creare la tabella richiesta utilizzando CSS per migliorare il suo aspetto.

Questo blog dimostrerà la procedura di stile tavoli usando CSS. Quindi iniziamo!

Cosa sono le tabelle in HTML

Tavoli sono considerati una componente essenziale di un Html documento. Può essere creato usando il “

"Tag e tag sub-table""Per le righe,"

"Per le colonne e"

"Per le intestazioni del tavolo. Tutti i tag menzionati sono il tag di tabelle di base; Tuttavia, le proprietà in stile CSS possono essere utilizzate per i tavoli di styling.

Di seguito sono riportate alcune proprietà CSS importanti e di base che aiutano a cambiare lo stile della tabella:

Aggiungi confini
Regola i bordi
Confini di collasso
Regolare la larghezza e l'altezza del tavolo
Allineare il testo verticale
Allineare il testo orizzontale
Aggiungi imbottitura
Definire i colori delle cellule

Discuteremo ora tutte le proprietà CSS sopra offerte per modellare le tabelle HTML con esempi adeguati.

Tabelle di stile che utilizzano la proprietà del bordo CSS

CSS offre una proprietà "bordo" che viene utilizzata per aggiungere bordi in un tavolo. Per aggiungere un confine, puoi adottare il seguente esempio.

Esempio
L'esempio seguente mostra un solido "nero"Confine con"1px"Larghezza per l'intera tabella"tavolo", Intestazioni"th", E colonne"td":

Insegnante	Alunno
Alice	Segno
Luice	Grifone

Produzione

Bordo della tabella di stile usando la proprietà di larghezza CSS

Nell'esempio precedente, hai visto il metodo per inserire un bordo attorno a una tabella in CSS. Il dato "confine"La proprietà non specifica la larghezza, poiché potresti voler regolarla in base alle tue esigenze. Per fare ciò, controlla l'esempio fornito.

Esempio
In questo esempio, creeremo una tabella HTML e lo modelleremo in modo da coprire l'intera scansione con la larghezza completa "100%":

Piena larghezza del tavolo

Insegnante	Alunno
Alice	Segno
Luice	Grifone

Produzione

Tabelle di stile che utilizzano proprietà CSS bordo-collapse

Come puoi vedere, la tabella creata nell'esempio sopra dato ha un bordo separato per ogni riga e colonna che potrebbe non dare uno sguardo decente su un sito Web. Tuttavia, CSS ti consente di farlo crollo IL frontiere in un singolo bordo usando il "Collapse al confine" proprietà.

Esempio
Ora utilizzeremo il "Collapse al confine"Proprietà per modellare la tabella creata con un singolo bordo sia per righe che per le colonne:

Crolla i confini della tabella

Insegnante	Alunno
Alice	Segno
Luice	Grifone

Produzione

Tabella di stile che utilizza la larghezza CSS e le proprietà di altezza

In CSS, il “larghezza" E "altezza"Le proprietà sono utilizzate principalmente per la modifica delle matrici della tabella. Ad esempio, nel seguente esempio, imposteremo la tabella larghezza COME "90%" e il altezza della cella di intestazione del tavolo come "90px":

Tabelle di styling che utilizzano CSS

Esempio per l'impostazione dell'altezza e della larghezza:

Insegnante	Alunno
Alice	Segno
Luice	Grifone

Produzione

Allineamento delle celle del tavolo di stile usando la proprietà CSS verticale

CSS "allineamento verticale"La proprietà viene utilizzata per allineare il testo nella cella della tabella dalla parte superiore, in basso o in mezzo, ma è necessario selezionare se allineare la riga o le colonne verticalmente. Controlliamo l'esempio fornito:

Tavoli di styling in html

Esempio di impostazione dell'allineamento verticale

Insegnante	Alunno
Alice	Segno
Luice	Grifone

L'esempio sopra allineerà verticalmente il testo della cella della tabella in basso:

Allineamento delle celle del tavolo di stile utilizzando proprietà CSS orizzontale

CSS offre "orizzontale"Proprietà allo scopo di allineare il testo in orizzontale. Questa proprietà può aiutare ad allineare il testo a sinistra, a destra o al centro:

Tavoli di styling in html

Esempio di impostazione dell'allineamento orizzontale

Insegnante	Alunno
Alice	Segno
Luice	Grifone

L'esempio sopra offerto allineerà il testo aggiunto nella cella della tabella rispetto a metter il fondo a:

Tabelle di stile che utilizzano proprietà di imbottitura CSS

IL "imbottitura"La proprietà CSS viene utilizzata per il controllo degli spazi tra celle di testo e bordo. È usato principalmente per il

elementi.

Esempio

Tavoli di styling in html

Esempio di utilizzo della proprietà di imbottitura

Insegnante	Alunno
Alice	Segno
Luice	Grifone

Le immagini di seguito donate indicano che abbiamo aggiunto con successo l'imbottitura "20px" tra il bordo e il testo delle celle:

Tabelle di stile che utilizzano proprietà CSS a base di sfondo

CSS consente di definire i colori separatamente per ogni tabella ogni colonna, riga o cella. Ad esempio, la tabella seguente conterrà il sfondo dell'intestazione del tavolo "th" COME "arancia" colore e tutto "nth-child (pari)"Numero pari di file"tr"Avrà"grigio" colore di sfondo:

Intestazione del tavolo colorato

Insegnante	Alunno
Alice	Segno
Luice	Grifone

Produzione

Conclusione

A Stile html Tavoli, puoi utilizzare diverse proprietà CSS Per l'aggiunta e la regolazione dei bordi, la creazione di bordi di collasso, la regolazione della larghezza e l'altezza della tabella, allineando il testo in orizzontale o verticalmente. Questo blog ha dimostrato l'utilizzo di diverse proprietà CSS per le tabelle di stile per una pagina web. Provali e divertiti a styling HTML tavoli in un modo nuovo!