Come aggiungere spazio tra le colonne senza influire sulle righe in una tabella HTML?
Le proprietà padding left e right vengono utilizzate per aggiungere spaziatura tra le colonne senza influire sul layout generale della tabella. Questa proprietà consente agli sviluppatori di aggiungere ulteriore spaziatura e questa spaziatura non influisce sulle righe.
Segui i passaggi seguenti:
Passaggio 1: creare una struttura della tabella
Supponiamo che ci sia una tabella nel file HTML che contiene quattro righe e tre colonne:
< tavolo >
< tr >
< th > Nome < / th >
< th > Classe < / th >
< th > Città < / th >
< / tr >
< tr >
< td > John < / td >
< td > BS Chim < / td >
< td > Londra < / td >
< / tr >
< tr >
< td > Alessandro < / td >
< td > BS Matematica < / td >
< td > Tokio < / td >
< / tr >
< tr >
< td > Giuseppe < / td >
< td > BS CS < / td >
< td > New York < / td >
< / tr >
< / tavolo >
Dopo aver eseguito il codice di cui sopra, la pagina web si presenta così:
L'output conferma che è stata creata una struttura di tabella.
Passaggio 2: applicazione del riempimento orizzontale
Per aggiungere spaziatura tra le colonne dal lato sinistro, utilizzare il ' padding-sinistra Proprietà CSS. Dopo aver applicato questa proprietà, i dati sembrano allineati correttamente. Il motivo è che l'imbottitura viene applicata solo dal lato sinistro.
Ora seleziona l'elemento 'td' nella parte CSS degli stili che possono essere applicati utilizzando il metodo inline. Quindi, aggiungi il riempimento di ' 50 pixel ” per aggiungere la spaziatura e aggiungere la proprietà del bordo per una migliore visualizzazione:
td {padding-sinistra: 50px;
confine : 2px rosso fisso;
}
Dopo aver eseguito il codice, la pagina web si presenta così:
L'output mostra che lo spazio è stato aggiunto tra le colonne della tabella.
Ora, per impostare il padding dal lato destro, il ' padding-right ” la proprietà è utilizzata. Allo stesso modo, ma ora i dati delle celle sembrano ' allineato a sinistra ”. Il codice è:
td {padding-sinistra: 50px;
confine : 2px rosso fisso;
}
Dopo aver eseguito il codice sopra, la pagina web si presenta così:
L'output conferma che lo spazio tra le colonne viene aumentato applicando il riempimento sul lato destro.
Passaggio 3: combinazione di imbottitura sinistra e destra
Come nel passaggio precedente, i dati non sono allineati al centro in entrambi i casi e ciò rende i dati poco professionali. Per renderlo prominente senza rompere il senso del design. Entrambe le proprietà possono essere utilizzate contemporaneamente come di seguito:
td {padding-destra: 60px;
padding-sinistra: 60px;
confine : 2px rosso fisso;
}
Dopo aver eseguito il codice sopra, la pagina web si presenta così:
L'output conferma che lo spazio è stato aggiunto tra le colonne e che anche i dati sono allineati al centro.
Conclusione
Lo spazio tra le colonne della tabella può essere aggiunto con l'aiuto delle proprietà di riempimento sinistro e destro. Queste proprietà aggiungono ulteriore spazio dalle direzioni destra e sinistra alla cella. Entrambe le proprietà possono essere utilizzate contemporaneamente o separatamente. Questo articolo ha dimostrato con successo come aggiungere spaziatura tra le colonne della tabella senza influire sulle righe.