CSS: పట్టికలు రూపకల్పన. డిజైన్ ఉదాహరణలు

CSS ను ఉపయోగించి పట్టికలను రూపొందించడం ఆసక్తికరమైన మరియు ముఖ్యమైన పని. శైలుల యొక్క అన్ని అవకాశాలపై అవగాహనతో, ఈ అంశానికి అవగాహన పోటీగా ఉండాలి. అంతేకాక, మీ సృజనాత్మకతతో సందర్శకులను భయపెట్టకూడదని మీరు అందం స్ఫూర్తిని కలిగి ఉండాలి.

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

టేబుల్ సరిహద్దు

డిజైన్ యొక్క CSS శైలి ఎల్లప్పుడూ సరిహద్దుతో ప్లే అవుతుందని అర్థం. అన్ని పట్టికలు డిఫాల్ట్గా సరిహద్దులుగా లేవు. అంటే, అది 0 పిక్సెళ్ళు. కానీ ఇది సరిహద్దు లక్షణాన్ని ఉపయోగించి పరిష్కరించబడుతుంది.

మీరు మొత్తం పట్టిక కోసం ఒక బాహ్య సరిహద్దుని పేర్కొనవచ్చు:

టేబుల్ {సరిహద్దు: 3px ఘన నలుపు; }

ఈ పంక్తికి ధన్యవాదాలు, ఈ శైలి ఉపయోగించిన సైట్లోని అన్ని పట్టికలు నల్ల అంచును కలిగి ఉంటాయి. సరిహద్దు అంచులలో మాత్రమే ఉంటుంది, కానీ పట్టిక లోపల కాదు. కణాలు మరియు వరుసల కోసం, ఫ్రేమ్ భిన్నంగా పేర్కొనబడింది.

Th, td {border: 3px solid black;}

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

ఘన పదానికి అర్థం ఘన రూపకల్పన. మీరు ఇతర విలువలను పేర్కొనవచ్చు.

చాలా తరచుగా, ఘన చట్రం ఉపయోగించబడుతుంది ఎందుకంటే ఇది మరింత ఆకర్షణీయంగా కనిపిస్తుంది మరియు సైట్ యొక్క ప్రధాన కంటెంట్ నుండి దృష్టిని మరల్చదు.

సరిహద్దు ఆస్తిని కూడా ఆదేశాలలో పేర్కొనవచ్చు. సరిహద్దు ఎగువ, దిగువ, ఎడమ లేదా కుడి వైపు మాత్రమే సెట్ చేయవచ్చు. కొన్ని సందర్భాల్లో మొత్తం పట్టిక కోసం ఫ్రేమ్తో ఉన్న ఎంపిక వెంటనే సరిపోనిది.

టేబుల్ {border-top: 1 px solid red; }

కాబట్టి మీరు పట్టిక యొక్క టాప్ కోసం మాత్రమే ఫ్రేమ్ సెట్ చేయవచ్చు. అదేవిధంగా, ఏ ఇతర పార్టీలకు అయినా, పైన వ్రాసే బదులుగా: కుడి, ఎడమ లేదా దిగువ.

పట్టిక శీర్షిక

పట్టిక యొక్క శీర్షిక ట్యాగ్ ఉపయోగించి పేర్కొనవచ్చు. ఈ ట్యాగ్లో, మీరు CSS లో మరిన్ని ఎక్కువ-ట్యూనింగ్ కోసం చాలా లక్షణాలను వ్రాయవచ్చు. CSS లో, పట్టికలు రూపకల్పన మంచి ఎందుకంటే మీకు కావలసిన అంశాలను మీరు ఉపాయాలు చేయవచ్చు.

పుస్తకాలలో ప్రామాణికమైనదిగా ఈ శీర్షిక ప్రదర్శించబడుతుంది (ఉదాహరణకు "టేబుల్ 1").

మీరు శీర్షిక-వైపు ఆస్తి (పైన లేదా దిగువ) తో ఈ శీర్షిక యొక్క స్థానాన్ని కూడా పేర్కొనవచ్చు. ఎడమ లేదా కుడి సమలేఖనం text-align ఆస్తి ద్వారా తెలుపబడింది.

టేబుల్ నేపథ్యం

పట్టిక నేపథ్యం ఏదైనా రంగు లేదా నమూనా కావచ్చు. రంగు నేపథ్య-రంగు లక్షణం ద్వారా సెట్ చేయబడింది. సంభాషణల పేర్లు సంభాషణలో ఉపయోగించిన వాటికి పూర్తిగా అనుగుణంగా ఉంటాయి. ఇది చాలా సార్లు గుర్తుపెట్టుకోవడాన్ని సులభతరం చేస్తుంది.

