Ako pridať medzeru medzi stĺpce bez ovplyvnenia riadkov v tabuľke HTML?
Vlastnosti výplne vľavo a vpravo sa používajú na pridanie medzier medzi stĺpce bez ovplyvnenia celkového rozloženia tabuľky. Táto vlastnosť umožňuje vývojárom pridať ďalšie medzery a tieto medzery neovplyvňujú riadky.
Postupujte podľa nasledujúcich krokov:
Krok 1: Vytvorte štruktúru tabuľky
Predpokladajme, že v súbore HTML je tabuľka, ktorá obsahuje štyri riadky a tri stĺpce:
< tabuľky >
< tr >
< th > názov < / th >
< th > Trieda < / th >
< th > Mesto < / th >
< / tr >
< tr >
< td > John < / td >
< td > BS Chem < / td >
< td > Londýn < / td >
< / tr >
< tr >
< td > Alexander < / td >
< td > BS Math < / td >
< td > Tokio < / td >
< / tr >
< tr >
< td > Jozefa < / td >
< td > BS CS < / td >
< td > New York < / td >
< / tr >
< / tabuľky >
Po vykonaní vyššie uvedeného kódu webová stránka vyzerá takto:
Výstup potvrdzuje, že štruktúra tabuľky bola vytvorená.
Krok 2: Aplikácia horizontálnej výplne
Ak chcete pridať medzery medzi stĺpce z ľavej strany, použite „ polstrovanie-vľavo ” CSS vlastnosť. Po použití tejto vlastnosti vyzerajú údaje ako správne zarovnanie. Dôvodom je, že výplň sa aplikuje iba z ľavej strany.
Teraz vyberte prvok „td“ v časti CSS štýlov, ktoré možno použiť pomocou inline metódy. Potom pridajte výplň „ 50 pixelov ” na pridanie medzier a vlastnosti ohraničenia na účely lepšej vizualizácie:
td {padding-left: 50px;
hranica : 2px plná červená;
}
Po vykonaní kódu bude webová stránka vyzerať takto:
Výstup zobrazuje, že medzi stĺpce tabuľky sa pridá medzera.
Teraz, ak chcete nastaviť výplň z pravej strany, „ polstrovanie-vpravo “ nehnuteľnosť je využívaná. Rovnakým spôsobom, ale teraz údaje bunky vyzerajú „ zarovnané doľava “. Kód je:
td {padding-left: 50px;
hranica : 2px plná červená;
}
Po vykonaní vyššie uvedeného kódu bude webová stránka vyzerať takto:
Výstup potvrdzuje, že priestor medzi stĺpcami sa zväčší použitím výplne na pravej strane.
Krok 3: Kombinácia čalúnenia vľavo a vpravo
Rovnako ako vo vyššie uvedenom kroku, údaje nie sú v oboch prípadoch zarovnané na stred, a preto sú údaje neprofesionálne. Aby to bolo výrazné bez narušenia zmyslu pre dizajn. Obe vlastnosti je možné využívať súčasne, ako je uvedené nižšie:
td {padding-right: 60px;
padding-left: 60px;
hranica : 2px plná červená;
}
Po vykonaní vyššie uvedeného kódu bude webová stránka vyzerať takto:
Výstup potvrdí, že medzi stĺpce sa pridá medzera a údaje sú tiež zarovnané na stred.
Záver
Priestor medzi stĺpcami tabuľky je možné pridať pomocou vlastností výplne vľavo a vpravo. Tieto vlastnosti pridávajú do bunky ďalší priestor z pravej a ľavej strany. Obe vlastnosti môžu byť použité súčasne alebo oddelene. Tento článok úspešne ukázal, ako pridať medzery medzi stĺpce tabuľky bez ovplyvnenia riadkov.