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