CSS తో టేబుల్ లో ఇంటర్నల్ లైన్స్ (బోర్డర్స్) ఎలా జోడించాలి

కేవలం ఐదు నిమిషాల్లో CSS పట్టిక సరిహద్దును ఎలా సృష్టించాలో తెలుసుకోండి

మీరు CSS మరియు HTML పట్టికలు కలపాలి విన్నాను. ఇది నిజం కాదు. అవును, లేఅవుట్ కోసం HTML పట్టికలు ఉపయోగించి ఇకపై వెబ్ నమూనాను ఉత్తమ పద్ధతిగా మార్చడం, CSS లేఅవుట్ శైలుల ద్వారా భర్తీ చేయబడింది, కానీ పట్టికలు వెబ్పేజీకి పట్టిక డేటాను జోడించడానికి ఉపయోగించడానికి ఇప్పటికీ సరైన మార్కప్గా ఉన్నాయి.

దురదృష్టవశాత్తు, అనేక వెబ్ నిపుణులు పాయిజన్ అని ఆలోచిస్తూ పట్టికలు నుండి దూరంగా shied ఎందుకంటే, ఆ నిపుణుల అనేక వారు ఒక వెబ్పేజీలో వాటిని నిర్వహించడానికి కలిగి ఉన్నప్పుడు ఈ సాధారణ HTML మూలకం మరియు పోరాటం పని తక్కువ అనుభవం. ఉదాహరణకు, మీరు ఒక పేజీలో పట్టికను కలిగి ఉంటే మరియు మీరు పట్టిక కణాల్లో అంతర్గత పంక్తులను జోడించాలనుకుంటే.

CSS పట్టిక బోర్డర్స్

మీరు పట్టికలను సరిహద్దులను జోడించడానికి CSS ను ఉపయోగించినప్పుడు, అది టేబుల్ వెలుపలి సరిహద్దును మాత్రమే కలిగి ఉంటుంది. మీరు ఆ పట్టికలోని వ్యక్తిగత కణాలకు అంతర్గత పంక్తులను జోడించాలనుకుంటే, లోపలి CSS మూలకాలకు సరిహద్దులను జోడించాలి. మీరు వ్యక్తిగత ఘటాల లోపల పంక్తులను జోడించడానికి HR ట్యాగ్ను కూడా ఉపయోగించవచ్చు.

ఈ ఆర్టికల్లో కవర్ చేయబడిన శైలులను వర్తింపచేయడానికి, మీరు మీ వెబ్ పేజీలో స్పష్టంగా పట్టిక ఉండాలి. మీరు మీ పత్రం యొక్క తలపై ఒక అంతర్గత శైలి షీట్గా శైలి షీట్ రూపాన్ని సృష్టించాలి (మీ "సైట్" అనేది ఒకే పేజీ అయితే మీరు దీన్ని మాత్రమే చేయగలరు) లేదా పత్రానికి బాహ్య శైలి షీట్గా జోడించబడాలి (ఇదే మీ సైట్ బహుళ పేజీలు ఉంటే చేస్తుంది - శైలి మీరు ఒక బాహ్య షీట్ నుండి అన్ని పేజీలు అనుమతిస్తుంది). మీరు స్టైల్ షీట్లో అంతర్గత పంక్తులను జోడించడానికి శైలులను ఉంచుతారు.

మీరు బయలు దేరే ముందు లేదా మీరు ప్రారంభించ బోయే ముందు

మొదట మీ టేబుల్లో పంక్తులు ఎక్కడ కనిపించాలో మీరు నిర్ణయించుకోవాలి. మీకు అనేక ఎంపికలు ఉన్నాయి:

• గ్రిడ్ను రూపొందించడానికి అన్ని కణాల చుట్టూ;
• కేవలం స్తంభాల మధ్య పంక్తులను ఉంచడం;
• కేవలం వరుసల మధ్య; లేదా
• నిర్దిష్ట నిలువు వరుసలు లేదా అడ్డు వరుసల మధ్య.

మీరు వ్యక్తిగత కణాల చుట్టూ లేదా వ్యక్తిగత కణాల లోపల ఉన్న లైన్లను కూడా ఉంచవచ్చు.

ఒక టేబుల్ లో అన్ని కణాల చుట్టూ లైన్స్ జోడించండి ఎలా

మీ పట్టికలోని అన్ని కణాల చుట్టూ పంక్తులను జోడించడానికి, ఆ గ్రిడ్-వంటి ప్రభావాన్ని సృష్టించడం, మీ శైలి షీట్కు ఈ క్రింది వాటిని జోడించండి:

td, th {
సరిహద్దు: ఘన 1px నలుపు;
}

ఒక టేబుల్ లో నిలువు వరుసల మధ్య లైన్లను ఎలా జోడించాలి

నిలువు వరుసల మధ్య పంక్తులను జోడించడానికి (ఇది పట్టిక యొక్క నిలువు వరుసల నుండి ఎగువ నుండి క్రిందికి దిగువ ఉన్న నిలువు వరుసలను సృష్టిస్తుంది), మీ శైలి షీట్కు ఈ క్రింది వాటిని జోడించండి:

td, th {
సరిహద్దు-ఎడమ: ఘన 1px నలుపు;
}

