- Како додати ивицу доле у ред табеле <тр>?
- Поставите бордер-боттом на Елемент Реда табеле <тр>
- Елемент табеле стилова
- Елемент стила „тд“.
- Елемент стила „тр”.
Како додати ивицу доле у ред табеле <тр>?
Додавање дна ивице у ред табеле ће додати ивицу целом реду како би се омогућило боље визуелно искуство и привукао фокус корисника.
Детаљан пример додавања доњег руба у ред табеле <тр> је приказан у наставку:
Поставите бордер-боттом на ред табеле <тр>
Направите једноставну табелу која садржи 3 реда и 3 колоне у нашој ХТМЛ датотеци која је направљена помоћу елемената <тд>, <тх> и <тр>:
< сто >
< тр класа = 'ред' >
< тх > Име < / тх >
< тх > Статус < / тх >
< тх > Соба нема < / тх >
< / тр >
< тр класа = 'ред' >
< тд > Факхар < / тд >
< тд > Ученик < / тд >
< тд > 05 < / тд >
< / тр >
< тр класа = 'ред' >
< тд > Омар < / тд >
< тд > Ученик < / тд >
< тд > 05 < / тд >
< / тр >
< / сто >
У горњем исечку кода, доделили смо класу „ред“ редовима табеле <тр>, тако да јој се може приступити касније у ЦСС-у.
Веб страница ће изгледати овако:
Елемент табеле стилова
У ЦСС делу изаберите елемент табеле и поравнајте текст са средиштем. Након тога, користите „ граница-урушавање ” да бисте подесили његову вредност да се скупи:
сто
{
граница-колапс: колапс;
тект-алигн: центар;
}
Елемент стила „тд“.
За бољу визуелну репрезентацију, дајте допуну од 20пк подацима табеле „<тд>” и елементима заглавља табеле „<тх>”:
тд{
паддинг:20пк;
}
тх
{
паддинг:20пк;
}
Излаз изгледа овако:
Горњи излаз је показао паддинг од 20пк и поравнао текст са средиштем.
Елемент стила „тр”.
У ЦСС датотеци додајте својство бордер-боттом испод селектора „тр“. Додељује се сваком реду табеле укључујући и ред наслова. На пример, подесите његову вредност на 2пк солид даркциан:
тр {бордер-боттом: 2пк чврста тамноцијан;
}
Након извршења горњег исечка кода, веб страница изгледа овако:
То је све о томе како додати ивицу на дно сваког реда табеле “
Закључак
Да бисте додали ивицу на дно <тр> елемента, подесите ЦСС својство бордер-цоллапсе на колапс и користите својство бордер-боттом на елементу “<тр>”. Омогућава ЦСС својству да примени границе на табели. Тако можете лако додати ивицу на дну свакој ознаци “<хр>”.