Kako dodati razmak između stupaca bez utjecaja na retke u HTML tablici?
Svojstva padding left i right koriste se za dodavanje razmaka između stupaca bez utjecaja na cjelokupni izgled tablice. Ovo svojstvo programerima omogućuje dodavanje dodatnog razmaka, a taj razmak ne utječe na retke.
Slijedite korake u nastavku:
Korak 1: Napravite strukturu tablice
Pretpostavimo da u HTML datoteci postoji tablica koja sadrži četiri retka i tri stupca:
< stol >
< tr >
< th > Ime < / th >
< th > Klasa < / th >
< th > Grad < / th >
< / tr >
< tr >
< td > Ivan < / td >
< td > BS Chem < / td >
< td > London < / td >
< / tr >
< tr >
< td > Aleksandar < / td >
< td > Diplomirani matematik < / td >
< td > Tokio < / td >
< / tr >
< tr >
< td > Josipa < / td >
< td > BS CS < / td >
< td > New York < / td >
< / tr >
< / stol >
Nakon izvršavanja gornjeg koda web stranica izgleda ovako:
Izlaz potvrđuje da je struktura tablice stvorena.
Korak 2: Primjena vodoravne podloge
Da biste dodali razmak između stupaca s lijeve strane, koristite ' padding-lijevo ” CSS svojstvo. Nakon primjene ovog svojstva, podaci izgledaju kao pravo poravnanje. Razlog je taj što se ispuna primjenjuje samo s lijeve strane.
Sada odaberite element 'td' u CSS dijelu stilova koji se mogu primijeniti pomoću inline metode. Zatim dodajte ispunu od ' 50 px ” za dodavanje razmaka i dodavanje svojstva obruba u svrhu bolje vizualizacije:
td {padding-left: 50px;
granica : 2 px puno crveno;
}
Nakon izvršavanja koda, web stranica izgleda ovako:
Izlaz prikazuje da je razmak dodan između stupaca tablice.
Sada, da postavite ispunu s desne strane, ' padding-desno ” nekretnina se koristi. Na isti način, ali sada podaci ćelije izgledaju ' lijevo poravnato ”. Šifra je:
td {padding-left: 50px;
granica : 2 px puno crveno;
}
Nakon izvršavanja gornjeg koda, web stranica izgleda ovako:
Izlaz potvrđuje da je prostor između stupaca povećan primjenom ispune s desne strane.
Korak 3: Kombinacija ispune lijevo i desno
Kao u prethodnom koraku, podaci nisu centrirani u oba slučaja i to ih čini neprofesionalnima. Da bude istaknut bez narušavanja smisla dizajna. Oba svojstva mogu se koristiti u isto vrijeme kao u nastavku:
td {padding-desno: 60px;
padding-left: 60px;
granica : 2 px puno crveno;
}
Nakon izvršavanja gornjeg koda, web stranica izgleda ovako:
Izlaz potvrđuje da je razmak dodan između stupaca i da su podaci također poravnati po sredini.
Zaključak
Razmak između stupaca tablice može se dodati uz pomoć svojstava padding left i right. Ova svojstva ćeliji dodaju dodatni prostor s desne i lijeve strane. Oba svojstva mogu se koristiti istovremeno ili odvojeno. Ovaj je članak uspješno pokazao kako dodati razmak između stupaca tablice bez utjecaja na retke.