HTML TABLE ఎలిమెంట్ గుణాలు ఉపయోగించి

టేబుల్ గుణాలు నేర్చుకోవడం ద్వారా HTML పట్టికలు చాలా పొందడం

HTML పట్టిక లక్షణాలను మీరు HTML పట్టికలలో చాలా ఎక్కువ నియంత్రణను ఇస్తాయి. పట్టికలు అందుబాటులో ఉన్నాయి చాలా ఆసక్తికరమైన వాటిని తయారు మరియు మీ పేజీ యొక్క రూపాన్ని మార్చడానికి.

HTML TABLE ఎలిమెంట్ గుణాలు

HTML5 లో మూలకం ప్రపంచ లక్షణాలను మరియు మరొక లక్షణాన్ని ఉపయోగిస్తుంది:. మరియు అది 1 లేదా ఖాళీ (అంటే సరిహద్దు = "") విలువను కలిగి ఉంది. సరిహద్దు యొక్క వెడల్పుని మీరు మార్చాలనుకుంటే, సరిహద్దు-వెడల్పు CSS ఆస్తిని ఉపయోగించాలి.

చెల్లుబాటు అయ్యే HTML5 పట్టిక లక్షణాల గురించి తెలుసుకోవడానికి దిగువ చూడండి.

HTML5 లో వాడుకలో లేని HTML 4.01 స్పెసిఫికేషన్లోని అనేక లక్షణాలను కూడా ఉన్నాయి:

మరియు ఒక లక్షణం HTML 4.01 లో నిలిపివేయబడింది మరియు HTML5 లో కూడా వాడుకలో ఉంది.

HTML 4.01 TABLE గుణాలు గురించి మరింత తెలుసుకోండి.

ఏ HTML స్పెసిఫికేషన్లో లేని అనేక లక్షణాలను కూడా ఉన్నాయి.

మీరు మద్దతిస్తున్న బ్రౌజర్లు వాటిని నిర్వహించగలవని మీకు తెలిస్తే ఈ లక్షణాలను ఉపయోగించండి మరియు మీరు చెల్లుబాటు అయ్యే HTML గురించి పట్టించుకోరు.

బ్రౌజర్ నిర్దిష్ట TABLE గుణాలు గురించి మరింత తెలుసుకోండి.

HTML5 TABLE ఎలిమెంట్ గుణాలు

మేము పైన పేర్కొన్న విధంగా, ఒక HTML5 గుణం మూలకం: సరిహద్దు.

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

సరిహద్దు లక్షణాన్ని జోడించడానికి, సరిహద్దు మరియు ఖాళీ లేకుంటే (లేదా గుణం వదిలివేయండి) ఉంటే విలువ 1 కు సెట్ చేయండి. సరిహద్దు యొక్క వెడల్పు పిక్సెల్లో డిక్లేర్ చేయడానికి చాలా బ్రౌజర్లు ఏ సరిహద్దు లేకుండా 0, మరియు ఇతర పూర్ణ సంఖ్య విలువ (2, 3, 30, 500, మొదలైనవి) మద్దతు ఇస్తుంది, కానీ ఇది HTML5 లో వాడుకలో లేదు. బదులుగా, మీరు సరిహద్దు వెడల్పు మరియు ఇతర శైలులను నిర్వచించడానికి CSS సరిహద్దు శైలి లక్షణాలను ఉపయోగించాలి.

ఒక సరిహద్దుతో ఒక పట్టికను సృష్టించడానికి, ఇలా వ్రాయండి:

border = "1" >

ఇది సరిహద్దుతో ఉన్న పట్టిక

HTML5 లో వాడుకలో లేని HTML 4.01 లక్షణాలు ఉన్నాయి. మీరు HTML 4.01 పత్రాలను రాయడం ప్లాన్ ఉంటే, మీరు వాటిని తెలుసుకోవచ్చు, లేకపోతే, మీరు వాటిని విస్మరించవచ్చు. ఈ లక్షణాలలో అధికభాగం ప్రత్యామ్నాయాలను కలిగి ఉంటాయి, పైన వివరించినవి.

మేము HTML5 (మరియు HTML 4.01) లో చెల్లుబాటు అయ్యే మూలకాల లక్షణాలను వివరిస్తాము. ఇది HTML 4.01 లో చెల్లుబాటు అయ్యే TABLE లక్షణాలను వివరిస్తుంది, కానీ HTML5 లో వాడుకలో ఉన్నాయి. మీరు ఇప్పటికీ HTML 4.01 పత్రాలను వ్రాస్తే, మీరు ఈ లక్షణాలను ఉపయోగించవచ్చు, కానీ వారిలో చాలా మందికి మీరు ప్రత్యామ్నాయాలను కలిగి ఉంటారు, మీరు మీ పేజీలను భవిష్యత్-ధృవీకరించినట్లయితే, మీరు HTML5 కు తరలించినప్పుడు.

