Kaip pridėti tarpą tarp stulpelių nepaveikiant eilučių HTML lentelėje?
Kairiosios ir dešiniosios užpildymo savybės naudojamos norint pridėti tarpus tarp stulpelių, nepažeidžiant bendro lentelės išdėstymo. Ši savybė leidžia kūrėjams pridėti papildomų tarpų ir šis tarpas neturi įtakos eilutėms.
Atlikite toliau nurodytus veiksmus.
1 veiksmas: sukurkite lentelės struktūrą
Tarkime, kad HTML faile yra lentelė, kurią sudaro keturios eilutės ir trys stulpeliai:
< stalo >
< tr >
< th > vardas < / th >
< th > Klasė < / th >
< th > Miestas < / th >
< / tr >
< tr >
< td > Jonas < / td >
< td > BS Chem < / td >
< td > Londonas < / td >
< / tr >
< tr >
< td > Aleksandras < / td >
< td > BS matematika < / td >
< td > Tokijas < / td >
< / tr >
< tr >
< td > Juozapas < / td >
< td > BS CS < / td >
< td > Niujorkas < / td >
< / tr >
< / stalo >
Įvykdžius aukščiau pateiktą kodą, tinklalapis atrodo taip:
Išvestis patvirtina, kad buvo sukurta lentelės struktūra.
2 veiksmas: uždėkite horizontalų pamušalą
Norėdami pridėti tarpus tarp stulpelių iš kairės, naudokite ' kamšalas-kairėje “ CSS nuosavybė. Pritaikius šią ypatybę, duomenys atrodo kaip tinkamas lygiavimas. Priežastis ta, kad paminkštinimas taikomas tik iš kairės pusės.
Dabar pasirinkite elementą „td“ stilių CSS dalyje, kurią galima taikyti naudojant įterptinį metodą. Tada pridėkite užpildą „ 50 piks “, kad pridėtumėte tarpus ir pridėtumėte kraštinės ypatybę geresniam vizualizavimui:
td {užpildymas kairėje: 50 pikselių;
siena : 2px vientisa raudona;
}
Įvykdžius kodą tinklalapis atrodo taip:
Išvestis rodo, kad tarp lentelės stulpelių pridedamas tarpas.
Dabar, norėdami nustatyti užpildą iš dešinės pusės, „ pamušalas-dešinė “ turtas yra naudojamas. Tokiu pat būdu, bet dabar ląstelių duomenys atrodo ' sulygiuotas kairėje “. Kodas yra:
td {užpildymas kairėje: 50 pikselių;
siena : 2px vientisa raudona;
}
Įvykdžius aukščiau pateiktą kodą, tinklalapis atrodo taip:
Išvestis patvirtina, kad tarpas tarp stulpelių padidinamas dešinėje pusėje uždedant paminkštinimus.
3 veiksmas: kairiojo ir dešiniojo užpildymo derinys
Kaip ir pirmiau minėtame veiksme, abiem atvejais duomenys nėra sulygiuoti centre, todėl duomenys tampa neprofesionalūs. Kad jis būtų matomas nepažeidžiant dizaino prasmės. Abi savybės gali būti naudojamos vienu metu, kaip nurodyta toliau:
td {užpildymas dešinėje: 60 pikselių;
užpildymas kairėje: 60 pikselių;
siena : 2px vientisa raudona;
}
Įvykdžius aukščiau pateiktą kodą, tinklalapis atrodo taip:
Išvestis patvirtina, kad tarp stulpelių pridedamas tarpas, o duomenys taip pat sulygiuoti centre.
Išvada
Tarpas tarp lentelės stulpelių gali būti padidintas naudojant kairiojo ir dešiniojo užpildymo ypatybes. Šios savybės prideda papildomos vietos iš dešinės ir kairės krypčių langelyje. Abi savybės gali būti naudojamos vienu metu arba atskirai. Šiame straipsnyje sėkmingai parodyta, kaip pridėti tarpus tarp lentelės stulpelių nepažeidžiant eilučių.