- HTML 'ని ఉపయోగించడం వెడల్పు ' గుణం
- ఉపయోగించి ' తొమ్మిదవ బిడ్డ() ” సెలెక్టర్
- ఉపయోగించి '
” ట్యాగ్ చేయండి
విధానం 1: HTML “వెడల్పు” లక్షణాన్ని ఉపయోగించడం
ది ' వెడల్పు ” అనేది HTML అందించిన ప్రాథమిక లక్షణం. ఇది HTML మూలకం యొక్క వెడల్పు లేదా క్షితిజ సమాంతర పొడవును సెట్ చేస్తుంది. పట్టిక డేటాను పరిష్కరించడానికి, వెడల్పు లక్షణం క్రింది దశల్లో ఉపయోగించబడుతుంది.
దశ 1: పట్టికను సృష్టించండి దశ 2: 'టేబుల్' ఎలిమెంట్‌కు CSS లక్షణాలను జోడించండి దశ 3: “td” మూలకానికి ప్రాపర్టీలను కేటాయించడం దశ 4: “వ” మూలకానికి ప్రాపర్టీలను కేటాయించడం అవుట్‌పుట్ ఇలా ప్రదర్శించబడుతుంది: ఎగువ స్నాప్‌షాట్ అన్ని నిలువు వరుసల వెడల్పులు ఒక్కొక్కటి 30%గా నిర్ణయించబడిందని చూపిస్తుంది. స్థిర-వెడల్పు పట్టికను రూపొందించడానికి CSS యొక్క nth-child() లక్షణం ఉపయోగించబడుతుంది. ఈ ఆస్తి నిలువు వరుస సంఖ్యను పొందుతుంది మరియు ' పై కోడ్ బ్లాక్ యొక్క అవుట్‌పుట్: ఈ అవుట్‌పుట్ నిలువు వరుస సంఖ్యలు 1 మరియు 3 10% వెడల్పుకు స్థిరంగా ఉన్నట్లు ప్రదర్శిస్తుంది. లోపల ' పట్టిక CSS భాగంలో 'విభాగాన్ని జోడించు' పట్టిక-లేఅవుట్: పరిష్కరించబడింది డేటా టేబుల్ ఎలిమెంట్స్ యొక్క “వెడల్పు” సెట్ చేయడానికి ఆస్తి: HTML ఫైల్‌లో, “ని జోడించండి పై కోడ్ స్నిప్పెట్‌ని అమలు చేసిన తర్వాత, అవుట్‌పుట్: వినియోగదారు పట్టిక డేటా పట్టిక డేటా వెడల్పును పరిష్కరించడానికి, 'ని ఉపయోగించండి వెడల్పు ' గుణం, ' nth-child( ) 'సెపరేటర్, మరియు'
HTML ఫైల్‌లో, “ని ఉపయోగించండి <కేంద్రం> ” ట్యాగ్ వెబ్‌పేజీ మధ్యలో దానిలోని ప్రతి మూలకాన్ని ప్రదర్శించడానికి. దాని లోపల, '' ఉపయోగించి పట్టికను నిర్మించండి <పట్టిక> ”,” 'మరియు' ” ట్యాగ్ చేసి అందులో డేటా రాయండి:
< కేంద్రం >
< పట్టిక >
< tr >
< వ > పేరు < / వ >
< వ > స్థితి < / వ >
< వ > గది నం < / వ >
< / tr >
< tr >
< td > ఫఖర్ < / td >
< td > విద్యార్థి < / td >
< td > 06 < / td >
< / tr >
< tr >
< td > ఒమర్ < / td >
< td > విద్యార్థి < / td >
< td > 06 < / td >
< / tr >
< / పట్టిక >
< / కేంద్రం >
CSSలో టేబుల్ ఎలిమెంట్ సెలెక్టర్‌ని ఉపయోగించండి మరియు “ని జోడించండి సరిహద్దు '1px ఘన ఎరుపు,' టెక్స్ట్-అలైన్ ” వచనాన్ని మధ్యకు సమలేఖనం చేస్తుంది మరియు “ వెడల్పు ” ఇది పట్టిక మొత్తం వెడల్పును 80%కి సెట్ చేస్తుంది:
పట్టిక {
సరిహద్దు : 1px ఘన ఎరుపు;
వచనం- సమలేఖనం : కేంద్రం;
వెడల్పు : 80 %; }
ఉపయోగించడానికి ' td 'మూలకం ఎంపిక సాధనం మరియు 'ని సెట్ చేస్తుంది సరిహద్దు-దిగువ '5px ఘన ఎరుపు,' పాడింగ్ ఐటెమ్‌ను మరింత ప్రముఖంగా చేయడానికి 20px మరియు ' వెడల్పు ”30%గా సెట్ చేయబడింది:
td {
అంచు-దిగువ: 5px ఘన ఎరుపు;
పాడింగ్: 20px;
వెడల్పు : 30 %;
}
ఉపయోగించడానికి ' వ 'ఎలిమెంట్ సెలెక్టర్' రంగును మార్చడానికి సరిహద్దు-దిగువ 'మెరుగైన విజువలైజేషన్‌ను రూపొందించడానికి ఎరుపు నుండి సముద్రపు ఆకుపచ్చ వరకు:
వ {
బోర్డర్-బాటమ్: 5px సాలిడ్ సీగ్రీన్;
పాడింగ్: 20px;
వెడల్పు : 30 %;
}
విధానం 2: “nth-child( )” సెలెక్టర్‌ని ఉపయోగించడం
'మరియు' <వ> ' టాగ్లు. ఉదాహరణకు, వెడల్పు ' స్థిర 'కాలమ్ సంఖ్యల కోసం మాత్రమే' 1 'మరియు' 3 ”. ఈ నిలువు వరుసలు ఒక్కొక్కటి 10% వెడల్పును పొందుతున్నాయి. డేటా పట్టిక వెడల్పును ఎలా పరిష్కరించాలో ఈ కథనం విజయవంతంగా ప్రదర్శించింది. td:వ-బిడ్డ ( 3 ) {
వెడల్పు : 10 %;
}
వ:వ-బిడ్డ ( 1 ) {
వెడల్పు : 10 %;
}
విధానం 3:
పట్టిక-లేఅవుట్: స్థిర;
వెడల్పు : 80 %;
సరిహద్దు : 1px ఘన ఎరుపు;
వచనం- సమలేఖనం : కేంద్రం;
}
< కల్ శైలి = 'వెడల్పు: 15%;' / >
< కల్ శైలి = 'వెడల్పు: 30%;' / >
మూలకాల వెడల్పును ఎలా పరిష్కరించగలరు.
ముగింపు
మూలకాల వెడల్పును ఎలా పరిష్కరించాలో ఈ కథనం ప్రదర్శించింది.