Come si specifica l'imbottitura della tabella in CSS

Come si specifica l'imbottitura della tabella in CSS
La tabella è un elemento importante di HTML che viene utilizzato per organizzare e gestire i dati sotto forma di righe e colonne. Segue un flusso simile a un grafico e può archiviare immagini, statistiche e dati personali. Inoltre, gli utenti possono modellare il ""Elemento applicando diverse proprietà CSS. Ad esempio, impostare l'imbottitura all'interno delle celle del tavolo e molte altre.

Questo post dimostrerà:

  • Come fare un tavolo in HTML?
  • Come specificare un'imbottitura del tavolo in CSS?

Come fare un tavolo in HTML?

Per creare/creare una tabella in HTML, prova la procedura dichiarata.

Passaggio 1: creare contenitore "div"
Innanzitutto, crea un "div"Container con l'aiuto del""Tag e assegnalo un attributo di classe con un nome particolare.

Passaggio 2: fare il tavolo
Successivamente, utilizza il “

"Elemento insieme al"contenuto"Classe per creare una tabella all'interno del div.

Passaggio 3: Aggiungi righe della tabella
Ora, inserisci il seguente elemento tra il "

"Tag per creare celle da tabella e incorporare i dati:

  • "
"Il tag viene utilizzato per specificare le righe nella tabella.
  • Dopodiché, aggiungi il "
  • "Tag per definire una cella di intestazione.
  • "
  • "Tag tra il primo"
    "Viene utilizzato per aggiungere le celle di dati nella tabella:










    Nome Conto
    Hafsi UK
    Edward India
    Bella Stati Uniti d'America
    Bunny Pakistan
    Jack Africa
    Sposare Bangladesh
    Jazz Singapore
    Jenny Iran

    Si può osservare che la tabella è stata creata correttamente:

    Come specificare un'imbottitura del tavolo in CSS?

    Per specificare l'imbottitura o la spaziatura della tabella, è possibile utilizzare varie proprietà CSS, tra cui "spaziatura del confine","spaziatura cellulare", E "cella". Questi sono metodi validi per produrre lo spazio.

    Per specificare un'imbottitura della tabella in CSS, seguire le istruzioni fornite.

    Passaggio 1: elemento "div" stile
    Innanzitutto, accedi al "div"Container con l'aiuto dell'attributo di classe assegnato".Main-Div". Quindi, applicare le proprietà CSS di seguito:

    .main-div
    Margine: 20px 150px;
    Background-color: bisque;
    Bordo: 4px punteggiato blu;

    Qui:

    • "margine"È utilizzato per specificare lo spazio vuoto al di fuori del confine dell'elemento.
    • "colore di sfondo"Viene utilizzato per impostare il colore di sfondo dell'elemento.
    • "confine"Definisce un limite attorno all'elemento.

    Produzione

    Passaggio 2: impostazione della tabella Imposta
    Per impostare l'imbottitura del tavolo, accedi al "tavolo.contenuto" classe. Successivamente, applica le proprietà CSS codificate di seguito:

    tavolo.contenuto
    Bordo: 5px Solid RGB (228, 15, 15);
    Spazio di confine: 12px;
    Margine: 50px 150px;
    Background-color: RGB (247, 209, 139);

    Qui, il "spaziatura del confine"La proprietà viene utilizzata per impostare la distanza o lo spazio tra i bordi e le celle adiacenti nella tabella.

    Come puoi vedere, è stata aggiunta l'imbottitura del tavolo:

    Passaggio 3: celle di dati della tabella di stile
    Per applicare CSS su un elemento specifico della tabella, prima accedilo con la classe della tabella come "tavolo.contenuto"E nome tag elemento come"td":

    tavolo.contenuto td
    Bordo: RGB solido (233, 36, 10) 1px;

    Secondo lo snippet di codice dato, abbiamo applicato il "confine"Proprietà sulle celle di dati:

    Si trattava di specificare l'imbottitura del tavolo in CSS.

    Conclusione

    Per specificare l'imbottitura della tabella, in primo luogo, creare una tabella con l'aiuto di "

    "Tag. Quindi, accedi alla tabella in CSS utilizzando il nome del tag e la classe assegnata. Dopodiché, applica il "spaziatura del confine"Proprietà sul tavolo per regolare lo spazio tra i bordi delle cellule adiacenti. Questo post ha spiegato la procedura per specificare l'imbottitura della tabella in CSS.