Spaziatura cellulare CSS

In questo articolo, esamineremo numerose opzioni stilistiche che forniranno componenti della tabella come le intestazioni della tabella e le celle dei dati della tabella un po 'di spaziatura. L'attributo CSS più utilizzato in questa circostanza è la proprietà di spaziatura delle frontiere che verrà esplorata e implementata in questo tutorial utilizzando l'IDE IDE. Per applicare questa nozione in un file HTML, verranno utilizzate molte opzioni stilistiche come CSS in linea e il metodo CSS di stile.

Esempio 01: Utilizzo dell'approccio del tag in stile CSS per aggiungere la spaziatura alle celle della tabella in un file HTML

In questo esempio, spaziamo le celle del tavolo usando la proprietà di spaziatura del bordo. In questo esempio, il metodo CSS Tag Style verrà utilizzato per aggiungere funzionalità stilistiche ai componenti della tabella. L'IDE Notepad ++ verrà utilizzato per modificare il file HTML.

Nello script sopra, inizieremo con l'intestazione del file in cui apriremo il tag di stile. In questo tag, daremo due proprietà di stile a tutti gli elementi generalizzando gli elementi e creando classi separate per loro. Innanzitutto, definiremo lo stile per l'intero tavolo in cui definiremo la proprietà di spaziatura del bordo che assegnerà quindi uno spazio specificato tra il contenuto di una cella e il suo bordo.

Quindi, creeremo un'altra classe di stile. In questa classe, daremo uno stile all'intestazione della tabella, ai dati della tabella e alla tabella stessa, definendo la lunghezza, la forma e il colore del bordo. Quindi chiuderemo lo stile e la tag della testa e apriremo il tag del corpo. Nel tag del corpo, creeremo una tabella con due righe. Nella prima riga, daremo alla tabella tre colonne usando il tag "Th" che definisce l'intestazione della tabella. Nella seconda riga, inseriremo il contenuto nelle colonne della tabella utilizzando il tag "TD". Quindi chiuderemo il tag della tabella e il tag corporeo. Salvare questa sceneggiatura in ".Il formato HTML ”ci consentirà di aprirlo sul nostro browser e ottenere il seguente output:

Nel risultato di cui sopra possiamo vedere che le diverse celle della tabella hanno una distanza regolare tra loro che è stata determinata nell'attributo di spaziatura del bordo all'interno del tag di stile.

Esempio 02: Utilizzo dell'approccio in linea in linea CSS per aggiungere la spaziatura alle celle della tabella in un file HTML

In questo esempio, utilizzeremo la proprietà di spaziatura del bordo e un po 'di stile per fornire componenti della tabella come l'intestazione della tabella e i dati della tabella un po' di spaziatura. L'approccio CSS in linea verrà utilizzato in questo esempio per applicare le caratteristiche di stile ai componenti della tabella.

Nello script sopra, inizieremo con il corpo del file in cui apriremo il tag di stile in ogni elemento individualmente. Innanzitutto, apriremo il tag della tabella e assegneremo CSS tramite la parola chiave di stile. Assegnare al tavolo un bordo di larghezza "1px", forma solida e colore nero insieme alla proprietà di spaziatura del bordo. Quindi, apriremo la nostra prima riga della tabella in cui definiremo i nomi delle colonne usando il tag "Th", in cui useremo anche CSS in linea per dare proprietà di stile all'elemento. Successivamente, aggiungeremo un'altra riga in cui definiremo i dati della tabella utilizzando il tag "TD" e utilizzare CSS in linea per dare ai dati anche un bordo. Quindi chiuderemo il tavolo e il tag del corpo. Salvemo questo file e lo apriremo sul nostro browser per ottenere il risultato di questo script sulla pagina del nostro browser.

Nello snippet sopra, possiamo osservare che entrambe le righe del tavolo hanno alcuni spazi tra loro che è stato definito nei tag da CSS in linea.

