CSS - Randen volledig verwijderen uit HTML-tabel

Css Randen Volledig Verwijderen Uit Html Tabel



De tabel is een belangrijk onderdeel van de HTML-pagina die wordt gebruikt om de gegevens op te slaan en te ordenen. Ontwikkelaars kunnen de HTML-tabel ontwerpen met behulp van CSS-eigenschappen, zoals achtergrondkleur, rand, marge, opvulling, enz. De CSS “ grens ” eigenschap wordt gebruikt om randen rond tabellen en cellen in te stellen. Maar in sommige scenario's hebben gebruikers geen rand nodig voor styling.

In dit bericht wordt uitgelegd hoe je randen uit HTML volledig kunt verwijderen met behulp van CSS.

Hoe volledig verwijderen van randen uit HTML-tabel?

Als gebruikers randen volledig uit een HTML-tabel willen verwijderen, bekijk dan de instructies.







Stap 1: maak een tabel met rand

Volg de instructies om een ​​tabel in HTML te maken:



  • Voeg eerst een tabelelement toe ' ' samen met de ' grens ” attribuut.
  • Dan de ' ” tag wordt toegevoegd om het gewenste aantal rijen te maken.
  • De kopcellen worden gespecificeerd met ' 'labels.
  • Daarna, ' 'tags zijn opgenomen in andere' ” Tags voor het toevoegen van gegevenscellen:
< tafel grens = '1px' >

< tr > < e > Naam < / e > < e > ID kaart < / e > < e > Categorie < / e >< / tr >

< tr > < td > Jenny < / td > < td > 001 < / td > < td > EEN < / td >< / tr >

< tr > < td > Oceaan < / td > < td > 002 < / td > < td > B < / td >< / tr >

< tr > < td > Groot < / td > < td > 003 < / td > < td > C < / td >< / tr >

< / tafel >

Voor het opmaken van de HTML-tabel gebruiken we de volgende CSS-eigenschappen:



>

tafel {

opvulling : 10px ;

marge : auto ;

grens : 1px solide zwart :

}

>

Binnen in de ' '-tag, opent u het

-element met behulp van de tag. Pas vervolgens de volgende eigenschappen toe:





  • marge ” eigenschap met de waarde “ auto ” wordt gebruikt om gelijke ruimte rond het element in te stellen.
  • opvulling ” eigenschap met de waarde “ 10px ” stelt de ruimte van 10px rond de inhoud van het element in.
  • grens ” eigenschap past de rand rond de tafel toe.

Uitgang



Stap 2: Rand in CSS verwijderen

Om de rand van de tafel te verwijderen, moeten gebruikers de ' grens ” eigendom als “ geen ”:

tafel {

opvulling : 10px ;

marge : auto ;

grens : geen ;

}

U kunt zien dat de buitenste rand van de tafel met succes is verwijderd:

Stap 3: verwijder de tabelrand volledig

Als u bovendien de volledige rand van de tabel en van cellen wilt verwijderen, stelt u ' grens ” eigendom als “ geen ” op alle elementen, inclusief “ tafel ”, “ tr ”, “ e ', en ' td ”:

tafel, tr, td, th{

opvulling: 10px;

marge: automatisch;

grens: geen;

}

De onderstaande uitvoer geeft aan dat we de rand volledig uit de HTML-tabel hebben verwijderd:

We hebben de methode gedemonstreerd om randen volledig uit HTML-tabellen te verwijderen.

Conclusie

Maak eerst een tabel om de rand volledig uit de HTML-tabel te verwijderen. Pas daarna CSS-eigenschappen toe ' grens ”, “ opvulling ', en ' marge ' op de tafel. Stel vervolgens de grenseigenschap in als ' geen ” op alle tafelelementen, zoals “ tafel ”, “ tr ”, “ td ', en ' e ”. Deze tutorial heeft de methode gedemonstreerd voor het volledig verwijderen van de rand van de HTML-tabel.