Kuidas lisada veergude vahele tühikut HTML-i tabelis ridu mõjutamata?
Täitmise vasak- ja parempoolseid atribuute kasutatakse veergude vahekauguste lisamiseks, ilma et see mõjutaks tabeli üldist paigutust. See atribuut võimaldab arendajatel lisada täiendavaid tühikuid ja see vahe ei mõjuta ridu.
Järgige alltoodud samme.
1. samm: looge tabelistruktuur
Oletame, et HTML-failis on tabel, mis sisaldab nelja rida ja kolme veergu:
< laud >
< tr >
< th > Nimi < / th >
< th > Klass < / th >
< th > Linn < / th >
< / tr >
< tr >
< td > John < / td >
< td > BS Chem < / td >
< td > London < / td >
< / tr >
< tr >
< td > Aleksander < / td >
< td > BS matemaatika < / td >
< td > Tokyo < / td >
< / tr >
< tr >
< td > Joosep < / td >
< td > BS CS < / td >
< td > New York < / td >
< / tr >
< / laud >
Pärast ülaltoodud koodi käivitamist näeb veebileht välja järgmine:
Väljund kinnitab, et tabeli struktuur on loodud.
2. samm: horisontaalse polsterduse rakendamine
Vasakult veergude vahele tühiku lisamiseks kasutage ' polster-vasak ”CSS-i omadus. Pärast selle atribuudi rakendamist näevad andmed välja õige joondusena. Põhjus on selles, et polsterdust rakendatakse ainult vasakult küljelt.
Nüüd valige stiilide CSS-i osas element 'td', mida saab rakendada sisemise meetodiga. Seejärel lisage täidis 50 pikslit ”, et parema visualiseerimise eesmärgil vahekaugusi ja piiri omadusi lisada:
td {polster-vasak: 50px;
piir : 2px ühevärviline punane;
}
Pärast koodi käivitamist näeb veebileht välja selline:
Väljund näitab, et tabeli veergude vahele lisatakse tühik.
Nüüd, et määrata polsterdus paremalt küljelt, polsterdus-õigus ” vara on kasutusel. Samal viisil, kuid nüüd näevad rakuandmed välja ' vasakule joondatud ”. Kood on:
td {polster-vasak: 50px;
piir : 2px ühevärviline punane;
}
Pärast ülaltoodud koodi käivitamist näeb veebileht välja selline:
Väljund kinnitab, et veergude vahelist ruumi suurendatakse paremale küljele polsterduse lisamisega.
3. samm: vasaku ja parema polsterduse kombinatsioon
Nagu ülaltoodud etapis, ei ole andmed mõlemal juhul keskele joondatud ja see muudab andmed ebaprofessionaalseks. Et muuta see silmapaistvaks ilma disaini mõtet rikkumata. Mõlemat omadust saab kasutada samaaegselt järgmiselt:
td {polsterdus-parem: 60px;
polster-vasak: 60px;
piir : 2px ühevärviline punane;
}
Pärast ülaltoodud koodi käivitamist näeb veebileht välja selline:
Väljund kinnitab, et veergude vahele lisatakse ruum ja andmed on samuti joondatud keskele.
Järeldus
Tabeli veergude vahelist ruumi saab lisada vasak- ja parempoolsete atribuutide abil. Need omadused lisavad lahtrisse lisaruumi paremalt ja vasakult suunalt. Mõlemaid omadusi saab kasutada korraga või eraldi. See artikkel on edukalt näidanud, kuidas lisada tabeli veergude vahele tühikuid ridu mõjutamata.