Hogyan lehet szóközt hozzáadni az oszlopok között a HTML-táblázat sorainak befolyásolása nélkül?
A bal és jobb oldali kitöltési tulajdonságok az oszlopok közötti térköz hozzáadására szolgálnak anélkül, hogy ez befolyásolná a táblázat általános elrendezését. Ez a tulajdonság lehetővé teszi a fejlesztők számára, hogy extra szóközt adjanak hozzá, és ez a szóköz nincs hatással a sorokra.
Kövesse az alábbi lépéseket:
1. lépés: Hozzon létre egy táblázatszerkezetet
Tegyük fel, hogy van egy táblázat a HTML-fájlban, amely négy sort és három oszlopot tartalmaz:
< asztal >
< tr >
< th > Név < / th >
< th > Osztály < / th >
< th > Város < / th >
< / tr >
< tr >
< td > János < / td >
< td > BS Chem < / td >
< td > London < / td >
< / tr >
< tr >
< td > Sándor < / td >
< td > BS Math < / td >
< td > Tokió < / td >
< / tr >
< tr >
< td > József < / td >
< td > BS CS < / td >
< td > New York < / td >
< / tr >
< / asztal >
A fenti kód végrehajtása után a weboldal így néz ki:
A kimenet megerősíti, hogy létrejött a táblastruktúra.
2. lépés: Vízszintes párnázás alkalmazása
Az oszlopok közötti térköz bal oldalról történő hozzáadásához használja a „ padding-bal ” CSS tulajdonság. A tulajdonság alkalmazása után az adatok a megfelelő igazításnak tűnnek. Ennek az az oka, hogy a párnázást csak a bal oldalon alkalmazzák.
Most válassza ki a „td” elemet a stílusok CSS részében, amelyek a beágyazott módszerrel alkalmazhatók. Ezután adja hozzá a ' 50 képpont ” szóköz hozzáadásához és border tulajdonság hozzáadásához a jobb megjelenítés érdekében:
td {padding-bal: 50px;
határ : 2px egyszínű piros;
}
A kód végrehajtása után a weboldal így néz ki:
A kimenet azt mutatja, hogy a táblázat oszlopai közé szóköz kerül hozzáadásra.
Most a jobb oldali párnázás beállításához a „ padding-right ” ingatlan hasznosítva van. Ugyanilyen módon, de most a cellaadatok úgy néznek ki, mint ' balra igazítva ”. A kód:
td {padding-bal: 50px;
határ : 2px egyszínű piros;
}
A fenti kód végrehajtása után a weboldal így néz ki:
A kimenet megerősíti, hogy az oszlopok közötti távolság megnő a jobb oldali párnázással.
3. lépés: A bal és jobb oldali párnázás kombinációja
A fenti lépéshez hasonlóan az adatok mindkét esetben nincsenek középre igazítva, és emiatt az adatok nem professzionálisak. Hogy feltűnő legyen anélkül, hogy megsértené a tervezési értelmet. Mindkét tulajdonság egyszerre használható az alábbiak szerint:
td {padding-right: 60px;
padding-bal: 60px;
határ : 2px egyszínű piros;
}
A fenti kód végrehajtása után a weboldal így néz ki:
A kimenet megerősíti, hogy az oszlopok között helyet adtunk, és az adatok is középre igazítva vannak.
Következtetés
A táblázat oszlopai közötti térköz a bal és jobb oldali tulajdonságok kitöltésével bővíthető. Ezek a tulajdonságok több helyet adnak a cellának jobbról és balról. Mindkét tulajdonság használható egyszerre vagy külön-külön is. Ez a cikk sikeresen bemutatta, hogyan lehet szóközt hozzáadni a táblázat oszlopai között a sorok befolyásolása nélkül.