CSS - Come rimuovere completamente i bordi dalla tabella HTML

Css Come Rimuovere Completamente I Bordi Dalla Tabella Html



La tabella è un componente importante della pagina HTML utilizzata per archiviare e organizzare i dati. Gli sviluppatori possono progettare la tabella HTML utilizzando le proprietà CSS, come colore di sfondo, bordo, margine, riempimento, ecc. Il CSS ' frontiera La proprietà ” viene utilizzata per impostare i bordi attorno a tabelle e celle. Tuttavia, in alcuni scenari, gli utenti non richiedono un bordo per lo styling.

Questo post spiegherà come rimuovere completamente i bordi dall'HTML usando i CSS.

Come rimuovere completamente i bordi dalla tabella HTML?

Se gli utenti vogliono rimuovere completamente i bordi da una tabella HTML, guarda le istruzioni.





Passaggio 1: crea una tabella con bordo

Per creare una tabella in HTML, segui le istruzioni:



  • Innanzitutto, aggiungi un elemento tabella ' ' insieme con il ' frontiera 'attributo.
  • Poi il ' ” tag viene aggiunto per creare il numero desiderato di righe.
  • Le celle di intestazione sono specificate utilizzando ' ” tag.
  • Dopo di che, ' ” i tag sono inclusi in altri “ ' tag per l'aggiunta di celle di dati:
< tavolo frontiera = '1px' >

< tr > < th > Nome < / th > < th > ID < / th > < th > Categoria < / th >< / tr >

< tr > < td > Jenny < / td > < td > 001 < / td > < td > UN < / td >< / tr >

< tr > < td > Oceano < / td > < td > 002 < / td > < td > B < / td >< / tr >

< tr > < td > Grande < / td > < td > 003 < / td > < td > C < / td >< / tr >

< / tavolo >

Per definire lo stile della tabella HTML, utilizzeremo le seguenti proprietà CSS:



>

tavolo {

imbottitura : 10px ;

margine : auto ;

frontiera : 1 pixel solido Nero :

}

>

Dentro il ' ” , accedi all'elemento

usando il suo tag. Quindi, applica le seguenti proprietà:





  • margine ” proprietà con il valore “ auto ” viene utilizzato per impostare uno spazio uguale attorno all'elemento.
  • imbottitura ” proprietà con il valore “ 10px ” imposta lo spazio di 10px attorno al contenuto dell'elemento.
  • frontiera La proprietà ” applica il bordo intorno alla tabella.

Produzione



Passaggio 2: rimuovi il bordo in CSS

Per rimuovere il bordo dalla tabella, gli utenti devono impostare ' frontiera ” proprietà come “ nessuno ”:

tavolo {

imbottitura : 10px ;

margine : auto ;

frontiera : nessuno ;

}

Si può osservare che il bordo esterno della tabella è stato rimosso con successo:

Passaggio 3: rimuovere completamente il bordo della tabella

Inoltre, se vuoi rimuovere l'intero bordo dalla tabella oltre che dalle celle, imposta ' frontiera ” proprietà come “ nessuno ” su tutti gli elementi, incluso “ tavolo ”, “ tr ”, “ th ', e ' td ”:

tabella, tr, td, th{

imbottitura: 10px;

margine: automobile;

bordo: nessuno;

}

L'output seguente indica che abbiamo completamente rimosso il bordo dalla tabella HTML:

Abbiamo dimostrato il metodo per rimuovere completamente i bordi dalle tabelle HTML.

Conclusione

Per rimuovere completamente il bordo dalla tabella HTML, crea prima una tabella. Successivamente, applica le proprietà CSS ' frontiera ”, “ imbottitura ', e ' margine ' sul tavolo. Quindi, imposta la proprietà border come ' nessuno ” su tutti gli elementi della tabella, come “ tavolo ”, “ tr ”, “ td ', e ' th ”. Questo tutorial ha dimostrato il metodo per rimuovere completamente il bordo dalla tabella HTML.