Come dare uno stile alla tabella con i CSS

Come Dare Uno Stile Alla Tabella Con I Css



Le tabelle sono lo strumento più comune ed efficace per rappresentare i dati in modo organizzato. In passato, prima dei CSS, il L'elemento è stato utilizzato per creare ricchi layout di design. Ma al giorno d'oggi, i layout vengono creati utilizzando diverse altre proprietà CSS. Più specificamente, l'elemento HTML '' viene utilizzato per creare una tabella Web, che può essere ulteriormente stilizzata applicando diverse proprietà CSS.

Questo studio guiderà in relazione alle tabelle di stile con i CSS.

Come dare uno stile alla tabella con i CSS?

Per applicare gli stili alla tabella, eseguiremo la serie di passaggi indicati di seguito.





Passaggio 1: crea una tabella in HTML



< tavolo >
< didascalia > Informazioni studenti < / didascalia >
< testa >
< tr >
< th > Nome < / th >
< th > Corso < / th >
< th > Segni < / th >
< / tr >
< / testa >
< tbody >
< tr >
< td > William < / td >
< td > Rete < / td >
< td > 89 < / td >
< / tr >
< tr >
< td > Jack < / td >
< td > Introduzione al C++ < / td >
< td > 97 < / td >
< / tr >
< tr >
< td > Giuseppe < / td >
< td > Introduzione a Java < / td >
< td > 77 < / td >
< / tr >
< / tbody >
< / tavolo >

Per creare una tabella in HTML, vengono utilizzati i seguenti elementi HTML:



  • “ L'elemento ” viene utilizzato per creare una tabella in HTML.
  • “ L'elemento ” viene utilizzato per aggiungere una didascalia alla tabella.
  • “ ' viene utilizzato per specificare l'intestazione della tabella, che di solito contiene le intestazioni.
  • “
