CSSలో టేబుల్-హెడర్ గ్రూప్ మరియు టేబుల్-ఫుటర్ గ్రూప్ యొక్క ఉపయోగం ఏమిటి

Csslo Tebul Hedar Grup Mariyu Tebul Phutar Grup Yokka Upayogam Emiti



పట్టిక యొక్క హెడర్ మరియు ఫుటర్ రెండూ వరుసగా టేబుల్ ప్రారంభంలో మరియు చివరిలో ఉంచబడిన టెక్స్ట్ బ్లాక్‌లు. అవి పట్టికకు సంబంధించి మరింత సమాచారాన్ని అందించడానికి ఉపయోగించబడతాయి మరియు నిర్దిష్ట పట్టికలో ఉన్న విలువలను నిర్వచించడంలో సహాయపడతాయి. టేబుల్ హెడర్ మూలకం దీని ద్వారా సూచించబడుతుంది 'ట్యాగ్ అయితే టేబుల్ ఫుటర్ ' ద్వారా సూచించబడుతుంది ” ట్యాగ్.

టేబుల్-హెడర్ గ్రూప్ అంటే ఏమిటి?

CSS లో, ' టేబుల్-హెడర్ గ్రూప్ '' ద్వారా పట్టిక యొక్క శీర్షికను ప్రదర్శించడానికి ఉపయోగించబడుతుంది ” ట్యాగ్. హెడర్ నిలువు నిలువు వరుసలోని మొదటి ఎంట్రీకి అనుగుణంగా ఉంటుంది. ఇది టేబుల్ ఎంట్రీల గురించి సమాచారాన్ని నిర్దేశిస్తుంది. అవసరమైతే హెడర్ బహుళ నిలువు వరుసలను కూడా విస్తరించవచ్చు. CSSలో టేబుల్-కాలమ్ సమూహాన్ని సృష్టించడం ద్వారా దీన్ని నిర్వహించవచ్చు.

ఉదాహరణ
పట్టిక యొక్క శీర్షిక దానిని దృశ్యమానంగా వేరు చేయడానికి పట్టికలోని మిగిలిన ఎంట్రీల నుండి భిన్నమైన ఫార్మాటింగ్‌ను కలిగి ఉంది. ఇవి సాధారణంగా బోల్డ్ ఫాంట్ పరిమాణం లేదా ఎగువ-స్థాయి వచనం ద్వారా సూచించబడతాయి. 'పురుషులు' మరియు 'మహిళలు' పేర్లను జాబితా చేస్తున్నప్పుడు, దిగువ ఉదాహరణలో చూపిన విధంగా మేము వాటిని ప్రత్యేక వరుసలో శీర్షికలుగా కేటాయించవచ్చు:







< పట్టిక >
< తల >
< tr >
< > పురుషులు < / >
< > స్త్రీలు < / >
< / tr >
< / తల >
< శరీరం >
< tr >
< td > జేమ్స్ < / td >
< td > జెస్సికా < / td >
< / tr >
< tr >
< td > డేవిడ్ < / td >
< td > లారా < / td >
< / tr >
< tr >
< td > జాకబ్ < / td >
< td > రెబెక్కా < / td >
< / tr >
< / శరీరం >
< / పట్టిక >

పట్టిక-హెడర్‌ను ఎలా సృష్టించాలో క్రింది దశలు వివరిస్తాయి:



  • జోడించు ' <పట్టిక> పట్టికను సృష్టించడానికి ” ట్యాగ్ చేయండి.
  • తదుపరి దశలో, 'ని పేర్కొనండి ” టేబుల్ హెడర్‌ని సూచించే ట్యాగ్.
  • “” ట్యాగ్ ద్వారా హెడర్ విలువలను వరుసగా జోడించండి మరియు “” ట్యాగ్ ద్వారా హెడర్‌ను మూసివేయండి.
  • ఇప్పుడు, చేర్చండి ' ” టేబుల్ బాడీని ప్రారంభించడానికి ట్యాగ్ చేయండి.
  • “” ట్యాగ్‌ని ఉపయోగించి ప్రతి అడ్డు వరుసలకు డేటాను చొప్పించండి.
  • '' ద్వారా టేబుల్ బాడీ మరియు టేబుల్‌ని ముగించండి 'మరియు' ” ట్యాగ్‌లు, వరుసగా.