చెల్లుబాటు అయ్యే HTML 4.01 గుణాలు

మేము పైన వివరించిన లక్షణం.

HTML5 నుండి HTML 4.01 లో మాత్రమే వ్యత్యాసం పిక్సెల్లలో సరిహద్దు యొక్క వెడల్పును నిర్వచించడానికి మీరు ఏ మొత్తం పూర్ణ సంఖ్య (0, 1, 2, 15, 20, 200, మొదలైనవి) ను పేర్కొనవచ్చు.

5px సరిహద్దుతో ఒక పట్టికను నిర్మించడానికి, వ్రాయండి:

border = "5" >

ఈ పట్టికకు 5px సరిహద్దు ఉంది.

సరిహద్దులతో రెండు పట్టికల ఉదాహరణను చూడండి.

ఈ లక్షణం సెల్ సరిహద్దుల మధ్య మరియు సెల్ యొక్క విషయాల మధ్య ఖాళీని నిర్వచిస్తుంది. డిఫాల్ట్ రెండు పిక్సెళ్ళు. మీరు విషయాలు మరియు సరిహద్దుల మధ్య స్థలాన్ని కోరుకుంటే cellpadding 0 కు సెట్ చెయ్యండి.

సెల్ పాడింగ్ 20 ను సెట్ చేయడానికి, ఇలా రాయండి:

cellpadding = "20" >


ఈ పట్టికలో 20 యొక్క సెల్ పాడింగ్ ఉంది.

సెల్ సరిహద్దులు 20 పిక్సెల్ల ద్వారా వేరు చేయబడతాయి.

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

లక్షణం పట్టిక కణాలు మరియు సెల్ కంటెంట్ మధ్య స్థలం మొత్తం నిర్వచిస్తుంది. సెల్ పాడింగ్ వంటిది, డిఫాల్ట్ రెండు పిక్సల్స్కు సెట్ చేయబడి ఉంటుంది, కాబట్టి మీరు గడి ఖాళీని కోరుకుంటే మీరు దాన్ని 0 కి సెట్ చేయాలి.

సెల్ గడిని ఒక పట్టికకు చేర్చడానికి, వ్రాయండి:

cellspacing = "20" >


ఈ పట్టిక 20 యొక్క సెల్స్పేస్ కలిగి ఉంది.

కణాలు 20 పిక్సెల్ల ద్వారా వేరు చేయబడతాయి.

సెల్స్పేస్తో ఒక పట్టికను చూడండి

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

ఇక్కడ ఎడమవైపు సరిహద్దు ఉన్న పట్టిక కోసం HTML ఉంది:

frame = "lhs" >


ఈ పట్టిక
ఉంటుంది

మాత్రమే
లెఫ్ట్ సైడ్ ఫ్రేమ్డ్.

దిగువ ఫ్రేమ్తో మరో ఉదాహరణ:

ఫ్రేమ్ = "క్రింద" >

ఈ పట్టిక దిగువన ఫ్రేమ్ను కలిగి ఉంటుంది.

ఫ్రేములు కొన్ని పట్టికలు చూడండి

లక్షణం ఫ్రేమ్ లక్షణం వలె ఉంటుంది, టేబుల్ యొక్క కణాల చుట్టూ సరిహద్దులను మాత్రమే ప్రభావితం చేస్తుంది. మీరు TBODY మరియు TFOOT లేదా none వంటి సమూహాల మధ్య నిలువుల మధ్య అన్ని కణాలపై నియమాలను సెట్ చేయవచ్చు.

వరుసల మధ్య లైన్లతో ఒక పట్టికను నిర్మించడానికి, వ్రాయండి:

నియమాలు = "వరుసలు" >


ఈ 4x4 పట్టిక ఉంది
నిలువు వరుసలు కాదు

తో వివరించబడింది
నియమాలు లక్షణం.

మరియు మరొక వరుసలు మధ్య పంక్తులు:

నియమాలు = "cols" >


ఇది
పట్టిక
ఇక్కడ

కాలమ్
ఉన్నాయి
హైలైట్

ఇక్కడ నిబంధనలతో AA పట్టికకు ఉదాహరణ

