Постоји више ЦСС својстава за стилизовање елемената ХТМЛ-а. „ приказ ” својство је једно од њих, које се користи за подешавање елемента којим се управља као инлине елемент или блок елемент. Штавише, распоред који се користи за своју децу, као што су проток, флекс или мрежа. Штавише, ово својство додељује унутрашње и спољашње типове за приказ елемента.
Овај пост ће објаснити:
Како користити „дисплаи: табле-целл“ у ЦСС-у?
Да бисте користили „ приказ ” својство са вредношћу “ табела-ћелија “, испробајте дата упутства.
Корак 1: Направите угнежђене див контејнере
Прво, креирајте главни див контејнер уз помоћ „ <див> ” и убаците “ ид ” атрибут унутар ознаке див. Затим, између див ознаке, додајте још контејнера и додајте „ класа ” атрибут у сваком див:
< див ид = 'садржај табеле' >
< див класа = 'тр-див' >
< див класа = 'тд-див' > Харри див >
< див класа = 'тд-див' > Хтмл / ЦСС див >
див >
< див класа = 'тр-див' >
< див класа = 'тд-див' > Едвард див >
< див класа = 'тд-див' > Доцкер див >
див >
< див класа = 'тр-див' >
< див класа = 'тд-див' > Јацк див >
< див класа = 'тд-див' > Гит див >
див >
див >
Може се приметити да су подаци успешно додати:
Корак 2: Стилизирајте контејнер „садржај табеле“.
Да бисте приступили главном див, користите „ #табле-цонтент ', где ' # ” је селектор који се користи за приступ наведеном „ ид ” атрибут див контејнера. Затим примените следећа својства:
#табле-цонтент{дисплеј: сто;
паддинг: 7пк;
}
овде:
-
- „ приказ ” својство дефинише и одређује како елемент изгледа. Да бисте то урадили, вредност ове особине се поставља као „ сто ” за израду стола.
- “ паддинг ” додељује простор унутар контејнера.
Корак 3: Стилизирајте контејнер „тр-див“.
Сада стилизујте „ тр-див ” контејнер на следећи начин:
.тр-див {приказ: табела-ред;
боја позадине: ргб ( 164 , 241 , 215 ) ;
паддинг: 7пк;
}
Према блоку изнад кода, „ приказ ” вредност својства је постављена као “ табела-ред ” што значи да су подаци постављени у облику редова у табели, „ боја позадине ” својство се користи за одређивање боје на полеђини елемента, и на крају, „ паддинг ' се примењује:
Корак 4: Примените својство „дисплаи: табле-целл“ на „тд-див“ контејнер
дисплеј: ћелија-табела;
ширина: 150пк;
граница: #0ф4бф0 солид 1пк;
маргина: 5пк;
паддинг: 7пк;
}
Приступите трећем див уз помоћ „ .тд-див ” селективна тачка и одговарајући ИД и примените ЦСС својства дата у наставку:
-
- Вредност „ приказ ” својство је постављено као “ табела-ћелија ” који се користи за прављење ћелије и додавање података у ћелију.
- “ ширина ” одређује величину ћелије табеле хоризонтално.
- “ граница ” дефинише границу око ћелија.
- “ маргина ” својство додељује простор ван дефинисане границе.
- “ паддинг ” специфицира простор унутар границе.
Излаз
Зашто користити „дисплаи: табле-целл“ у ЦСС-у?
„ дисплеј: табела-ћелија ” ЦСС својство се користи за подешавање приказа података који чине да се елемент понаша као табела. Дакле, корисници могу да креирају дупликат табеле у ХТМЛ-у без коришћења елемента табеле и других елемената, укључујући тд и тр. Тачније, његово својство дефинише податке у облику табеле.
Закључак
Да бисте користили „ дисплеј: табела-ћелија ” ЦСС својство, креирајте угнежђене див контејнере и уметните класу у сваки контејнер са одређеним именом. Затим приступите див контејнеру у ЦСС-у и примените својство „дисплаи: табле-целл“, где је „ приказ ” својство се користи за подешавање података у ћелијама табеле. Овај пост је демонстрирао метод за коришћење ЦСС својства дисплаи:табле-целл.