Како додати размак између колона без утицаја на редове у ХТМЛ табели?
Својства допуна лево и десно се користе за додавање размака између колона без утицаја на укупан изглед табеле. Ово својство омогућава програмерима да додају додатни размак и овај размак не утиче на редове.
Следите доле наведене кораке:
Корак 1: Креирајте структуру табеле
Претпоставимо да постоји табела у ХТМЛ датотеци која садржи четири реда и три колоне:
< сто >
< тр >
< тх > Име < / тх >
< тх > Класа < / тх >
< тх > Цити < / тх >
< / тр >
< тр >
< тд > Јохн < / тд >
< тд > БС Цхем < / тд >
< тд > Лондон < / тд >
< / тр >
< тр >
< тд > Александар < / тд >
< тд > БС Матх < / тд >
< тд > Токио < / тд >
< / тр >
< тр >
< тд > Јосепх < / тд >
< тд > БС ЦС < / тд >
< тд > Њу Јорк < / тд >
< / тр >
< / сто >
Након извршавања горњег кода веб страница изгледа овако:
Излаз потврђује да је структура табеле креирана.
Корак 2: Примена хоризонталне подлоге
Да бисте додали размак између колона са леве стране, користите „ паддинг-лево ” ЦСС својство. Након примене овог својства, подаци изгледају као право поравнање. Разлог је тај што се паддинг примењује само са леве стране.
Сада изаберите елемент „тд“ у ЦСС делу стилова који се могу применити помоћу инлине методе. Затим додајте допуну од „ 50пк ” да бисте додали размак и додали својство границе ради боље визуелизације:
тд {паддинг-лефт: 50пк;
граница : 2пк пуна црвена;
}
Након извршавања кода, веб страница изгледа овако:
Излаз показује да је размак додат између колона табеле.
Сада, да поставите паддинг са десне стране, „ паддинг-десно ” имовина се користи. На исти начин, али сада подаци о ћелији изгледају „ лево поравнато ”. код је:
тд {паддинг-лефт: 50пк;
граница : 2пк пуна црвена;
}
Након извршавања горњег кода, веб страница изгледа овако:
Излаз потврђује да се размак између колона повећава применом обруба на десној страни.
Корак 3: Комбинација паддинга лево и десно
Као иу претходном кораку, подаци нису центрирани у оба случаја и то их чини непрофесионалним. Да буде истакнут без нарушавања смисла дизајна. Оба својства се могу користити у исто време као у наставку:
тд {паддинг-ригхт: 60пк;
паддинг-лефт: 60пк;
граница : 2пк пуна црвена;
}
Након извршавања горњег кода, веб страница изгледа овако:
Излаз потврђује да је размак додат између колона и да су подаци такође центрирани.
Закључак
Размак између колона табеле може се додати уз помоћ допуна лево и десно својстава. Ова својства додају додатни простор ћелији из десног и левог смера. Оба својства се могу користити истовремено или одвојено. Овај чланак је успешно показао како додати размаке између колона табеле без утицаја на редове.