రంగు పేరు మరియు వేర్వేరు సంకేతాల ద్వారా రంగును పేర్కొనవచ్చు. అదనంగా, మీరు ఈ క్రింది వాటిని పేర్కొనవచ్చు:

• పారదర్శక - మూలకం పారదర్శకత.
• వారసత్వం - రంగు మూలకం వలె ఉంటుంది.
• ప్రారంభంలో డిఫాల్ట్ విలువ.

CSS ఫైల్లోని అన్ని పట్టికలను CSS రంగులో ఒక రంగులో రూపొందించినప్పుడు పారదర్శకతతో ఒక వైవిధ్యం ఉపయోగించబడుతుంది, అయితే ఈ సందర్భంలో అలాంటి అవసరం లేదు.

అదనంగా, నేపథ్యం ఒక చిత్రం ఉంటుంది. ఇది చేయుటకు, శైలి నేపథ్య-ఇమేజ్ ఆస్తిని సూచిస్తుంది. మార్గం ఈ విధంగా సూచించబడింది:

Url ('URL')

ఫైల్కు మార్గం సాపేక్షమైన లేదా సంపూర్ణంగా ఉంటుంది.

మరింత సంపూర్ణ పూరింపు ఒక ప్రవణతతో చేయవచ్చు:

• లీనియర్-గ్రేడియంట్ ();
• రేడియల్-గ్రేడియంట్ ();
• పునరావృత-సరళ-ప్రవణత () మరియు పునరావృత-రేడియల్-గ్రేడియంట్ () - ప్రవణత పునరావృతమవుతుంది.

సెల్ నేపథ్య

మొత్తం నేపథ్యంతో పాటు, నిలువు వరుసలలో లేదా వరుసలలో ఒక ప్రత్యామ్నాయ నేపథ్యాన్ని మీరు పేర్కొనవచ్చు. రిజిస్ట్రేషన్ కోసం, ఈ ఆస్తి చాలా తరచుగా ఉపయోగించబడుతుంది, ఎందుకంటే పంక్తుల దృశ్య విభజన సమాచారాన్ని సులభంగా చదవటానికి చేస్తుంది.

Interlacing పాటు, మీరు ఒక నిర్దిష్ట కాలమ్ లేదా వరుస సంఖ్యను పేర్కొనవచ్చు. ఉదాహరణకు, ఇలాంటివి:

• Tr: nth- బాల (కూడా) {...} - పంక్తులు ప్రత్యామ్నాయం పేర్కొనండి;
• Tr: nth- బాల (1) {...} - ఒక నిర్దిష్ట స్ట్రింగ్ యొక్క ఆస్తి నిర్దేశిస్తుంది;
• Td: nth- చైల్డ్ (కూడా) {...} - కాలమ్స్ యొక్క ప్రత్యామ్నాయ సూచన;
• Td: nth- చైల్డ్ (1) {...} - ఒక నిర్దిష్ట కాలమ్ యొక్క ఆస్తి నిర్దేశిస్తుంది.

ఇంటర్లీవింగ్ మరియు సంఖ్యలకు అదనంగా, మీరు మొదటి (td: మొదటి సంతానం) లేదా చివరి (td: last-child) ను పేర్కొనవచ్చు.

కణాలు మధ్య అంతరం

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

అంగీకరిస్తే, చదివినందుకు చాలా మంచిది మరియు అనుకూలమైనది కాదు. ఈ కారణంగా వినియోగదారులు కంటి రష్ఫ్లో ఉంటారు. టేబుల్ శైలిలో కిందివాటిని వ్రాయడం ద్వారా మీరు ఈ అంతరాలను తొలగించవచ్చు:

బోర్డర్-పతనం: కూలిపోతుంది

కానీ దూరం, విరుద్దంగా, పెరుగుతుంది అవసరం కూడా జరుగుతుంది. మరియు విరామాల పరిమాణం నిలువు వరుసల మధ్య మరియు రేఖల మధ్య పేర్కొనవచ్చు. దీనిని చేయడానికి, కింది విలువ (పతనం కాకుండా) ను పేర్కొనండి:

బోర్డర్-పతనం: ప్రత్యేక

కానీ ఈ చర్య మీరు సెల్స్ వేరు కావాలి అని సూచిస్తుంది. వాటిని వేరు ఎలా, ఒక అదనపు ఆస్తి సూచిస్తుంది:

