మీరు CSS మరియు HTML పట్టికలు కలపాలి విన్నాను. ఇది కేసు కాదు. అవును, లేఅవుట్ కోసం HTML పట్టికలను ఉపయోగించడం అనేది వెబ్ డిజైన్ ఉత్తమ రీతిలో కాదు, ఎందుకంటే వారు CSS లేఅవుట్ శైలుల ద్వారా భర్తీ చేయబడ్డారు, కానీ పట్టికలు వెబ్పేజీకి పట్టిక డేటాను జోడించడానికి ఉపయోగించడానికి ఇప్పటికీ సరైన మార్కప్గా ఉన్నాయి.
చాలామంది వెబ్ నిపుణులు వారు పట్టిన ఏమీ కాని ఇబ్బందులేమీ ఆలోచిస్తూ పట్టికలు నుండి దూరంగా సిగ్గుపడతారు కాబట్టి, ఆ నిపుణుల్లో చాలామంది ఈ సాధారణ HTML మూలకంతో పనిచేయడానికి తక్కువ అనుభవం కలిగి ఉన్నారు మరియు వెబ్పేజీలో పట్టిక కణాలకు అంతర్గత పంక్తులను జోడించాల్సినప్పుడు వారు పోరాడుతారు.
CSS పట్టిక బోర్డర్స్
మీరు పట్టికలను సరిహద్దులను జోడించడానికి CSS ను ఉపయోగించినప్పుడు, అది టేబుల్ వెలుపలి సరిహద్దును మాత్రమే కలిగి ఉంటుంది. మీరు ఆ పట్టికలోని వ్యక్తిగత కణాలకు అంతర్గత పంక్తులను జోడించాలనుకుంటే, లోపలి CSS మూలకాలకు సరిహద్దులను జోడించాలి. వ్యక్తిగత కణాలలో పంక్తులను జోడించడానికి HR ట్యాగ్ను ఉపయోగించవచ్చు.
ఈ ట్యుటోరియల్ లో కవర్ చేయబడిన శైలులను వర్తింపచేయడానికి, మీరు ఒక వెబ్ పేజీలో టేబుల్ అవసరం. అప్పుడు, మీరు మీ పత్రం యొక్క తలపై ఒక అంతర్గత శైలి షీట్ శైలి రూపాన్ని (మీరు ఒకే పేజీతో వ్యవహరిస్తే) లేదా బాహ్య శైలి షీట్ (పత్రం బహుళ పేజీలను కలిగి ఉంటే) గా డాక్యుమెంట్కు జోడించబడుతుంది. మీరు శైలి షీట్లో అంతర్గత పంక్తులను జోడించడానికి శైలులను చాలు.
మీరు బయలు దేరే ముందు లేదా మీరు ప్రారంభించ బోయే ముందు
మీరు పట్టికలో కనిపించే పంక్తులు ఎక్కడ కావాలో నిర్ణయించుకోండి. మీకు అనేక ఎంపికలు ఉన్నాయి:
- గ్రిడ్ను ఏర్పాటు చేయడానికి అన్ని కణాల చుట్టూ
- నిలువు వరుసల మధ్య పంక్తులను ఉంచడం
- కేవలం వరుసల మధ్య
- నిర్దిష్ట నిలువు వరుసలు లేదా అడ్డు వరుసల మధ్య.
మీరు వ్యక్తిగత కణాల చుట్టూ లేదా వ్యక్తిగత కణాల లోపల ఉన్న లైన్లను కూడా ఉంచవచ్చు.
ఒక టేబుల్ లో అన్ని కణాల చుట్టూ లైన్స్ జోడించండి ఎలా
మీ పట్టికలో అన్ని కణాల చుట్టూ పంక్తులను జోడించడానికి, గ్రిడ్ ప్రభావాన్ని సృష్టించడం, మీ స్టైల్షీట్కు ఈ క్రింది వాటిని జోడించండి:
td, th {సరిహద్దు: ఘన 1px నలుపు;} పట్టిక యొక్క నిలువు వరుసలో ఎగువ నుండి దిగువనున్న నిలువు వరుసలను సృష్టించడానికి నిలువు వరుసల మధ్య పంక్తులను జోడించడానికి, మీ శైలికి క్రింది వాటిని జోడించండి: td, th {సరిహద్దు-ఎడమ: ఘన 1px నలుపు;} మీరు మొదటి నిలువు వరుసలో నిలువు వరుసలు కనిపించకూడదనుకుంటే, మీరు ఒక తరగతిని చేర్చండి వ మరియు td కణాలు. ఈ ఉదాహరణలో, ఒక తరగతిని ఊహించండి నో సరిహద్దు ఆ కణాలపై మరియు సరిహద్దును CSS నియమంతో తొలగించండి. మీరు ఉపయోగించే HTML తరగతి: తరగతి = "నో సరిహద్దు"> అప్పుడు, శైలి షీట్కు కింది శైలిని జోడించండి: . సరిహద్దు {సరిహద్దు-ఎడమ: none;} నిలువు వరుసల మధ్య పంక్తులను జోడించడంతో, వరుసల మధ్య క్షితిజ సమాంతర పంక్తులను శైలి షీట్కు జోడించిన ఒక సరళమైన శైలిని జోడించవచ్చు: tr {సరిహద్దు-దిగువ: ఘన 1px నలుపు;} పట్టిక దిగువ నుండి సరిహద్దుని తీసివేయడానికి, మీరు మరోసారి ఒక తరగతిని చేర్చుతారు ట్యాగ్: తరగతి = "నో సరిహద్దు"> మీ శైలి షీట్ కింది శైలిని జోడించండి: . సరిహద్దు {సరిహద్దు-దిగువ: none;} మీరు నిర్దిష్ట వరుసలు లేదా నిలువు వరుసల మధ్య పంక్తులు మాత్రమే కావాలనుకుంటే, మీరు ఆ కణాలు లేదా వరుసలలో తరగతిని ఉపయోగించాలి. వరుసల మధ్య కంటే నిలువు వరుసల మధ్య ఒక లైన్ జోడించడం వలన మీరు ఆ కాలమ్లోని ప్రతి సెల్కు తరగతిని జోడించాలి. మీ పట్టిక కొంత రకమైన CMS నుండి స్వయంచాలకంగా ఉత్పత్తి చేయబడితే, ఇది సాధ్యం కాకపోవచ్చు, కానీ మీరు పేజీని కోడింగ్ చేస్తే, ఈ ప్రభావాన్ని సాధించడానికి అవసరమైన సముచితమైన తరగతులను జోడించవచ్చు. తరగతి = "పక్క సరిహద్దు"> వరుసల మధ్య పంక్తులను జోడించడం సులభం ఎందుకంటే మీరు వరుసను తరగతికి జోడించాలనుకుంటున్నారు. తరగతి = "border-bottom"> అప్పుడు, మీ స్టైల్షీట్కు CSS ను జోడించండి: .border-side {సరిహద్దు-ఎడమ: ఘన 1px నలుపు;}.border-bottom {సరిహద్దు-దిగువ: ఘన 1px నలుపు;} వ్యక్తిగత కణాల చుట్టూ పంక్తులను జోడించడానికి, మీకు సరిహద్దు కావాల్సిన కణాలకు ఒక తరగతిని చేర్చండి: తరగతి = "సరిహద్దులో"> అప్పుడు మీ CSS కు క్రింది CSS ను జోడించండి: .border {సరిహద్దు: ఘన 1px నలుపు;} మీరు ఒక సెల్ యొక్క కంటెంట్లను లోపల పంక్తులు జోడించాలనుకుంటే, దీనిని చేయడానికి సులువైన మార్గం సమాంతర నియమం ట్యాగ్ (). మీరు మీ సరిహద్దుల్లో ఖాళీని గమనించినట్లయితే, సరిహద్దు-పతనం శైలి పట్టికలో సెట్ చేయబడిందని నిర్ధారించుకోండి. మీ స్టైల్షీట్కు ఈ క్రింది వాటిని జోడించండి: పట్టిక {సరిహద్దు-పతనం: పతనం;} మీరు అన్నిటిని నివారించవచ్చు మరియు మీ పట్టిక ట్యాగ్లో సరిహద్దు లక్షణాన్ని ఉపయోగించవచ్చు. ఏమైనప్పటికీ, ఈ గుణాన్ని డీప్రికేటెడ్ చేయకపోతే, CSS కంటే తక్కువగా ఉంటుంది, మీరు సరిహద్దు వెడల్పును మాత్రమే నిర్వచించగలరు మరియు పట్టిక లేదా ఏదీ అన్ని కణాల చుట్టూ మాత్రమే ఉండవచ్చు. ఒక టేబుల్ లో నిలువు వరుసల మధ్య లైన్లను ఎలా జోడించాలి
ఒక టేబుల్ లో వరుసలు మధ్య లైన్స్ జోడించండి ఎలా
ఒక పట్టికలో ప్రత్యేక నిలువు వరుసలు లేదా వరుసల మధ్య లైన్లను ఎలా జోడించాలి
ఒక టేబుల్ లో వ్యక్తిగత కణాలు చుట్టూ లైన్స్ జోడించండి ఎలా
ఒక పట్టికలో వ్యక్తిగత కణాలు ఇన్సైడ్ లైన్స్ ఎలా జోడించాలి
ఉపయోగకరమైన చిట్కాలు
