Как да добавите интервал между колоните, без да засягате редовете в HTML таблица?
Свойствата padding left и right се използват за добавяне на разстояние между колоните, без да се засяга цялостното оформление на таблицата. Това свойство позволява на разработчиците да добавят допълнително разстояние и това разстояние не засяга редовете.
Следвайте стъпките по-долу:
Стъпка 1: Създайте структура на таблица
Да приемем, че в HTML файла има таблица, която съдържа четири реда и три колони:
< маса >
< тр >
< th > Име < / th >
< th > Клас < / th >
< th > град < / th >
< / тр >
< тр >
< td > Джон < / td >
< td > BS Chem < / td >
< td > Лондон < / td >
< / тр >
< тр >
< td > Александър < / td >
< td > Бакалавърска математика < / td >
< td > Токио < / td >
< / тр >
< тр >
< td > Джоузеф < / td >
< td > BS CS < / td >
< td > Ню Йорк < / td >
< / тр >
< / маса >
След изпълнение на горния код уеб страницата изглежда така:
Изходът потвърждава, че е създадена структура на таблица.
Стъпка 2: Прилагане на хоризонтална подложка
За да добавите разстояние между колоните от лявата страна, използвайте „ padding-left ” CSS свойство. След прилагане на това свойство данните изглеждат като правилно подравнени. Причината е, че подложката се прилага само от лявата страна.
Сега изберете елемента „td“ в CSS частта на стиловете, които могат да бъдат приложени чрез вградения метод. След това добавете подложка от „ 50px ”, за да добавите интервал и да добавите свойство за граница за по-добри цели на визуализация:
td {padding-left: 50px;
граница : 2px непрекъснато червено;
}
След изпълнение на кода уеб страницата изглежда така:
Изходът показва, че интервалът е добавен между колоните на таблицата.
Сега, за да зададете подложката от дясната страна, „ padding-right ” имотът е усвоен. По същия начин, но сега клетъчните данни изглеждат „ ляво подравнено ”. Кодът е:
td {padding-left: 50px;
граница : 2px непрекъснато червено;
}
След изпълнение на горния код, уеб страницата изглежда така:
Резултатът потвърждава, че пространството между колоните е увеличено чрез прилагане на подложка от дясната страна.
Стъпка 3: Комбинация от подложка отляво и отдясно
Както в горната стъпка, данните не са центрирани и в двата случая и това ги прави непрофесионални. За да го изпъкне, без да нарушава смисъла на дизайна. И двата свойства могат да се използват едновременно, както е показано по-долу:
td {padding-right: 60px;
padding-left: 60px;
граница : 2px непрекъснато червено;
}
След изпълнение на горния код, уеб страницата изглежда така:
Резултатът потвърждава, че е добавено пространство между колоните и данните също са подравнени в центъра.
Заключение
Пространството между колоните на таблицата може да се добави с помощта на свойствата на padding left и right. Тези свойства добавят допълнително пространство отдясно и отляво към клетката. И двата имота могат да се използват едновременно или поотделно. Тази статия успешно демонстрира как да добавите разстояние между колоните на таблицата, без да засягате редовете.