Esempio 03: Utilizzo della tecnica CSS di spaziatura del bordo a due dimensioni per una tabella in un file HTML

In questo esempio, useremo l'attributo di spaziatura del bordo a doppia dimensione per dare una spaziatura delle cellule del tavolo. In questo esempio, la tecnica CSS Tag Style verrà utilizzata per applicare caratteristiche stilistiche ai componenti della tabella.

Nello script seguente, inizieremo con l'intestazione del file in cui apriremo il tag di stile. Generalizzando i componenti e stabilendo classi distinte per ciascuno, ne forniremo tutti due parametri di stile in questo tag. Innanzitutto, creeremo lo stile per l'intero tavolo, inclusa la proprietà di spaziatura del bordo, che assegnerà una distanza definita tra il contenuto di una cella e il suo bordo in due dimensioni in modo indipendente.

Quindi, in un'altra classe di stile, applicheremo lo stile all'intestazione della tabella, ai dati della tabella e alla tabella stessa impostando la lunghezza, la forma e il colore del bordo. Lo stile e le etichette della testa verranno quindi chiuse mentre verrà aperto il tag del corpo. Faremo un tavolo con due righe nel tag del corpo. Il tag "Th" verrà utilizzato nella prima riga per specificare l'intestazione della tabella. E il tag "TD" verrà utilizzato nella seconda riga per inserire i dati nelle colonne della tabella. Quindi, chiuderemo i tag del tavolo e del corpo salvando questo script in ".Formato HTML "in modo da poterlo eseguire nel nostro browser e ottenere i seguenti risultati:

Nell'output sopra, possiamo vedere che le singole celle della tabella hanno due diversi spazi orizzontalmente e verticalmente tra loro che è stato definito nella proprietà di spaziatura del bordo all'interno del tag di stile.

Esempio 04: utilizzando il metodo alternativo per assegnare lo spazio tra gli elementi della tabella

In questo esempio, utilizzeremo l'alternativa della proprietà di spaziatura delle frontiere per fornire un certo stile ai componenti della tabella come l'intestazione della tabella e i dati della tabella. L'approccio CSS di stile di stile verrà utilizzato in questo esempio per assegnare attributi stilistici ai componenti della tabella.

Nello script seguente, inizieremo con l'intestazione del file e apriremo il tag-by di stile riassumendo i componenti e assegnando una singola classe a ciascuna parte. Innanzitutto, progetteremo lo stile per l'intero tavolo, inclusa la funzione di collasso del bordo, che collassa il bordo di ciascun elemento per aggiungere spazio tra loro. L'intestazione della tabella, i dati della tabella e lo stesso tavolo verranno quindi disegnati regolando la lunghezza del bordo, la forma e il colore. Il tag del corpo verrà quindi aperto, ma lo stile e le tag della testa saranno chiusi.

Nel tag del corpo, creeremo una tabella con due righe. Il tag "Th", che specifica l'intestazione della tabella verrà utilizzato nella prima riga per dare alla tabella tre colonne. Il tag "TD" verrà utilizzato nella seconda riga per mettere le informazioni nelle colonne della tabella. Quindi chiuderemo il tavolo e le etichette del corpo. Memorizzeremo questa sceneggiatura in ".Formato HTML "in modo da poterlo accedervi nel nostro browser e ricevere il seguente output:

Nell'output sopra, è visibile che gli elementi del tavolo abbiano un singolo bordo con un po 'di spazio a causa della proprietà del crollo del bordo.

Conclusione:

In questo articolo, abbiamo discusso di diverse proprietà di styling che ci hanno aiutato a dare una spaziatura alle cellule del tavolo. La proprietà di spaziatura delle frontiere è la proprietà più utilizzata in questo scenario che è stato discusso e implementato in questo articolo utilizzando l'IDE IDEPAD ++. Abbiamo aggiunto tre esempi unici insieme alla loro spiegazione per ogni passo per la facilità dei nostri utenti.