L'imbottitura cellulare è definita come lo spazio nel mezzo dei dati della cella e del bordo. Quando mettiamo i dati nelle celle della tabella, dobbiamo creare spazio tra il bordo della cella e i suoi dati. Questa spaziatura è nota come imbottitura cellulare in CSS. Possiamo impostare l'imbottitura sinistra della cella, l'imbottitura destra, l'imbottitura superiore e l'imbottitura inferiore separatamente, nonché l'imbottitura combinata per tutti i lati. Se non impostiamo questa imbottitura di celle nelle nostre celle della tabella, verrà impostata per impostazione predefinita in base ai dati delle celle. Abbiamo proprietà diverse in CSS per impostare questa imbottitura cellulare.
Usando la proprietà "imbottitura" regola l'imbottitura su tutti e quattro i lati all'interno della cella. Ma se vogliamo impostare l'imbottitura solo su un lato, allora abbiamo anche le proprietà per impostarlo. In questa guida, esploreremo la proprietà di imbottitura delle celle in CSS e eseguiremo esempi qui in cui useremo queste proprietà.
Proprietà per l'imbottitura cellulare in CSS:
Imbottitura: valore.
Imbottitura-sinistra: valore.
Pagging-destra: valore.
Pagging-top: valore.
Imbottitura: valore.
Esempio 1:
Dato che dobbiamo applicare le proprietà di imbottitura delle celle sulle nostre celle del tavolo, quindi dobbiamo costruire la tabella. Innanzitutto, useremo queste proprietà su di esso. Possiamo creare la tabella in HTML aggiungendo alcuni tag che vengono utilizzati per la costruzione della tabella. Qui, costruiremo una tabella in HTML aprendo il file. Dopo aver aggiunto tag di base dell'HTML, iniziamo a costruire la tabella nel corpo del codice HTML. Mettiamo il "
"Tag. In questo tag, creeremo la riga dell'intestazione usando il "TR" e quindi il tag "th". Nel tag "th" stiamo aggiungendo alcuni dati qui. Quindi, usiamo di nuovo "TR" per ogni riga.
Quindi, stiamo usando il tag "TD" in questo tag "TR". E aggiungere dati in questo "TD" in modo che aggiungerà dati alle righe della tabella. Dopo aver completato questo codice, dobbiamo salvarlo con ".HTML "Estensione del file e dobbiamo collegare questo file con il file CSS all'interno della" testa "di questo file HTML. Useremo questa tabella in tutti gli esempi in questa guida, ma applicheremo proprietà di imbottitura di celle diverse in ogni esempio. Ora, dopo aver salvato questo, ci sposteremo verso il file CSS in cui useremo le proprietà CSS. Quindi, tutte queste proprietà si applicheranno qui in questa tabella.
Ne abbiamo creato una intestazione in HTML. Quindi, qui lo modelleremo un po 'usando la proprietà "Color". Abbiamo impostato il colore del carattere su "marrone". Quindi, abbiamo anche impostato la sua "famiglia di carattere" e usiamo "Algerian" come valore di questa proprietà. Quindi, applica il bordo "2px" sull'intera tabella. Il tipo è impostato qui su "solido" e il colore del "bordo" è "marrone".
Successivamente, la "larghezza" della tabella è impostata. Mettiamo "auto" qui in modo che la larghezza si regolerà automaticamente in base ai dati. Dopo questo, la proprietà "Collapse a confine" è qui, ed è "crollo". Quindi, il bordo del tavolo verrà crollato. Ora, dobbiamo creare un bordo per ogni cella. Quindi, per questo, stiamo di nuovo utilizzando la proprietà "Border" per "Th" e "TD". I dati scritti in queste celle sono impostati sul colore "nero" nella proprietà "colore".
Ora stiamo impostando l'imbottitura della cella con l'aiuto della proprietà "imbottitura" in CSS e impostando qui l'imbottitura "15px". Creerà uno spazio 15px tra la cella e i dati dai lati superiore, sinistra, in basso e destra. Se vogliamo applicare la stessa imbottitura su tutti e quattro i lati, utilizziamo questa proprietà "imbottitura". Questa proprietà applica l'imbottitura su tutti i lati.
In questo output, nota che esiste uno spazio tra il testo che è scritto all'interno della cella e il bordo di questa cella. Lo spazio da tutti e quattro i lati è uguale. Questa è l'imbottitura cellulare in CSS e questa proprietà "imbottitura" imposta uguale imbottitura su tutti i lati.
Esempio n. 2:
Qui, il codice è lo stesso che abbiamo discusso nel primo esempio. Cambiamo solo il "colore" dell'intestazione e il colore del "bordo" della cella in "verde". Quando utilizziamo questa proprietà "imbottitura-sinistra", regolerà solo l'imbottitura della cella sul lato sinistro. Abbiamo impostato il valore di "imbottitura-sinistra" su "60px". Creerà spazio 60px sul lato sinistro dei dati della cella e del bordo della cella.
In questo output, c'è uno spazio sul lato sinistro tra i dati e il bordo di tutte le celle. Questo perché usiamo la proprietà "imbottitura". Quindi, crea lo spazio desiderato solo sul lato sinistro e non applica questa imbottitura sui restanti tre lati.
Esempio # 3:
In questo esempio, cambiamo semplicemente il "colore" dell'intestazione, il colore del "bordo" della cella e il tavolo in "arancione". Quando utilizziamo la proprietà "imbottitura-destra", influisce solo sull'imbottitura delle celle sul lato destro. Farà uno spazio tra i dati presenti all'interno della cella e il bordo destro della cella. Il valore di "imbottitura-destra" qui è impostato su "50px."Lascerà un divario di 50px tra i dati della cella e il bordo della cella sul lato destro.
Puoi vedere che c'è uno spazio solo sul lato destro tra i dati e il bordo di tutte le celle. Ciò è dovuto alla proprietà "imbottitura". Di conseguenza, crea solo l'imbottitura necessaria sul lato destro e ignora i restanti tre lati.
Esempio # 4:
Qui, modifichiamo semplicemente il "colore" dell'intestazione, il "bordo" delle celle e il bordo del tavolo a "blu". Stiamo utilizzando la proprietà CSS "imbottitura" in questo momento. La proprietà "imbottitura" influisce solo sull'imbottitura delle celle in alto quando viene utilizzata. Il "imbottitura" è impostato su "55px" in questo caso. Nella parte superiore, ci sarà un divario da 55px tra i dati della cella e il bordo della cella.
Qui, sul lato superiore di ogni cella c'è uno spazio tra i dati e il confine della cella. Ciò è dovuto all'uso della proprietà "imbottitura. Di conseguenza, aggiunge solo l'imbottitura necessaria al lato superiore.
Esempio # 5:
Ora stiamo cambiando il "colore" dell'intestazione, il "bordo" delle cellule e il tavolo in "viola". Stiamo usando la proprietà CSS, "imbottitura". Quando viene applicato l'attributo "imbottito-bottom", imposta solo l'imbottitura delle celle sul fondo. Farà un'imbottitura della cella tra i dati all'interno della cella e il bordo inferiore della cella. In questo scenario, il "imbottitura" è impostato su "53px".
Qui, puoi osservare lo spazio tra i dati all'interno della cella e il bordo inferiore della cella. Mentre usiamo la proprietà "imbottitura-bottom", aggiunge l'imbottitura cellulare solo sul fondo della cella.
Conclusione:
Questa guida ha spiegato in dettaglio il concetto di imbottitura cellulare in CSS. Abbiamo discusso di diverse proprietà di imbottitura qui e abbiamo utilizzato queste proprietà in diversi codici CSS. Abbiamo stabilito che in CSS, regoliamo l'imbottitura della cella su tutti i lati della cella utilizzando la proprietà "imbottitura" e applichiamo l'imbottitura su un lato solo utilizzando proprietà di imbottitura diverse. Abbiamo esaminato una varietà di codici in cui abbiamo usato queste proprietà e gli effetti di queste proprietà sulla cellula del tavolo. Imposterà l'imbottitura della cella dopo aver letto a fondo questa guida.