అవుట్‌పుట్



టేబుల్-ఫుటర్ గ్రూప్ అంటే ఏమిటి?

ది ' టేబుల్-ఫుటర్ గ్రూప్ '' సహాయంతో CSSలో పట్టిక యొక్క ఫుటర్‌ను ప్రదర్శించడానికి ఉపయోగించబడుతుంది ” ట్యాగ్. డేటాను మరింత స్పష్టంగా అర్థం చేసుకోవడంలో పాఠకులకు సహాయపడే టేబుల్ కంటెంట్ గురించి కూడా ఫూటర్ సమాచారాన్ని అందిస్తుంది. మునుపటి భాగం నుండి అదే ఉదాహరణను ఉపయోగించి, పట్టికలోని 'పురుషులు' మరియు 'మహిళలు' కోసం ప్రతి నిలువు వరుసలో మొత్తం ఎంట్రీల సంఖ్యను అందించే ఫుటర్‌ను జోడించండి.





ఉదాహరణ
చర్చించబడిన భావనను వివరించే క్రింది ఉదాహరణ యొక్క అవలోకనం:

< పట్టిక >
< తల >
< tr >
< >పురుషులు< / >
< > స్త్రీలు< / >
< / tr >
< / తల >
< శరీరం >
< tr >
< td >జేమ్స్ < / td >
< td >జెస్సికా< / td >
< / tr >
< tr >
< td >డేవిడ్< / td >
< td >లారా< / td >
< / tr >
< tr >
< td > జాకబ్ < / td >
< td >రెబెక్కా< / td >
< / tr >
< / శరీరం >
< tfoot >
< tr >
< td తరగతి = 'bg-గ్రే-200' >మొత్తం 03< / td >
< td తరగతి = 'bg-గ్రే-200' >మొత్తం 03< / td >
< / tr >
< / tfoot >
< / పట్టిక >

కింది దశలు టేబుల్-ఫుటర్‌ని సృష్టించే దశలను వివరిస్తాయి:



  • మునుపటి ఉదాహరణ మాదిరిగానే, “ని జోడించండి <పట్టిక> పట్టికను సృష్టించడానికి/చేర్చడానికి ” ట్యాగ్.
  • చేర్చండి ' ” టేబుల్ హెడర్‌ని పేర్కొనడానికి ట్యాగ్ చేయండి.
  • ఇప్పుడు, అదేవిధంగా, హెడర్ శీర్షికలను వరుసగా జోడించి, '' ద్వారా హెడర్‌ను మూసివేయండి ” ట్యాగ్.
  • టేబుల్ బాడీని పేర్కొనడానికి మరియు దానిలోని డేటాను చేర్చడానికి చర్చించిన విధానాలను గుర్తుకు తెచ్చుకోండి.
  • ఇప్పుడు, జోడించు ' ” టేబుల్ ఫుటర్‌ని ప్రారంభించడానికి ట్యాగ్ చేయండి.
  • టేబుల్ ఫుటర్ కోసం డేటాను వరుసగా జోడించండి మరియు 'ని ఉపయోగించి ఫుటర్‌ను మూసివేయండి ” ట్యాగ్.
  • చివరగా, '' ఉపయోగించి పట్టికను ముగించండి ” ట్యాగ్.

అవుట్‌పుట్
పైన వ్రాసిన కోడ్ క్రింది ఫలితాన్ని ఉత్పత్తి చేస్తుంది:

ముగింపు

CSSలోని పట్టికలోని హెడర్ మరియు ఫుటర్ వరుసగా పట్టిక ఎగువన మరియు దిగువన మరింత సమాచారాన్ని జోడించడంలో సహాయపడతాయి. ఈ సమాచారం పట్టిక దేనికి సంబంధించినదో గుర్తించడంలో సహాయపడుతుంది మరియు పట్టికలో చొప్పించిన విలువలలోని మరిన్ని వివరాలను అందిస్తుంది. ఈ రెండూ కలిసి, టేబుల్‌లో కప్పబడిన డేటాను ఖచ్చితంగా ఫ్రేమ్ చేస్తాయి.