పట్టికలు చదివే పట్టికలు కలిగి ఉండే స్క్రీన్ రీడర్లు మరియు ఇతర వినియోగదారు ఏజెంట్ల కోసం పట్టిక గురించి సమాచారాన్ని అందిస్తుంది. సారాంశం లక్షణాన్ని ఉపయోగించడానికి, మీరు పట్టిక యొక్క క్లుప్త వివరణ వ్రాసి ఆ లక్షణాన్ని విలువగా ఉంచండి. సారాంశం అత్యంత ప్రామాణిక వెబ్ బ్రౌజర్లలో వెబ్ పేజీలో ప్రదర్శించబడదు.

సారాంశంతో సాధారణ పట్టికను ఎలా రాయాలో ఇక్కడ ఉంది:

summary = "ఇది పూరక సమాచారమును కలిగి ఉన్న ఒక మాదిరి పట్టిక. ఈ పట్టిక యొక్క ప్రయోజనం సారాంశాన్ని ప్రదర్శిస్తుంది." >


కాలమ్ 1 వరుస 1
కాలమ్ 2 వరుస 1

కాలమ్ 1 వరుస 2
కాలమ్ 2 వరుస 2

సారాంశంతో పట్టికను వీక్షించండి

ఈ లక్షణం పట్టిక యొక్క వెడల్పు పిక్సెల్లలో లేదా కంటైనర్ మూలకం యొక్క శాతంగా పేర్కొంటుంది. వెడల్పు సెట్ చేయకపోతే, విషయాలను ప్రదర్శించాల్సిన అవసరమున్నందున, గరిష్ట వెడల్పుతో పాటు పేరెంట్ ఎలిమెంట్ యొక్క వెడల్పు వలె పట్టిక మాత్రం ఎక్కువ స్థలాన్ని మాత్రమే పడుతుంది.

పిక్సెల్స్ లో ఒక నిర్దిష్ట వెడల్పుతో పట్టికను నిర్మించడానికి, వ్రాయండి:

width = "300" >

ఈ పట్టిక ఇది కంటైనర్ యొక్క వెడల్పులో 80%.

మరియు పేరెంట్ ఎలిమెంట్ యొక్క ఒక శాతంగా ఉన్న ఒక వెడల్పుతో టేబుల్ను నిర్మించటానికి, ఇలా రాయండి:

width = "80%" >

ఈ పట్టిక ఇది కంటైనర్ యొక్క వెడల్పులో 80%.

వెడల్పుతో టేబుల్ యొక్క ఉదాహరణను చూడండి

నిలిపివేయబడిన HTML 4.01 TABLE లక్షణం

HTML 4.01 లో డీప్రికేటెడ్ మరియు HTML5 లో వాడుకలో లేని TABLE ఎలిమెంట్ యొక్క ఒక లక్షణం ఉంది: align . ఈ లక్షణం మీరు పక్కన ఉన్న టెక్స్ట్కు సంబంధించిన పేజీలో ఉన్న పట్టికను ఎక్కడ సెట్ చేయవచ్చో సెట్ చెయ్యడం మిమ్మల్ని అనుమతిస్తుంది. ఈ లక్షణం HTML 4.01 లో డీప్రికేటెడ్ చెయ్యబడింది మరియు మీరు దీన్ని ఉపయోగించకుండా ఉండకూడదు. బదులుగా, మీరు CSS ఆస్తిని లేదా మార్జిన్-లెఫ్ట్ను ఉపయోగించాలి: ఆటో; మరియు మార్జిన్-కుడి: ఆటో; శైలులు. ఫ్లోట్ ఆస్తి మీరు ఇచ్చిన align గుణం ఏమి దగ్గరగా ఉంది ఫలితంగా ఇస్తుంది, కానీ అది పేజీ విషయాలు మిగిలిన ప్రదర్శించడానికి మార్గం ప్రభావితం చేయవచ్చు. మార్జిన్-కుడి: ఆటో; మరియు మార్జిన్-ఎడమ: ఆటో; ప్రత్యామ్నాయంగా W3C సిఫారసు చేస్తుంది.

Align గుణం ఉపయోగించి ఇక్కడ ఒక డీప్రికేటెడ్ ఉదాహరణ:

align = "right" >


ఈ పట్టిక సరైన సమలేఖనం

టెక్స్ట్ దాని చుట్టూ ఎడమ ప్రవహిస్తుంది

Align గుణం ఉపయోగించి డీప్రికేటెడ్ ఉదాహరణను చూడండి.

