fbpx

Website Designing Course | Lesson 09 | How to create web layout using Table in HTML

Website Designing Course in Telugu | How to create web layout using Table in HTML
Website Designing Course | Lesson 9 | How to create web layout using Table in HTML

హాయ్, నమస్కారం, లాస్ట్ లెసన్ లో మనం టేబుల్స్ ద్వారా డేటా ని వెబ్ పేజెస్ లో ఎలా ఇన్సర్ట్ చేస్తారో తెలుసుకున్నాం. ఈ లెసన్ లో టేబుల్స్ ద్వారా వెబ్ లేఔట్స్ (వెబ్సైట్లు)ఎలా క్రియేట్ చేయాలో తెలుసుకుందాం. ఇంకా ఆలస్యం చేయకుండా లెసన్ స్టార్ట్ చేద్దాం.
ముందుగా ఒక వెబ్ పేజీని క్రియేట్ చేస్తున్నాను.
Website Designing Course in Telugu | How to create web layout using Table in HTML

ఇప్పుడు నేను ఈ విధంగా కొంత కోడింగ్ ని వ్రాస్తున్నాను.
Website Designing Course in Telugu | How to create web layout using Table in HTML
అప్పుడు మీకు ఈ విధంగా కనిపిస్తుంది.
Website Designing Course in Telugu | How to create web layout using Table in HTML
ముందుగా నేను ఒక టేబుల్ టాగ్ వ్రాసాను. తరువాత అందులో ఒక tr టాగ్ వ్రాసాను. అందులో ఒక td వ్రాసి, దానిలో ఒక లోగో ని ఇన్సర్ట్ చేశాను. అప్పుడు మీకు పైన చూపించిన విధంగా కనిపిస్తుంది.
ఇప్పుడు నేను దాని ప్రక్కన ఒక మెనూ రావటం కోసం ఈ విధంగా వ్రాస్తున్నాను.
Website Designing Course in Telugu | How to create web layout using Table in HTML
పైన కనిపించే ఇమేజ్ లో సెలెక్ట్ చేసిన కోడ్ వ్రాసిన తరువాత సేవ్ చేసి, వెబ్ పేజీ ని రిఫ్రెష్ చేయండి. అప్పుడు మీకు ఈ విధంగా కనిపిస్తుంది.
Website Designing Course in Telugu | How to create web layout using Table in HTML
పైన కనిపించే ఇమేజ్ లో మీకు లోగో ప్రక్కన ఈ విధంగా ఒక మెనూ కనిపిస్తుంది. ఇలా ప్రక్కప్రక్కన నావిగేషన్ లింక్స్ రావటం కోసం నేను లోగో ఇన్సర్ట్ చేసిన td తరువాత ఇంకొక td లోపల ఒక table టాగ్ ని వ్రాసాను. అందులో నేను ఒక tr టాగ్ వ్రాసి, మళ్ళి అందులో 5 td లు వ్రాసాను. ఆ td లలో ప్రతి దానిలోని ఒక anchor టాగ్ ని వ్రాసాను. Href మాత్రం డమ్మి లింక్స్ గా # ఇవ్వటం జరిగింది.
Note: ఒక టేబుల్ లోపల ఎన్ని టేబుల్స్ అయినా ఇన్సర్ట్ చేయవచ్చు. కానీ వాటిని జాగ్రత్తగా మెయింటైన్ చేయాలి. ఎక్కడన్నా ఒక టాగ్ అయినా బ్రేక్ అయినా మొత్తం స్ట్రక్చర్ డిస్టర్బ్ అవుతుంది. కాబట్టి జాగ్రత్త!
ఇప్పుడు మీకు వెబ్ లేఔట్ స్ట్రక్చర్ రావటం కోసం నేను మొదట వ్రాసిన మెయిన్ టేబుల్ కి నేను బార్డర్, ఇంకా సెంటర్  align, టేబుల్ width  attributes ఈ విధంగా వ్రాస్తున్నాను.
Website Designing Course in Telugu | How to create web layout using Table in HTML
 ఇప్పుడు సేవ్ చేసి, వెబ్ పేజీ ని రిఫ్రెష్ చేయండి. అప్పుడు మీకు ఈ విధంగా కనిపిస్తుంది.