అప్పుడు, మీరు వాటిని మొదటి నిలువు వరుసలో కనిపించకూడదని అనుకుంటే, మీరు th మరియు td కణాలకు ఒక తరగతిని జోడించాలి. ఈ ఉదాహరణలో, మేము ఆ కణాలపై సరిహద్దుల సంఖ్యను కలిగి ఉన్నాము మరియు ఈ మరింత నిర్దిష్ట CSS నిబంధనతో సరిహద్దుని తొలగించాము. ఇక్కడ మనము ఉపయోగించే HTML క్లాస్ ఉంది:

తరగతి = "నో సరిహద్దు">

మరియు తర్వాత మన శైలి శైలి షీట్లో ఈ క్రింది శైలిని చేర్చవచ్చు:

. సరిహద్దు {
సరిహద్దు-ఎడమ: none;
}

ఒక టేబుల్ లో వరుసలు మధ్య లైన్స్ జోడించండి ఎలా

నిలువు వరుసల మధ్య పంక్తులను జోడించడంతో, మీరు మీ శైలి షీట్కు జోడించిన ఒక సాధారణ శైలితో దీన్ని చేయవచ్చు. క్రింద ఉన్న పట్టిక మా పట్టికలోని ప్రతి అడ్డు వరుస మధ్య నిలువు పంక్తులను జోడించనుంది:

tr {
సరిహద్దు-దిగువ: ఘన 1px నలుపు;
}

మరియు పట్టిక దిగువ నుండి సరిహద్దుని తీసివేయడానికి, మీరు మరోసారి ఆ ట్యాగ్కు ఒక తరగతిని జోడించుకుంటారు:

తరగతి = "నో సరిహద్దు">

మీ శైలి షీట్ కింది శైలిని జోడించండి:

. సరిహద్దు {
సరిహద్దు-దిగువ: none;
}

ఒక పట్టికలో ప్రత్యేక నిలువు వరుసలు లేదా వరుసల మధ్య లైన్లను ఎలా జోడించాలి

మీరు నిర్దిష్ట వరుసలు లేదా నిలువు వరుసల మధ్య పంక్తులు మాత్రమే కావాలనుకుంటే, మీరు ఆ కణాలు లేదా వరుసలలో తరగతిని ఉపయోగించాలి. వరుసల మధ్య కంటే నిలువు వరుసల మధ్య ఒక లైన్ జోడించడం వలన మీరు ఆ కాలమ్లోని ప్రతి సెల్కు తరగతిని జోడించాలి. మీ పట్టిక కొంత రకమైన CMS నుండి స్వయంచాలకంగా ఉత్పత్తి చేయబడితే, ఇది సాధ్యం కాకపోవచ్చు, కానీ మీరు పేజీని కోడింగ్ చేస్తే, ఈ ప్రభావాన్ని సాధించడానికి అవసరమైన సముచితమైన తరగతులను జోడించవచ్చు.

తరగతి = "పక్క సరిహద్దు">

వరుసల మధ్య పంక్తులను జోడించడం చాలా సులభం, ఎందుకంటే మీరు వరుసను తరగతికి జోడించాలనుకుంటే.

తరగతి = "border-bottom">

అప్పుడు మీ శైలి షీట్కు CSS ను జోడించండి:

.border-side {
సరిహద్దు-ఎడమ: ఘన 1px నలుపు;
}
.border-bottom {
సరిహద్దు-దిగువ: ఘన 1px నలుపు;
}

ఒక టేబుల్ లో వ్యక్తిగత కణాలు చుట్టూ లైన్స్ జోడించండి ఎలా

వ్యక్తిగత కణాల చుట్టూ పంక్తులను జోడించడానికి, మీకు సరిహద్దు కావాల్సిన కణాలకు ఒక తరగతిని చేర్చండి:

తరగతి = "సరిహద్దులో">

ఆపై మీ CSS శైలి షీట్లో ఈ క్రింది CSS ను జోడించండి:

.border {
సరిహద్దు: ఘన 1px నలుపు;
}

ఒక పట్టికలో వ్యక్తిగత కణాలు ఇన్సైడ్ లైన్స్ ఎలా జోడించాలి

మీరు ఒక సెల్ యొక్క కంటెంట్లను లోపల పంక్తులు జోడించాలనుకుంటే, దీనిని చేయటానికి సులభమైన మార్గం సమాంతర నియమం ట్యాగ్ (

---

) తో ఉంటుంది.

ఉపయోగకరమైన చిట్కాలు

మీరు మీ సరిహద్దుల్లో ఖాళీని గమనించినట్లయితే, మీ టేబుల్పై సరిహద్దు-పతనం శైలి సెట్ చేయబడిందో లేదో నిర్ధారించుకోండి. మీ శైలి షీట్కు కింది వాటిని జోడించండి:

పట్టిక {
సరిహద్దు-పతనం: పతనం;
}

మీరు పైన ఉన్న అన్ని CSS ను నివారించవచ్చు మరియు మీ పట్టిక ట్యాగ్లో సరిహద్దు లక్షణాన్ని ఉపయోగించవచ్చు. ఏమైనప్పటికీ, తన లక్షణం, డీప్రికేటెడ్ కాకపోయినా, CSS కంటే తక్కువగా ఉంటుంది, మీరు సరిహద్దు వెడల్పును మాత్రమే నిర్వచించగలరు మరియు పట్టిక లేదా ఏదీ అన్ని కణాల చుట్టూ మాత్రమే ఉండవచ్చు.