టేబుల్ క్యాప్షన్‌ల ప్రాముఖ్యత ఏమిటి?
పట్టికలకు శీర్షికలు ఇవ్వడానికి “టేబుల్ క్యాప్షన్‌లు” ఉపయోగించబడతాయి, తద్వారా వినియోగదారు ప్రతి పట్టిక అంటే ఏమిటో మరియు దానిలోని డేటాను ఎలా ఉపయోగించాలో నిర్వచించగలరు. వెబ్‌పేజీలోని పట్టికలలోని డేటాను మరింత ప్రాప్యత చేయడానికి వాటిని నంబర్ చేయడంలో కూడా శీర్షికలు సహాయపడతాయి.
పెద్ద సంఖ్యలో పట్టికలు ఉన్న పత్రం లేదా వెబ్‌పేజీలోని ప్రతి పట్టికకు శీర్షికలు ఖచ్చితమైన సందర్భాన్ని అందిస్తాయి. అంతేకాకుండా, ప్రతి పట్టికలో ఏ డేటా ఉందో పాఠకులు త్వరగా అర్థం చేసుకునేలా నిర్మాణాత్మక శీర్షికలు నిర్ధారిస్తాయి.
Tailwind CSSలో టేబుల్ క్యాప్షన్‌ను ఎలా ఉపయోగించాలి?
Tailwind CSSలో, ''ని ఉపయోగించి పట్టికకు శీర్షిక జోడించబడుతుంది <శీర్షిక> ” ట్యాగ్. ఈ శీర్షిక పట్టికలోని డేటా గురించి శీర్షిక మరియు మరింత సమాచారాన్ని నిర్దేశిస్తుంది.
ఉదాహరణ: టేబుల్ యొక్క ఎగువ మరియు దిగువ రెండింటికి టేబుల్ క్యాప్షన్ జోడించడం
కింది కోడ్‌లో, మేము ఈ క్రింది విధంగా పట్టిక ఎగువ మరియు దిగువ రెండింటికి “క్యాప్షన్” జోడిస్తాము:
< పట్టిక >
< పట్టిక తరగతి = 'min-w-full border border-grey-300 divide-y divide-grey-300' >
< తల >
< tr >
< వ తరగతి = 'py-2 px-4 bg-gray-100 border-b' >
పేరు
< / వ >
< వ తరగతి = 'py-2 px-4 bg-gray-100 border-b' >
ఇమెయిల్
< / వ >
< వ తరగతి = 'py-2 px-4 bg-gray-100 border-b' >
ID
< / వ >
< వ తరగతి = 'py-2 px-4 bg-gray-100 border-b' >
సంప్రదించండి
< / వ >
< / tr >
< / తల >
< శరీరం >
< tr >
< td తరగతి = 'py-2 px-4 సరిహద్దు-b' > జేమ్స్ < / td >
< td తరగతి = 'py-2 px-4 సరిహద్దు-b' > james@tsl.com < / td >
< td తరగతి = 'py-2 px-4 సరిహద్దు-b' > 61101-1234567-8 < / td >
< td తరగతి = 'py-2 px-4 సరిహద్దు-b' > 123-456-7890 < / td >
< / tr >
< tr >
< td తరగతి = 'py-2 px-4 సరిహద్దు-b' > మైఖేల్ < / td >
< td తరగతి = 'py-2 px-4 సరిహద్దు-b' > michael@tsl.com < / td >
< td తరగతి = 'py-2 px-4 సరిహద్దు-b' > 61101-8765432-1 < / td >
< td తరగతి = 'py-2 px-4 సరిహద్దు-b' > 098-765-4321 < / td >
< / tr >
< tr >
< td తరగతి = 'py-2 px-4 సరిహద్దు-b' > డేవిడ్ < / td >
< td తరగతి = 'py-2 px-4 సరిహద్దు-b' > David@TSL.com < / td >
< td తరగతి = 'py-2 px-4 సరిహద్దు-b' > 54791-1234567-8 < / td >
< td తరగతి = 'py-2 px-4 సరిహద్దు-b' > 123-786-4290 < / td >
< / tr >
< tr >
< td తరగతి = 'py-2 px-4 సరిహద్దు-b' > పీటర్ < / td >
< td తరగతి = 'py-2 px-4 సరిహద్దు-b' > peter@tsl.com < / td >
< td తరగతి = 'py-2 px-4 సరిహద్దు-b' > 54300-1234567-8 < / td >
< td తరగతి = 'py-2 px-4 సరిహద్దు-b' > 611-239-7890 < / td >
< / tr >
< / శరీరం >
< శీర్షిక >
ఉద్యోగుల వ్యక్తిగత సమాచారం
< / శీర్షిక >
< / పట్టిక >
< శీర్షిక >
కంపెనీ పేరు
< / శీర్షిక >
పై కోడ్‌లో ఈ దశలను అనుసరించండి:
- 'ని ఉపయోగించి పట్టికను సృష్టించండి <పట్టిక> ” ట్యాగ్.
- యుటిలిటీ క్లాస్ ద్వారా టేబుల్ ఫార్మాటింగ్‌ను పేర్కొనండి.
- 'పేరు', 'ఇమెయిల్', 'ID' మరియు 'కాంటాక్ట్' యొక్క టేబుల్ హెడర్‌లను ' ద్వారా నిర్వచించండి ” ట్యాగ్.
- 'ని ఉపయోగించి పట్టికలోని మొత్తం 4 మంది సిబ్బంది కోసం డేటాను నిర్వచించండి ' ఇంకా '
' టాగ్లు. - అప్పుడు, '' ఉపయోగించి పట్టిక శీర్షికను పేర్కొనండి <శీర్షిక> ” అని ట్యాగ్ చేసి టేబుల్ క్లోజ్ చేయండి.
- చివరగా, టేబుల్ దిగువన టేబుల్ క్యాప్షన్‌ను వర్తింపజేయడానికి మేము చివర్లో మరొక “
” ట్యాగ్‌ని జోడిస్తాము. - గమనిక : పట్టిక ఎగువన ఉన్న పట్టిక యొక్క శీర్షిక '
' ట్యాగ్‌లో పేర్కొనబడింది, అయితే దిగువ శీర్షిక పట్టిక ముగింపు ట్యాగ్ తర్వాత పేర్కొనబడాలి.
అవుట్‌పుట్
ముగింపు
పట్టికలు మరియు వాటిలోని డేటా గురించి మరింత సమాచారం ఇవ్వడానికి పట్టికల శీర్షికలు చాలా ముఖ్యమైనవి. పర్యవసానంగా, వినియోగదారులు మరియు పాఠకులు ఇద్దరికీ పట్టికల యాక్సెసిబిలిటీ అనేక రెట్లు పెరిగింది. క్యాప్షన్ పట్టికకు సంబంధించిన అదనపు సమాచారాన్ని సంక్షిప్త పద్ధతిలో అందిస్తుంది, దానిని ఆన్‌లైన్ వివరణలో కూడా చూడవచ్చు.
- 'ని ఉపయోగించి పట్టికలోని మొత్తం 4 మంది సిబ్బంది కోసం డేటాను నిర్వచించండి ' ఇంకా '