Come modellare il tavolo con CSS

Questo studio guiderà relativo alle tabelle di styling con CSS.

Come modellare il tavolo con CSS?

Per applicare gli stili al tavolo, passeremo attraverso la serie di passaggi indicati di seguito.

Step1: crea una tabella in HTML

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 aggiuntiva.
  "
  "Specifica la parte del corpo della tabella.

  La tabella creata è attualmente così:

  Andiamo avanti per vedere come modellare questo tavolo.

  Passaggio 2: elemento "corpo" di stile

  corpo
  Font-Family: Verdana, Ginevra, Tahoma, Sans-Serif;
  Background-color: 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"È utilizzato per applicare il carattere supportato dal browser. Se il browser non supporta il primo stile di carattere, l'altro verrà utilizzato.
  • "colore di sfondo"La proprietà imposta il colore di sfondo dell'elemento.

  Passaggio 3: elemento "didascalia"

  didascalia
  Font-size: 25px;
  Testo-align: centro;
  Background-color: #1C6758;
  Colore: cornsilk;
  

  L'elemento è disegnato come segue:

  • "dimensione del font"La proprietà viene utilizzata per l'impostazione della dimensione del carattere.
  • "allineamento"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 il bordo alla tabella
  IL "confine"La proprietà viene utilizzata per aggiungere un bordo attorno all'elemento. È una proprietà stentata che specifica la larghezza del bordo, lo stile del bordo e il colore del bordo.

  Applichiamo il bordo, insieme all'imbottitura e margine al tavolo:

  Table, th, td
  Bordo: 2px Solid #1C6758;
  imbottitura: 1px 6px;
  Margine: auto;
  

  Qui:

  • "confine"La proprietà regola il bordo attorno al tavolo, specificando la larghezza del bordo, lo stile del bordo e il colore del bordo.
  • "imbottitura"Specifica lo spazio attorno al contenuto dell'elemento, in cui il primo valore definisce lo spazio nella parte superiore e il secondo valore aggiunge spazio ai lati a sinistra destra del contenuto.
  • "margine"Proprietà con il valore"auto"Aggiunge uguale spazio attorno all'elemento.

  Produzione
  

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

  Passaggio 5: spaziatura del bordo del crollo dalla tabella
  Gli spazi tra i bordi del tavolo possono essere rimossi utilizzando il "Collapse al confine"Proprietà con il valore" collasso ":

  Collapse di confine: collasso;

  Passaggio 6: regola la dimensione della tabella
  Vediamo come regolare la dimensione della tabella:

  Thead th
  larghezza: 160px;
  

  Il aggiunto "larghezza"Proprietà con il

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

  .evidenziare
  background-color: #0f90d5;
  

  IL ".evidenziare"Si riferisce al momento saliente della classe del

  "Specifica il contenuto di intestazione. "
  L'elemento regolerà automaticamente la dimensione della tabella in base ad esso :: Possiamo anche applicare gli stili alla cella della tabella specifica. Discutiamo di loro! Passaggio 7: celle del tavolo specifiche di stile Per modellare la 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":	99	elemento. Questo elemento viene applicato con "colore di sfondo"Proprietà per specificare il colore sullo sfondo. Come possiamo vedere, la cella della tabella specificata viene disegnata con successo: Passaggio 8: imposta la famiglia dei caratteri e le dimensioni della tabella tavolo Font-Family: corsivo; Font-size: 18px; Testo-align: centro; Le seguenti proprietà CSS sono applicate all'elemento della tabella: "famiglia di font"La proprietà imposta lo stile del carattere dell'elemento. "dimensione del font"La proprietà è utilizzata per l'impostazione del carattere dell'elemento. "allineamento"La proprietà viene utilizzata per regolare l'allineamento del testo. Ecco l'output: Passaggio 9: file di colori in sequenza È inoltre permesso di applicare stili a righe o colonne specifiche. Ad esempio, le righe pari vengono disegnate seguendo il formato seguente: \ tbody tr: nth-child (pareggio) Background-color: #FFB200; Qui: IL ": nth-child (pari)"Lo pseudo selettore viene utilizzato per sostenere 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 tavoli per lo styling con CSS Conclusione Le tabelle sono uno strumento importante per mantenere organizzati i dati. La tabella può essere creata utilizzando HTML , , e più elementi. Diverse proprietà CSS sono utilizzate per stilizzare la tabella, come bordo, proprietà a base di background, proprietà del carattere e molti altri. Per una migliore comprensione, questo articolo ha spiegato una procedura passo-passo per modellare una tabella con CSS. « Come taggare un commit anziano in git? Come risolvere -squash è supportato solo sul demone Docker con funzionalità sperimentali abilitate Errore Docker » C ++ Come dichiarare variabili in c++? Per dichiarare una variabile in C ++, è necessario specificare il tipo di dati e il nome. Inoltre, l... Dr. Folco Leone Sqlite Cosa sono sqlite e sqlite3? Sono gli stessi? SQLite è una libreria di database e SQLite3 è l'interfaccia della riga di comando che è necessaria p... Nick Marini C ++ Cos'è il tipo di dati Char in C ++ In C ++ il tipo di dati Char rappresenta i dati nel modulo dei caratteri. Questa variabile richiede ... Domiziano Conte Pitone Seaborn Save trama Dante Palumbo Pitone Seaborn orizzontal Bar trama Nestore Caruso html Come utilizzare la proprietà Mouseevent Pagey? Felicia Giuliani Giava Quali sono espressioni, dichiarazioni e blocchi in Java Sarita Negri JavaScript Cosa fa il metodo ATOB in JavaScript Sarita Negri PHP Come utilizzare la funzione delle strisce in PHP Piererminio De luca AWS Come EC2 è diverso da Elastic Beanstalk? Dr. Folco Leone Powershell Come usare il cmdlet move-elems in PowerShell? Dr. Folco Leone Dattiloscritto Cos'è TypeScript e come usarlo? Domiziano Conte PHP Come utilizzare la funzione GetDate PHP Dr. Folco Leone ,