ట్యాగ్ మరియు CSS ఉపయోగించి మాత్రమే టేబుల్‌ని ఎలా సృష్టించాలి

” అనే ట్యాగ్‌లు దాని లోపల ఉన్నాయి.

---

---

ఉదాహరణ
పట్టికను సృష్టించడానికి క్రింది HTML కోడ్ ఉదాహరణను పరిగణించండి:

< div తరగతి = 'డివ్ టేబుల్' >
< div తరగతి = 'హెడర్ రో' >
< div తరగతి = 'divCell' >< బి > ID < / బి >< / div >
< div తరగతి = 'divCell' >< బి > పేరు < / బి >< / div >
< div తరగతి = 'divCell' >< బి > వయస్సు < / బి >< / div >
< / div >
< div తరగతి = 'divRow' >
< div తరగతి = 'divCell' > 001 < / div >
< div తరగతి = 'divCell' > స్మిత్ < / div >
< div తరగతి = 'divCell' > 25 < / div >
< / div >
< div తరగతి = 'divRow' >
< div తరగతి = 'divCell' > 002 < / div >
< div తరగతి = 'divCell' > జాన్ < / div >
< div తరగతి = 'divCell' > 31 < / div >
< / div >
< div తరగతి = 'divRow' >
< div తరగతి = 'divCell' > 003 < / div >
< div తరగతి = 'divCell' > చార్లెస్ < / div >
< div తరగతి = 'divCell' > 28 < / div >
< / div >
< / div >

ఎగువ కోడ్ స్నిప్పెట్‌లో:

• ఎ'
  '' అనే తరగతితో ట్యాగ్ జోడించబడింది divTable ”.
• లోపల ' div 'కంటైనర్ మూలకం, మరొకటి జోడించండి' div 'క్లాస్‌తో కంటైనర్ ఎలిమెంట్' గా ప్రకటించబడింది శీర్షిక వరుస ”.
• మళ్ళీ, మూడు జోడించండి ' div '' అనే తరగతులను కలిగి ఉన్న అంశాలు divRow 'మూడు ఉప కంటైనర్లతో' divCell ” తరగతి.
• ఆపై, మూడు డివి ఎలిమెంట్లను జోడించి, ' ID ',' పేరు 'మరియు' వయస్సు ” టేబుల్ హెడర్ వరుసలో.
• ఆ తర్వాత, ప్రతి div మూలకం కోసం 'ID', 'పేరు' మరియు 'వయస్సు' కోసం విలువలను పేర్కొనండి.

ఇదంతా ఎలా ఉపయోగించాలి అనే దాని గురించి div పట్టికను రూపొందించడానికి మూలకం. ఇప్పుడు, దానికి CSS లక్షణాలను వర్తింపజేద్దాం:

---

---

.divTable
{
ప్రదర్శన: పట్టిక;
వెడల్పు :దానంతట అదే;
నేపథ్య- రంగు :#eee;
సరిహద్దు :1px ఘన # 666666 ;
సరిహద్దు అంతరం: 5px;
}
.divRow
{
వెడల్పు :దానంతట అదే;
ప్రదర్శన: పట్టిక-వరుస;
}
.divCell
{
వెడల్పు :150px;
ఫ్లోట్:ఎడమ;
ప్రదర్శన:టేబుల్-కాలమ్;
నేపథ్య- రంగు : rgb ( 212 , 209 , 209 ) ;
}

పై CSS శైలి మూలకంలో:

• 'ని సూచించే సెలెక్టర్‌ను జోడించండి divTable ” (అన్ని పట్టిక విలువలను కలిగి ఉంటుంది) మరియు కావలసిన CSS లక్షణాలను నిర్వచించండి (అంటే, ' ప్రదర్శన ',' వెడల్పు ',' నేపథ్య రంగు ',' సరిహద్దు 'మరియు' సరిహద్దు-అంతరం ”) టేబుల్ కంటెంట్ కోసం.
• ఆ తర్వాత, '' యొక్క మూలకాలను ఎంచుకునే క్లాస్ సెలెక్టర్‌ని జోడించండి divRow 'CSS జోడించడానికి తరగతి' వెడల్పు 'మరియు' ప్రదర్శన మూలకాలకు లక్షణాలు.
• చివరగా, “లోని మూలకాలకు CSS శైలి లక్షణాలను జోడించండి .divCell ” క్లాస్ సెలెక్టర్.

ఇది అవుట్‌పుట్‌లో పట్టికను సృష్టిస్తుంది మరియు క్రింది ఫలితాలను ప్రదర్శిస్తుంది: