Hoe kan ik ruimte tussen kolommen toevoegen zonder rijen in een HTML-tabel te beïnvloeden?
De eigenschappen padding left en right worden gebruikt om ruimte tussen kolommen toe te voegen zonder de algehele lay-out van de tabel te beïnvloeden. Met deze eigenschap kunnen ontwikkelaars extra afstand toevoegen en deze afstand heeft geen invloed op rijen.
Volg de onderstaande stappen:
Stap 1: Maak een tabelstructuur
Laten we aannemen dat er een tabel in het HTML-bestand is die vier rijen en drie kolommen bevat:
< tafel >
< tr >
< e > Naam < / e >
< e > Klas < / e >
< e > Stad < / e >
< / tr >
< tr >
< td > John < / td >
< td > BS Chem < / td >
< td > Londen < / td >
< / tr >
< tr >
< td > Alexander < / td >
< td > BS Wiskunde < / td >
< td > Tokio < / td >
< / tr >
< tr >
< td > Jozef < / td >
< td > BS CS < / td >
< td > New York < / td >
< / tr >
< / tafel >
Na het uitvoeren van de bovenstaande code ziet de webpagina er als volgt uit:
De uitvoer bevestigt dat er een tabelstructuur is gemaakt.
Stap 2: Horizontale vulling toepassen
Gebruik de ' padding-links ” CSS-eigenschap. Na het toepassen van deze eigenschap, lijken de gegevens op de juiste uitlijning. De reden is dat padding alleen vanaf de linkerkant wordt aangebracht.
Selecteer nu het 'td' -element in het CSS-gedeelte van de stijlen die kunnen worden toegepast met behulp van de inline-methode. Voeg vervolgens opvulling toe van ' 50px ” om afstand toe te voegen en grenseigenschap toe te voegen voor betere visualisatiedoeleinden:
td {opvulling links: 50px;
grens : 2px effen rood;
}
Na het uitvoeren van de code ziet de webpagina er als volgt uit:
De uitvoer geeft aan dat de ruimte is toegevoegd tussen de kolommen van de tabel.
Om nu de opvulling vanaf de rechterkant in te stellen, de ' opvulling-rechts ” onroerend goed wordt gebruikt. Op dezelfde manier, maar nu ziet celdata eruit ' Links uitgelijnd ”. De code is:
td {opvulling links: 50px;
grens : 2px effen rood;
}
Na het uitvoeren van bovenstaande code ziet de webpagina er als volgt uit:
De uitvoer bevestigt dat de ruimte tussen de kolommen wordt vergroot door opvulling aan de rechterkant toe te passen.
Stap 3: Combinatie van opvulling links en rechts
Net als in de bovenstaande stap zijn de gegevens in beide gevallen niet gecentreerd en dat maakt de gegevens onprofessioneel. Om het prominent te maken zonder het ontwerpgevoel te breken. Beide eigenschappen kunnen tegelijkertijd worden gebruikt, zoals hieronder:
td {opvulling-rechts: 60px;
opvulling links: 60px;
grens : 2px effen rood;
}
Na het uitvoeren van bovenstaande code ziet de webpagina er als volgt uit:
De uitvoer bevestigt dat de ruimte tussen de kolommen is toegevoegd en dat de gegevens ook in het midden zijn uitgelijnd.
Conclusie
De ruimte tussen de tabelkolommen kan worden toegevoegd met behulp van opvulling links en rechts eigenschappen. Deze eigenschappen voegen extra ruimte van rechts en links toe aan de cel. Beide eigenschappen kunnen tegelijkertijd of afzonderlijk worden gebruikt. Dit artikel heeft met succes gedemonstreerd hoe u afstand tussen de tabelkolommen kunt toevoegen zonder rijen te beïnvloeden.