Jak přidat mezeru mezi sloupce bez ovlivnění řádků v tabulce HTML?
Vlastnosti odsazení vlevo a vpravo se používají k přidání mezer mezi sloupci bez ovlivnění celkového rozvržení tabulky. Tato vlastnost umožňuje vývojářům přidat další mezery a tyto mezery nemají vliv na řádky.
Postupujte podle následujících kroků:
Krok 1: Vytvořte strukturu tabulky
Předpokládejme, že v souboru HTML je tabulka, která obsahuje čtyři řádky a tři sloupce:
< stůl >
< tr >
< čt > název < / čt >
< čt > Třída < / čt >
< čt > Město < / čt >
< / 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 > Josefe < / td >
< td > BS CS < / td >
< td > New York < / td >
< / tr >
< / stůl >
Po provedení výše uvedeného kódu webová stránka vypadá takto:
Výstup potvrzuje, že byla vytvořena struktura tabulky.
Krok 2: Použití horizontální výplně
Chcete-li přidat mezery mezi sloupci z levé strany, použijte „ polstrování-vlevo ” CSS vlastnost. Po použití této vlastnosti vypadají data jako správné zarovnání. Důvodem je, že polstrování je aplikováno pouze z levé strany.
Nyní vyberte prvek „td“ v části CSS stylů, které lze použít pomocí inline metody. Poté přidejte výplň „ 50 pixelů ” pro přidání mezer a vlastnosti border pro účely lepší vizualizace:
td {padding-left: 50px;
okraj : 2px plná červená;
}
Po provedení kódu vypadá webová stránka takto:
Výstup zobrazí, že mezi sloupce tabulky je přidána mezera.
Nyní, chcete-li nastavit výplň z pravé strany, „ vycpávka-vpravo “ Nemovitost je využívána. Stejným způsobem, ale nyní buněčná data vypadají „ zarovnáno doleva “. Kód je:
td {padding-left: 50px;
okraj : 2px plná červená;
}
Po provedení výše uvedeného kódu vypadá webová stránka takto:
Výstup potvrdí, že prostor mezi sloupci se zvětší použitím odsazení na pravé straně.
Krok 3: Kombinace vycpávky vlevo a vpravo
Stejně jako ve výše uvedeném kroku nejsou data v obou případech zarovnána na střed, a proto jsou data neprofesionální. Aby to bylo výrazné, aniž by to narušilo smysl designu. Obě vlastnosti lze využívat současně, jak je uvedeno níže:
td {padding-right: 60px;
padding-left: 60px;
okraj : 2px plná červená;
}
Po provedení výše uvedeného kódu vypadá webová stránka takto:
Výstup potvrzuje, že mezi sloupce je přidána mezera a data jsou také zarovnána na střed.
Závěr
Prostor mezi sloupci tabulky lze přidat pomocí vlastností padding left a right. Tyto vlastnosti přidávají do buňky další prostor zprava a zleva. Obě vlastnosti lze používat současně nebo samostatně. Tento článek úspěšně demonstruje, jak přidat mezery mezi sloupce tabulky bez ovlivnění řádků.