మరియు చెల్లుబాటు అయ్యే (నాన్-డీప్రికేటెడ్) HTML తో అదే ప్రభావాన్ని పొందడానికి, వ్రాయండి:

style = "float: right;" >


ఈ పట్టిక సరైన సమలేఖనం

టెక్స్ట్ దాని చుట్టూ ఎడమ ప్రవహిస్తుంది

కింది ఏ HTML వివరణ భాగంగా లేని TABLE లక్షణాలను వివరిస్తుంది.

మునుపటి సమాచారం HTML 4.01 లో చెల్లుబాటు అయ్యే HTML మూలకం యొక్క లక్షణాలను వివరిస్తుంది కానీ HTML5 లో వాడుకలో ఉంది.

ఏవైనా ప్రస్తుత స్పెసిఫికేషన్లో చెల్లని TABLE లక్షణాలను క్రిందివి వివరిస్తాయి. మీరు మీ పేజీలు ధృవీకరించారో మరియు మీ యూజర్లు ఈ మూలకాలకు మద్దతిచ్చే బ్రౌజర్ను ఉపయోగిస్తారా అని పట్టించుకోనట్లయితే, మీరు ఈ అంశాలను ఉపయోగించవచ్చు. కానీ వాటిలో చాలా వరకు ఆధునిక బ్రౌజర్లలో మద్దతు లేవు లేదా మరింత ప్రమాణాలు-అనుగుణంగా ఉండే ప్రత్యామ్నాయాలను కలిగి ఉంటాయి.

మీ HTML పట్టికలలో ఈ లక్షణాలను ఉపయోగించమని మేము సిఫార్సు చేయము .

లక్షణం CSS విస్తృతంగా మద్దతు ముందు చేర్చబడిన ఒక పాత లక్షణం. ఇది మీరు పట్టిక నేపథ్య రంగు మార్చడానికి అనుమతిస్తుంది. మీరు రంగు పేరు లేదా హెక్సాడెసిమల్ కోడ్ను సెట్ చేయవచ్చు. ఈ లక్షణం ఇప్పటికీ చాలా బ్రౌజర్లలో పనిచేస్తుంది, కానీ భవిష్యత్-నిరూపితమైన HTML కోసం, మీరు దీన్ని ఉపయోగించకూడదు మరియు బదులుగా CSS ను ఉపయోగించకూడదు.

ఈ లక్షణానికి మంచి ప్రత్యామ్నాయం శైలి లక్షణం.

పట్టిక యొక్క నేపథ్య రంగును మార్చడానికి, ఇలా రాయండి:

style = "background-color: #ccc;" >

ఈ టేబుల్ బూడిద నేపథ్యం కలిగి ఉంది

Bgcolor లక్షణం వలె, సరిహద్దు రంగు లక్షణం లక్షణం యొక్క రంగును మార్చడానికి మిమ్మల్ని అనుమతిస్తుంది. ఈ గుణం కేవలం ఇంటర్నెట్ ఎక్స్ప్లోరర్ చేత మాత్రమే మద్దతివ్వబడుతుంది. బదులుగా, మీరు సరిహద్దు-రంగు శైలి ఆస్తిని ఉపయోగించాలి.

మీ టేబుల్ సరిహద్దు యొక్క రంగు మార్చడానికి, వ్రాయండి:

style = "border-color: red;" >

ఈ పట్టికకు ఎరుపు సరిహద్దు ఉంది.

మీ టేబుల్ చుట్టూ ఒక 3D సరిహద్దుని సృష్టించడానికి మిమ్మల్ని అనుమతించడానికి సరిహద్దు రంగు మరియు సరిహద్దు రంగు కార్డు లక్షణాలను ఇంటర్నెట్ ఎక్స్ప్లోరర్లో చేర్చారు. ఏది ఏమయినప్పటికీ, IE8 మరియు పైకి, ఇది IE7 స్టాండర్డ్స్ మోడ్ మరియు క్విర్క్స్ మోడ్లో మాత్రమే మద్దతిస్తుంది. ఈ లక్షణాలు ఇకపై మద్దతివ్వని Microsoft ప్రకటించింది.

