Овај пост ће дати комплетно решење како да направите табелу користећи само „ <див> ” ознака и ЦСС својства.
Како направити табелу преко <див> ознаке и ЦСС-а?
Програмери могу да креирају табелу у ХТМЛ-у додавањем главног „ <див> ” да бисте направили табелу, а затим вишеструко “ <див> ” ознаке унутар њега.
Пример
Размотрите следећи пример ХТМЛ кода да бисте направили табелу:
< див класа = 'дивТабле' >
< див класа = 'хеадерРов' >
< див класа = 'дивЦелл' >< б > ИД < / б >< / див >
< див класа = 'дивЦелл' >< б > Име < / б >< / див >
< див класа = 'дивЦелл' >< б > Старост < / б >< / див >
< / див >
< див класа = 'дивРов' >
< див класа = 'дивЦелл' > 001 < / див >
< див класа = 'дивЦелл' > Смитх < / див >
< див класа = 'дивЦелл' > 25 < / див >
< / див >
< див класа = 'дивРов' >
< див класа = 'дивЦелл' > 002 < / див >
< див класа = 'дивЦелл' > Јохн < / див >
< див класа = 'дивЦелл' > 31 < / див >
< / див >
< див класа = 'дивРов' >
< див класа = 'дивЦелл' > 003 < / див >
< див класа = 'дивЦелл' > Цхарлес < / див >
< див класа = 'дивЦелл' > 28 < / див >
< / див >
< / див >
У исечку кода изнад:
- А “ <див> ” ознака се додаје са класом под називом “ дивТабле ”.
- Унутар ' див ” елемент контејнера, додајте још један “ див ” елемент контејнера са класом декларисаном као „ хеадерРов ”.
- Опет додајте три ' див ” елементи који имају класе под називом „ дивРов ” са три подконтејнера са „ дивЦелл ' класа.
- Затим додајте три елемента див додајте „ ИД ”, “ Име ' и ' Старост ” у заглављу табеле.
- Након тога наведите вредности за „ИД“, „Име“ и „Старост“ за сваки див елемент.
Ово је било све о томе како да користите „ див ” елемент за креирање табеле. Сада, хајде да применимо ЦСС својства на њега:
.дивТабле
{
дисплеј: сто;
ширина :ауто;
позадина- боја :#еее;
граница :1пк солид # 666666 ;
бордер-спаце:5пк;
}
.дивРов
{
ширина :ауто;
дисплаи:табле-ров;
}
.дивЦелл
{
ширина :150пк;
флоат:лефт;
дисплаи:табле-цолумн;
позадина- боја : ргб ( 212 , 209 , 209 ) ;
}
У горњем елементу ЦСС стила:
- Додајте селектор који се односи на „ дивТабле ” (који садржи све вредности табеле) и дефинише жељена ЦСС својства (тј. приказ ”, “ ширина ”, “ боја позадине ”, “ граница ' и ' гранични размак ”) за садржај табеле.
- Након тога, додајте селектор класе који бира елементе „ дивРов ” класа за додавање ЦСС-а “ ширина ' и ' приказ ” својства елемената.
- На крају, додајте својства ЦСС стила елементима у „ .дивЦелл ” селектор класе.
Ово ће креирати табелу у излазу и приказати следеће резултате:
То је било све о креирању табеле у ХТМЛ-у користећи само ознаке <див> и ЦСС својства.
Закључак
Табела у ХТМЛ-у се такође може креирати само помоћу ознаке див и својстава ЦСС стила. Да бисте то урадили, направите посебан главни елемент контејнера див да бисте креирали табелу и неке засебне елементе контејнера див унутар тога да бисте креирали редове табеле. Сваки елемент див контејнера ће имати свој одговарајући ИД или класе. Штавише, селектори класа се користе за одабир див елемената и за примену ЦСС својстава на њих. Овај пост је водио о прављењу табеле само помоћу див ознаке и ЦСС-а.