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