కొంతకాలం, TABLE ఎలిమెంట్లోని కాలమ్స్ లక్షణం బ్రౌజర్లకు ఎన్ని పట్టికలను కలిగి ఉన్నాయో తెలుసుకోవటానికి ప్రతిపాదించబడింది. ఈ పెద్ద ఆవరణలు పెద్ద పట్టికలను రెండింటిని వేగవంతం చేయటానికి దోహదపడుతున్నాయి. అయినప్పటికీ ఇది ఇంటర్నెట్ ఎక్స్ప్లోరర్ చేత అమలు చేయబడి, మరియు IE8 మరియు దాని నుండి, ఇది IE7 స్టాండర్డ్స్ మోడ్ మరియు క్విర్క్స్ మోడ్లో మాత్రమే మద్దతివ్వబడుతుంది.

ఎందుకంటే వెడల్పు లక్షణం (HTML5 లో వాడుకలో ఉంది) చాలామంది వ్యక్తులు పట్టికలు కోసం ఎత్తు లక్షణం ఉన్నట్లు భావించారు. కానీ పట్టికలు వారి కంటెంట్ యొక్క వెడల్పుకు లేదా CSS లేదా వెడల్పు లక్షణంలో నిర్వచించిన వెడల్పుకు అనుగుణంగా ఉండటం వలన, ఎత్తు అడ్డుకోబడదు. అందువల్ల, బ్రౌజర్లు ఎత్తు కనీస ఎత్తుని నిర్వచించటానికి ఎత్తు లక్షణాన్ని అనుమతిస్తాయి. పట్టిక ఆ ఎత్తు కంటే పొడవుగా ఉంటే, అది పొడవును ప్రదర్శిస్తుంది. కానీ ఆస్తి వాడాలి

CSS ఎత్తు ఆస్తి తో మీరు CSS ఆస్తి ఉపయోగిస్తే మరియు మీరు ఏ అదనపు కంటెంట్ తో ఏమి నిర్వచించటానికి ఉంటే ఎత్తు పరిమితం చేయవచ్చు.

పట్టికలో కనిష్ట ఎత్తుని సెట్ చేయడానికి, వ్రాయండి:

style = "height: 30em;" >

ఈ పట్టిక కనీసం 30 ems high.

రెండు లక్షణాలను మరియు ఎడమ / కుడి భుజాల చుట్టూ (hspace) మరియు ఎగువ / దిగువ (vspace) చుట్టూ జోడించిన ప్రదేశం. బదులుగా శైలి లక్షణాన్ని వాడాలి.

నిలువు ఖాళీని 20 పిక్సెల్ల మరియు క్షితిజ సమాంతర స్థలం 40 పిక్సెల్లకు సెట్ చేయడానికి, వ్రాయండి:

style = "margin: 20px 40px;"

ఈ పట్టిక 20 పిక్సల్స్ యొక్క వర్సెస్ మరియు 40 పిక్సెల్ల యొక్క ఒక హేస్సేస్ కలిగి ఉంటుంది.

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

వచనం చాలా వ్రాతతో నిలువుగా చేయడానికి, వ్రాయండి:



style = "white-space: nowrap;" > ఇది టన్నుల కంటెంట్తో ఒక కాలమ్. కానీ కంటైనర్ కన్నా విస్తృతమైనది అయినప్పటికీ టెక్స్ట్ తర్వాతి పంక్తికి మూసి వేయకూడదు, కాని బ్రౌసర్ విండోను మొత్తం కంటెంట్ను చూడడానికి అడ్డంగా స్క్రోల్ చేయటానికి బలవంతంగా.

అంతిమంగా, ప్రతి కణంలోని విషయాలు సెల్ లోపల నిలువుగా ఏకం చేస్తాయనే లక్షణాన్ని గుర్తిస్తుంది. బదులుగా ఈ చెల్లని లక్షణం యొక్క, మీరు అమరిక మార్చడానికి కావలసిన ప్రతి సెల్ లో CSS ఆస్తి ఉపయోగించాలి. సెల్ యొక్క కంటెంట్లు ఇతర పెద్ద, పెద్ద కణాలు సృష్టించిన ఖాళీ కంటే తక్కువగా ఉంటే మీరు ఈ శైలి యొక్క ప్రభావాలను గుర్తించరు.

ఒక సెల్ ను దిగువకు అమర్చటానికి (మధ్యన కాకుండా, అప్రమేయంగా), వ్రాయుటకు:



ఈ గడి విశ్రాంతి కంటే పొడవుగా ఉంటుంది మరియు దీని ఎత్తు ఎత్తును పొడవుగా చేస్తుంది. కాబట్టి మీరు నిలువుగా సమలేఖనం చేయబడిన సెల్ దిగువకు సర్దుకున్నారని చూస్తారు.
style = "vertical-align: bottom;" > క్రింద ఉన్న విషయాలు.
మధ్యలో విషయాలు.