సరిహద్దు అంతరం: 20px.

మీరు అడ్డు వరుసలు మరియు నిలువు వరుసల మధ్య విభిన్న దూరాన్ని పేర్కొనదలిస్తే, అప్పుడు రెండు విలువలు పేర్కొనబడతాయి:

బోర్డర్-అంతరం: 10px20px.

బ్రౌజర్లలో తేడా

గుర్తుంచుకోండి CSS లో, పట్టికలు రూపాన్ని బ్రౌజర్ భిన్నంగా, భిన్నంగా ఉండవచ్చు. పరిస్థితి పాత వెర్షన్లు ముఖ్యంగా చెడు, ఇది CSS లో ఆవిష్కరణలు మద్దతు లేదు.

పైన డిజిటల్ విలువలు కోసం ఫ్రేమ్ యొక్క మందం ఒక ఉదాహరణ.

ఇక్కడ స్థిరాంకాలు కోసం ఫ్రేమ్ యొక్క మందం యొక్క ఉదాహరణ.

ఫ్రేమ్ శైలులు చాలా భిన్నంగా ఉంటాయి.

అందువలన, అభివృద్ధి చేసినప్పుడు, ఎల్లప్పుడూ వివిధ బ్రౌజర్లలో ఫలితంగా చూడండి.

CSS లో, బ్రౌజర్ రకం తనిఖీ తో పట్టిక రూపకల్పన చేయడానికి మద్దతిస్తుంది. ఇంటర్నెట్ ఎక్స్ప్లోరర్ పాత సంస్కరణలతో ఉన్న అతి పెద్ద సమస్య.

చాలా అధునాతన డెవలపర్లు పూర్తిగా భిన్నమైన CSS ఫైళ్లను బ్రౌజర్ ఆధారంగా బంధిస్తాయి. మరియు ఎవరైనా ప్రతి లేదా కొన్ని ప్రత్యేక శైలి (తరగతి) తనిఖీ చేస్తుంది.

చాలా సమస్యలు నీడలు తో తలెత్తుతాయి.

CSS: పట్టికలు డిజైన్, ఉదాహరణలు

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

మేము వివిధ పట్టికలు ఉదాహరణలు ఇవ్వండి. పై చిత్రంలో నేపథ్య మరియు సరిహద్దు రంగులతో వంపు మరియు ఆట యొక్క ఉపయోగం చూపుతుంది.

వినియోగదారులకు కళ్ళు కట్ చేయని అందంగా చక్కగా రూపకల్పనకు చాలా మంది ఆసక్తిని కలిగి ఉంటారు. ఈ ఐచ్ఛికం దాదాపు ఏ పరిస్థితిలోనైనా సరిపోతుంది.

అంచులు గుండ్రంగా తయారు చేయబడతాయి. ఇది చాలా అందంగా కనిపిస్తోంది.

నిర్ధారణకు

మీరు చూడగలరు, CSS లో పట్టికలు రూపాన్ని సృష్టించడానికి అక్కడ ఉపకరణాలు భారీ సంఖ్యలో ఉంది. ప్రతి పరామితిలో కూడా భారీ సంఖ్యలో విలువలు ఉన్నాయి. మీరు ఒకేసారి ఒకేసారి ఉపయోగిస్తే, మీరు కళాఖండాలు సృష్టించవచ్చు. మీరు అన్ని బ్రౌజర్లు కోసం ఒక అనుకూల నమూనా తయారు ముఖ్యంగా.

రూపకల్పన చేసినప్పుడు ప్రధాన విషయం - ప్రభావాలు తో overdo లేదు. అంతా మోడరేషన్లో చేయాలి. మొదటి వద్ద, లేఅవుట్ డిజైనర్లు ఒకేసారి వారి జ్ఞానాన్ని ప్రయోగాలు చేయడం మరియు ఉపయోగించడం వంటివి. తత్ఫలితంగా, పట్టికలు అతిశయోక్తి లక్షణములు. ఈ తప్పులను నివారించడానికి ప్రయత్నించండి.

అంతేకాక, కొన్ని పారామితులు ఒకదానితో ఒకటి జోక్యం చేసుకోవచ్చు. ఉదాహరణకు, పేర్కొన్న రంగు అతివ్యాప్తి చెందుతున్న నేపథ్య చిత్రం ఉన్నట్లయితే , టేబుల్ యొక్క నేపథ్య రంగును పేర్కొనవసరం లేదు.