Cos'è l'imbottitura delle celle del tavolo in CSS

Per impostazione predefinita, una tabella ha celle molto strette, che potrebbero portare a problemi di visibilità. Per evitare questo, preferiamo usare la proprietà di imbottitura CSS per imbottire le celle di un tavolo. L'imbottitura rende le celle più larghe e più grandi della loro dimensione predefinita. Di conseguenza, la tabella avrà un bell'aspetto con una chiara presentazione dei dati.

In questo articolo, descriveremo come utilizzare l'imbottitura cellulare in una tabella in CSS.

Come utilizzare l'imbottitura delle celle della tabella in CSS?

In CSS, il “imbottitura"La proprietà aggiunge spazio vuoto attorno al contenuto dell'elemento. Viene anche utilizzato per controllare lo spazio da ciascun lato. Ad esempio, l'imbottitura solo dal lato sinistro può essere aggiunta utilizzando la proprietà di imbottitura a sinistra. Allo stesso modo, le proprietà di imbottitura a destra, imbottitura e di imbottitura possono essere utilizzate per creare lo spazio attorno al contenuto dell'elemento da destra, in alto e in basso, rispettivamente.

Per aggiungere imbottitura nella cella della tabella, seguire l'esempio dato.

Esempio 1: Aggiungi imbottitura nelle celle della tabella usando l'imbottitura

Nella nostra pagina HTML, abbiamo un tavolo con blocchi molto stretti. Aggiungiamo un po 'di spazio nei blocchi del tavolo:

Ecco l'attuale codice HTML per la nostra pagina Web:

Linux	Suggerimento
LLC	Stati Uniti d'America

Ora, prendiamo il "td"O la cella dei dati della tabella insieme alla tabella e applica il"stile del bordo"Proprietà come"solido". In questo modo, puoi ottenere il bordo attorno al tavolo e al suo contenuto. Nel passaggio successivo, usa il "imbottitura"Proprietà con il valore"1rem". Di conseguenza, la cella della tabella diventerà più lunga e più ampia:

Salva il tuo file HTML e avvialo sul browser Web per visualizzare il risultato:

Come puoi vedere, l'imbottitura è stata aggiunta con successo alla cella del tavolo:

Esempio 2: regolare l'imbottitura nelle celle della tabella da ciascun lato

In questo esempio, posizioneremo il nostro testo nell'angolo in alto a sinistra della cella. Per questo, assegneremo il "imbottitura"Valore della proprietà come"0px 35px 30px 0px", Dove il primo 0px è per la parte superiore, il secondo valore 35px è per la destra, 30px per il basso e il quarto valore 0px è per l'imbottitura del lato sinistro:

Produzione

Ti abbiamo spiegato cos'è l'imbottitura delle celle della tabella e come usarlo.

Conclusione

Le celle della tabella hanno uno spazio limitato per impostazione predefinita e questo potrebbe causare problemi di leggibilità per lo spettatore. Per questo, il CSS "imbottitura"La proprietà viene utilizzata per aggiungere un po 'di spazio alla cella del tavolo. In questa guida, ti abbiamo aiutato a capire cos'è l'imbottitura delle celle della tabella. Inoltre, abbiamo anche mostrato diversi esempi relativi all'aggiunta di imbottitura cellulare usando CSS.