Website Designing Course in Telugu | How to create web layout using Table in HTML
మనం వ్రాసిన బార్డర్ attribute వలన మనకి బార్డర్ యొక్క width డిఫైన్ అవుతుంది. అదే మీరు వేల్యూ 2 ఇస్తే, బార్డర్ థిక్ నెస్ అనేది పెరుగుతుంది. కానీ మనకి 1 సరిపోతుంది. Align attribute ద్వారా మనం సెంటర్, లెఫ్ట్, రైట్ అలైన్మెంట్స్ చేయవచ్చు అని మీకు తెలుసు కదా! ఇక చివరగా width. మనం మనకి కావాల్సినంత width ఇవ్వవచ్చు. నేను మాత్రం ఈ లెసన్ లో 900 pixels ఇచ్చాను.
కానీ నాకు లోగో td width ఎక్కువగా ఉంది అని అనిపిస్తుంది. మీకు అలాగే అనిపిస్తుందా? అయితే ఆ td టాగ్ లో width attribute ఈ విధంగా వ్రాద్దాం.
Website Designing Course in Telugu | How to create web layout using Table in HTML
నేను 30% width లోగో td కి అలాట్ చేశాను. ఇప్పుడు సేవ్ చేసి, వెబ్ పేజీని రిఫ్రెష్ చేయండి.
Website Designing Course in Telugu | How to create web layout using Table in HTML
ఇప్పుడు మనకి మెనూ లెఫ్ట్ align అయినట్టు కనిపిస్తుంది.
మనం మెనూ లింక్స్ ని సెంటర్ align చేద్దాం. అందుకోసం ఈ విధంగా కోడింగ్ వ్రాద్దాం.
Website Designing Course in Telugu | How to create web layout using Table in HTML
ఇందులో నేను మనం మెనూ కోసం వ్రాసిన టేబుల్ యొక్క width 100% అని, tr align center అని, ప్రతి td width 20% అని ఇచ్చాను. ఇప్పుడు సేవ్ చేసి, వెబ్ పేజీని  రిఫ్రెష్ చేయండి.
Website Designing Course in Telugu | How to create web layout using Table in HTML
మనకి పై విధంగా కనిపిస్తుంది. ఇపుడు ఈ కోడ్ ఎందుకు ఇలా వ్రాయాలి అని తెలుసుకుందాం.
మొదట మనం మెనూ కోసం వ్రాసిన టేబుల్ width 100% అని ఇచ్చాము. లోగో వ్రాసిన td width 30% అని వ్రాసాము, ఇంకా అందులో 70% ఉంది. ఆ మొతం స్పేస్ టేబుల్ కోసం మాత్రమే అని (ఆ టేబుల్ రో లో ) అక్కడ డిఫైన్ చేస్తున్నాం.
తరువాత tr align center చేసాం. ఇలా వ్రాయటం వలన tr టాగ్ లోపల వ్రాసే tdల అలైన్మెంట్ కూడా సెంటర్ అవుతుంది.
చివరగా ప్రతి td లోను width 20% అని వ్రాసాము. మనకి మొత్తం 5 నావిగేషనల్ లింక్స్ ఉన్నాయి. మొత్తం టేబుల్  యొక్క width 100% అయితే, మనకి ప్రతి td width 20% అయితేనే అన్ని tdలు సమానంగా ఉంటాయి.
ఇక్కడితో హెడర్  సెక్షన్ అయినట్లే. ఇక మెయిన్ బాడీ కంటెంట్ చూద్దాం.
ఇప్పుడు నేను ఈ విధంగా కోడింగ్ వ్రాస్తున్నాను.
Website Designing Course in Telugu | How to create web layout using Table in HTML
ఈ విధంగా వ్రాసిన తరువాత సేవ్ చేసి, వెబ్ పేజీని రిఫ్రెష్ చేయండి. అప్పుడు మీకు ఈ విధంగా కనిపిస్తుంది.
Website Designing Course in Telugu | How to create web layout using Table in HTML
పైన కనిపించే కోడింగ్ వ్రాసిన ఇమేజ్ లో ఒక కామెంట్ వ్రాయడం జరిగింది. ఇంకా బాగా అర్థం అవ్వటానికి దానిని సెలెక్ట్ కూడా చేశాను. కామెంట్ తరువాత నుండి మెయిన్ బాడీ కంటెంట్ స్టార్ట్ అవుతుంది.
హెడర్ tr క్లోజ్ అయ్యాక ఒక కామెంట్ వ్రాసి, కామెంట్ తరువాత ఒక tr వ్రాయడం జరిగింది. అందులోనే (trలోనే) ఒక td వ్రాసాను. దానికి ఒక attribute వ్రాసాను, గమనించారా? అది colspan అనే attribute. దాని ద్వారా రెండు td లను మెర్జ్ చేయవచ్చు. ఇక్కడ నేను రెండు td లని మెర్జ్ చేయని అనుకున్న కాబట్టి వేల్యూ 2 ఇచ్చాను.
అందులోనే ఒక హెడ్డింగ్ టాగ్, ఒక ఇమేజ్ టాగ్ వ్రాసాను. అవి అర్థం అయ్యాయి కదా. ఇప్పుడు కొంత కంటెంట్ వ్రాద్దాం. ఇక్కడ నేను కొంత డమ్మి టెక్స్ట్ ఇన్సర్ట్ చేస్తున్నాను.
Website Designing Course in Telugu | How to create web layout using Table in HTML
నేను ఒక 5 పేరాగ్రాఫ్స్ యాడ్ చేశాను. ఇప్పుడు సేవ్ చేసి, వెబ్ పేజీ ని రిఫ్రెష్ చేస్తే ఈ విధంగా కనిపిస్తుంది.
Website Designing Course in Telugu | How to create web layout using Table in HTML
ఇక్కడితో మనకి మెయిన్ బాడీ కంటెంట్ కూడా కంప్లీట్ అయ్యింది. ఇక ఇప్పుడు ఫూటర్ సెక్షన్ స్టార్ట్ చేద్దాం. అందుకోసం ఈ విధంగా నేను కోడింగ్ వ్రాస్తున్నాను.
Website Designing Course in Telugu | How to create web layout using Table in HTML
కామెంట్ తరువాత ఉన్న tr టాగ్ ద్వారా మనం చివరి ఫుటర్ సెక్షన్ కూడా వ్రాసాము. ఇప్పుడు సేవ్ చేసి, రిఫ్రెష్ చేస్తే మీకు ఈ విధంగా కనిపిస్తుంది.
Website Designing Course in Telugu | How to create web layout using Table in HTML
ఇంత కోడింగ్ తెలుసుకున్న మీకు ఈ ఫుటర్ సెక్షన్ అర్థం చేసుకుంటారు అనుకుంటున్నా. అందుకే చెప్పట్లేదు, మీరూ నేర్చుకోవాలి కదా! మనం లాస్ట్ క్లాస్ లో టేబుల్స్ ద్వారా డేటా ఎలా ఇన్సర్ట్ చేసుకుంటామో మాత్రమే తెలుసుకున్నాం. 
ఈ లెసన్ ద్వారా టేబుల్స్ గురించి మరింత తెలియచేయాలి అని ఈ వెబ్ లేఔట్ లెసన్ ప్లాన్ చేయటం జరిగింది. మీకు టేబుల్స్ ద్వారా ఇంకొక లేఔట్ గురించి కూడా ఎక్స్ప్లెయిన్ చేస్తాను.
ఈ లెసన్ ఇంకా బాగా అర్థం అవటం కోసం ఒక వీడియో లెసన్ కూడా చేయటం జరిగింది. దానిని కూడా ఈ లెసన్ లోనే ఇవ్వటం జరిగింది. ఒక్కసారి ఆ వీడియో చుస్తే మీకు ఇంకా బాగా అర్థం అవుతుంది. 
కాబట్టి మర్చిపోకుండా వీడియో కూడా చూడండి. ఈ కోర్స్ కనుక మీకు అర్థం అయితే మీ ఫ్రెండ్స్ కి కూడా షేర్ చేయండి. డౌట్స్ ఉంటె కామెంట్ చేయండి. ధన్యవాదాలు.

Add a Comment

Your email address will not be published. Required fields are marked *