HTML టేబుల్‌లోని అడ్డు వరుసలను ప్రభావితం చేయకుండా నిలువు వరుసల మధ్య ఖాళీని ఎలా జోడించాలి?
పట్టిక యొక్క మొత్తం లేఅవుట్‌ను ప్రభావితం చేయకుండా నిలువు వరుసల మధ్య అంతరాన్ని జోడించడానికి పాడింగ్ ఎడమ మరియు కుడి లక్షణాలు ఉపయోగించబడతాయి. ఈ లక్షణం డెవలపర్‌లను అదనపు అంతరాన్ని జోడించడానికి అనుమతిస్తుంది మరియు ఈ అంతరం అడ్డు వరుసలను ప్రభావితం చేయదు.
క్రింది దశలను అనుసరించండి:
దశ 1: టేబుల్ నిర్మాణాన్ని సృష్టించండి
HTML ఫైల్‌లో నాలుగు అడ్డు వరుసలు మరియు మూడు నిలువు వరుసలను కలిగి ఉన్న పట్టిక ఉందని అనుకుందాం:
< పట్టిక >
< tr >
< వ > పేరు < / వ >
< వ > తరగతి < / వ >
< వ > నగరం < / వ >
< / tr >
< tr >
< td > జాన్ < / td >
< td > BS కెమ్ < / td >
< td > లండన్ < / td >
< / tr >
< tr >
< td > అలెగ్జాండర్ < / td >
< td > BS మఠం < / td >
< td > టోక్యో < / td >
< / tr >
< tr >
< td > జోసెఫ్ < / td >
< td > BS CS < / td >
< td > న్యూయార్క్ < / td >
< / tr >
< / పట్టిక >
పై కోడ్ వెబ్‌పేజీని అమలు చేసిన తర్వాత ఇలా కనిపిస్తుంది:
పట్టిక నిర్మాణం సృష్టించబడిందని అవుట్‌పుట్ నిర్ధారిస్తుంది.
దశ 2: క్షితిజసమాంతర పాడింగ్‌ని వర్తింపజేయడం
ఎడమ వైపు నుండి నిలువు వరుసల మధ్య అంతరాన్ని జోడించడానికి, “ని ఉపయోగించండి పాడింగ్-ఎడమ ” CSS ఆస్తి. ఈ లక్షణాన్ని వర్తింపజేసిన తర్వాత, డేటా సరైన సమలేఖనం వలె కనిపిస్తుంది. కారణం పాడింగ్ ఎడమ వైపు నుండి మాత్రమే వర్తించబడుతుంది.
ఇప్పుడు ఇన్‌లైన్ పద్ధతిని ఉపయోగించి వర్తించే స్టైల్స్‌లోని CSS భాగంలో “td” మూలకాన్ని ఎంచుకోండి. ఆపై, '' యొక్క పాడింగ్‌ని జోడించండి 50px ” మెరుగైన విజువలైజేషన్ ప్రయోజనాల కోసం అంతరాన్ని జోడించడానికి మరియు సరిహద్దు ఆస్తిని జోడించడానికి:
td {పాడింగ్-ఎడమ: 50px;
సరిహద్దు : 2px ఘన ఎరుపు;
}
కోడ్‌ని అమలు చేసిన తర్వాత, వెబ్‌పేజీ ఇలా కనిపిస్తుంది:
పట్టిక నిలువు వరుసల మధ్య ఖాళీని జోడించినట్లు అవుట్‌పుట్ ప్రదర్శిస్తుంది.
ఇప్పుడు, కుడి వైపు నుండి పాడింగ్ సెట్ చేయడానికి, ' పాడింగ్-కుడి ”ఆస్తి వినియోగించబడుతుంది. అదే పద్ధతిలో, కానీ ఇప్పుడు సెల్ డేటా కనిపిస్తుంది “ ఎడమకు సమలేఖనం చేయబడింది ”. కోడ్:
td {పాడింగ్-ఎడమ: 50px;
సరిహద్దు : 2px ఘన ఎరుపు;
}
పై కోడ్‌ని అమలు చేసిన తర్వాత, వెబ్‌పేజీ ఇలా కనిపిస్తుంది:
కుడి వైపున పాడింగ్‌ని వర్తింపజేయడం ద్వారా నిలువు వరుసల మధ్య ఖాళీ పెరిగిందని అవుట్‌పుట్ నిర్ధారిస్తుంది.
దశ 3: పాడింగ్ ఎడమ మరియు కుడి కలయిక
పై దశలో వలె, డేటా రెండు సందర్భాల్లోనూ మధ్యకు సమలేఖనం చేయబడదు మరియు అది డేటాను వృత్తిపరమైనది కాదు. డిజైన్ సెన్స్‌ను విచ్ఛిన్నం చేయకుండా దానిని ప్రముఖంగా చేయడానికి. రెండు లక్షణాలను క్రింది విధంగా ఒకే సమయంలో ఉపయోగించవచ్చు:
td {పాడింగ్-కుడి: 60px;
పాడింగ్-ఎడమ: 60px;
సరిహద్దు : 2px ఘన ఎరుపు;
}
పై కోడ్‌ని అమలు చేసిన తర్వాత, వెబ్‌పేజీ ఇలా కనిపిస్తుంది:
నిలువు వరుసల మధ్య ఖాళీ జోడించబడిందని మరియు డేటా మధ్యకు సమలేఖనం చేయబడిందని అవుట్‌పుట్ నిర్ధారిస్తుంది.
ముగింపు
పట్టిక నిలువు వరుసల మధ్య ఖాళీని పాడింగ్ ఎడమ మరియు కుడి లక్షణాల సహాయంతో జోడించవచ్చు. ఈ లక్షణాలు సెల్‌కు కుడి మరియు ఎడమ దిశల నుండి అదనపు స్థలాన్ని జోడిస్తాయి. రెండు లక్షణాలను ఒకే సమయంలో లేదా విడిగా ఉపయోగించవచ్చు. అడ్డు వరుసలను ప్రభావితం చేయకుండా పట్టిక నిలువు వరుసల మధ్య అంతరాన్ని ఎలా జోడించాలో ఈ కథనం విజయవంతంగా ప్రదర్శించింది.