” viene utilizzato per la riga di aggiunta.
  • “
    • ” specificare il contenuto dell'intestazione.
  • “ ” specifica la parte del corpo della tabella.

    • La tabella creata attualmente ha questo aspetto:



    Andiamo avanti per vedere come modellare questo tavolo.



    Passaggio 2: stile dell'elemento 'corpo'.

    corpo {
    famiglia di caratteri: Verdana, Geneva, Tahoma, sans-serif;
    sfondo- colore : RGB ( 233 , 233 , 233 ) ;
    }

    L'elemento viene applicato con le seguenti proprietà di stile CSS:

    • “ famiglia di font ” proprietà con il valore “ Verdana, Ginevra, Tahoma, sans-serif ” viene utilizzato per applicare il carattere supportato dal browser. Se il browser non supporta il primo stile di carattere, verrà utilizzato l'altro.
    • “ colore di sfondo La proprietà ” imposta il colore di sfondo dell'elemento.

    Passaggio 3: stile dell'elemento 'didascalia'.

    didascalia {
    font- taglia : 25px;
    testo- allineare : centro;
    sfondo- colore : #1C6758;
    colore : mais;
    }

    Lo stile dell'elemento

    è il seguente:

    • “ dimensione del font La proprietà ” viene utilizzata per l'impostazione della dimensione del carattere.
    • “ allineamento del testo La proprietà ” specifica l'allineamento del testo dell'elemento.
    • “ colore La proprietà ” si riferisce al colore del carattere dell'elemento.

    Ecco l'output del codice sopra fornito:

    Passaggio 4: aggiungi bordo alla tabella
    Il ' frontiera La proprietà ” viene utilizzata per aggiungere un bordo attorno all'elemento. È una proprietà abbreviata che specifica la larghezza del bordo, lo stile del bordo e il colore del bordo.

    Applichiamo il bordo, insieme al padding, e al margine alla tabella:

    tavolo, th, td {
    frontiera : 2px solido #1C6758;
    imbottitura: 1px 6px;
    margine: automatico;
    }

    Qui:

    • “ frontiera ” regola il bordo attorno alla tabella, specificando la larghezza del bordo, lo stile del bordo e il colore del bordo.
    • “ imbottitura ” specifica lo spazio attorno al contenuto dell'elemento, dove il primo valore definisce lo spazio in alto-in basso e il secondo valore aggiunge spazio ai lati destro-sinistro del contenuto.
    • “ margine ” proprietà con il valore “ auto ” aggiunge spazio uguale attorno all'elemento.

    Produzione

    Nota : Se non vogliamo gli spazi tra i bordi della tabella, usa la proprietà border-collapse.

    Passaggio 5: comprimi la spaziatura del bordo dalla tabella
    Gli spazi tra i bordi del tavolo possono essere rimossi utilizzando il pulsante ' crollo del bordo ” proprietà con il valore “collapse”:

    border-collapse: crollo;

    Passaggio 6: regolare le dimensioni del tavolo
    Vediamo come regolare le dimensioni del tavolo:

    la testa th {
    larghezza : 160px;
    }

    L'aggiunta “ larghezza ” con l'elemento

    regolerà automaticamente la dimensione della tabella in base ad essa::

    Possiamo anche applicare stili alla specifica cella della tabella. Discutiamoli!

    Passaggio 7: celle di tabella specifiche per lo stile
    Per applicare uno stile alla cella della tabella specifica, specificare il nome della classe di quella particolare cella. Ad esempio, il codice seguente rappresenta che alla terza cella della seconda riga viene assegnato un nome di classe ' evidenziare ”:

    < td classe = 'evidenziare' > 99 < / td >

    Ora accedi alla cella usando il nome della classe nel file CSS:

    .evidenziare {
    sfondo- colore : #0f90d5;
    }

    Il ' .evidenziare ” si riferisce all'evidenziazione della classe dell'elemento

    		. Questo elemento viene applicato con il ' colore di sfondo ” per specificare il colore sullo sfondo.

    Come possiamo vedere, la cella della tabella specificata ha uno stile corretto:

    Passaggio 8: impostare la famiglia di caratteri e le dimensioni della tabella

    tavolo {
    famiglia di caratteri: corsivo;
    font- taglia : 18px;
    testo- allineare : centro;
    }

    Le seguenti proprietà CSS vengono applicate all'elemento tabella:

    • “ famiglia di font La proprietà ” imposta lo stile del carattere dell'elemento.
    • “ dimensione del font La proprietà ” viene utilizzata per l'impostazione del carattere dell'elemento.
    • “ allineamento del testo La proprietà ” viene utilizzata per regolare l'allineamento del testo.

    Ecco l'output:

    Passaggio 9: colora le righe in sequenza
    È inoltre consentito applicare stili a righe o colonne specifiche. Ad esempio, le righe pari sono stilizzate seguendo il seguente formato:

    \
    tbody tr:nth-bambino ( Anche ) {
    sfondo- colore : #FFB200;
    }

    Qui:

    • Il ' :ennesimo figlio (pari) Lo pseudo selettore viene utilizzato per prendere un argomento che specifica il modello su cui deve essere applicato lo stile.
    • “ colore di sfondo La proprietà ” viene utilizzata per impostare il colore di sfondo dell'elemento.

    Si può osservare che il colore di sfondo viene applicato con successo alle righe pari:

    Si trattava di stilizzare le tabelle con i CSS

    Conclusione

    Le tabelle sono uno strumento importante per mantenere i dati organizzati. La tabella può essere creata utilizzando gli elementi HTML

    , e altri. Diverse proprietà CSS vengono utilizzate per stilizzare la tabella, come il bordo, la proprietà del colore di sfondo, la proprietà della famiglia di caratteri e molte altre. Per una migliore comprensione, questo articolo ha spiegato una procedura passo-passo per modellare una tabella con i CSS.

    Altro

    Categoria

    Messaggi Popolari

    Come installare TensorFlow con l'accelerazione NVIDIA CUDA/cuDNN su Debian 12

    Salvare e ripristinare la posizione delle icone del desktop utilizzando DesktopOK - Winhelponline

    Come faccio a sfuggire a un backtick in Markdown

    Come convertire i tipi di dati in C++

    Come utilizzare i livelli AWS Lambda per la riusabilità del codice?

    Come abilitare o disabilitare la modalità oscura di MS Word

    Come ridimensionare la partizione EXT4

    Come rimuovere l'elemento dall'array in base al valore in JavaScript

    Cos'è Ban Hammer in Roblox?

    Come creare e rimuovere alias in Linux

    Come mascherare un servizio utilizzando il comando systemctl

    RegFileExport ti aiuta a esportare dati da alveari di registro offline - Winhelponline

    Come condividere lo schermo su Discord Mobile [Guida]

    Differenza tra Java System.getProperty e System.getenv?

    Cosa significa git pull origin [nome ramo]?

    Cos'è la precedenza e l'associatività degli operatori C

    Come posso unire in modo sicuro un ramo Git in Master?

    Clausola SQL OVER

    Vale la pena spendere un laptop a 120 Hz

    Come aggiungere margine a un singolo lato in Tailwind?

    ,