Hi friends, welcome back to web development series. This is another video of this series जिसमें हम बात करने वाले हैं table tag के बारे में. Table जैसा कि नाम indicate कर रहा है बहुत ही important tag होता है जिसके मदद से आप tabular data show करते हैं. IPL में या World Cup में आपको दिखता होगा ना tabular data वो हम generate कर सकते हैं with the help of table tag. Table का और एक बहुत important use होता है हला कि आज के days में ये काम जादा better हम करते हैं using CSS.
तो चलिए शुरू करते हैं टेबल टैग की वर्किंग को डीटेल में एक्सप्लोर करना जैसा कि टेबल टैग नाम इंडिकेट कर रहा है आप इसको यूज़ करते हैं अगर आपको अपने वेब पेज पे इस तरीके का डेटा दिखाने के लिए आप यूज़ करेंगे टेबल टैग प्रीवियसली आज स े सात आठ साल पहले तक हम टेबल टैग को लेयाउटिंग का मतलब फ्रेंड्स, अपने वेब पेज पे elements को अरेंज करने. But nowadays, layouting is the job of CSS. ये CSS में ज़्यादा better और ज़्यादा recommended होता है.
इसलिए हम लोग इस वीडियो में, table tag से tabular data ही generate कराने का काम करेंगे. अगर table tag के output की बात की जाए, हाला कि exactly ऐसा नहीं दिखेगा. जब मैं आपको HTML में examples कराऊंगा, बिल्कुल ऐसा ही output अगर चाहिए, तो थोड़ा wait करिए, border के उपर बहुत अच्छी properties हमें CSS provide करती है, जो हम आगे चलकर use करने वाले हैं, फिलाल बात करते हैं, table tag का general syntax क्या होता है, तो friends, table tag, चार tags की मदद से काम करता है, जिसने जो हमारा primary tag होता है, जो हमारा main tag होता है, that main tag is basically called as the table tag, यह हमारा outer tag होता है, table tag के अंदर हम लोग, तीन child tags उसके रख सकते हैं, कौन-कौन से child tag रख सकते हैं, तो अगर आपको table में row चाहिए, तो आप tr tag बनाएंगे, right, table के row के अंदर अगर आपको data add करना है, तो आप बनाएंगे td tag, right, यानि अगर मैं अपने previous example की तरफ चलू, तो आप notice करिए, यह जो आपको दिख रहा है, यह, यह अपने आप में rows हैं, जिसमें Neeraj, Yash, Ali इनका record है, यह rows हैं, और अंदर जो आपको Ali 101, Neeraj 102 दिख रहा है, friends, यह table का data है, ये बनता है with the help of td tag और आप देख रहे होंगे उपर मेरे पास name और role number भी आ रहा है ये बनता है with the help of th tag th का मतलब होता है table heading td का मतलब होता है table data और table data और table heading में तो basic differences होते हैं जो table heading होती है friends वो by default bold आती है जबकि आप देख पारे होंगे जो table का data है वो by default normal text में आता है वो bold नहीं आता है right दूसरा जो table heading होती है वो center aligned आती है table data center aligned नहीं आता है वो by default left aligned आता है इस image को देखकर confused मत भूँगी का इसमें table data को center aligned करा गया है but normally अगर आप कोई attribute नहीं लगाएंगे data पे तो data अपनी row के left edge पे आएगा जबकि heading अपनी row के center पे आएगा समझ पाएंगे और notice कर पाएंगे तो अगर इनके generalized syntax की बात की जाएँ friends तो ये रहा है इनका syntax बाहर वाला tag हमारा table होगा, अंदर हम tr लगाएंगे, tr मतलब जितनी हमें row चाहिए, और row के अंदर जितने column चाहिए, उतने हम लगाएंगे td या accordingly th tag.
So without wasting any time, सीधे चलते हैं इसके practical part पे, यह रहा हमारा practical example, this is our first example of table. Okay, अब आप notice करिए इस example में, मेरे पास एक table tag है, fine, table की opening और मैंने यहाँ पर table की closing करी हुई है, table के अंदर मैंने लगा रखे हैं multiple tr tags. पहले TR tag के अंदर मैंने 3 TH दी हैं, जो मनेंगे table के column की heading, HTML, CSS, Javascript.
कैसे आएंगे HTML, CSS, Javascript? मैंने आपको indicate करा, HTML, CSS, Javascript आप देखिएगा, एक तो यह आपको सब के सब bold दिखेंगे, तूसरा यह अपनी row के बिलकुल आपको center पे दिखेंगे, यानि अपने आप TH का data bold भी आता है, अपने आप TH का data center पे भी आता है, जबकि आप इस पे notice करिएगा, ये हमारा normal table data है और ये table data आपको normal font में दिखेगा और left align दिखेगा जबकि heading आपको bold दिखेगी और center align निज़र आईगी इसको run करता हूँ मैं तो चीज़ें आपके लिए और better clear होगी let's run the code so I executed this और this is our browser output clear ये table जैसा तो नहीं दिखा है अभी लाते हैं इसको table के shape में but notice करिए जो आपको output मिल रहा है इसमें ये तीनों के तीनों center aligned दिख रहे होंगे बोल्ड भी दिख रहे होंगे जबकि बाकी data आप notice करिए table का left aligned है और normal font में आ रहा है इस दिफर्ट नेचर आप पीएच एंड टीडी टैग्स हालो कि आप इन्हें कस्टमाइज कर सकते हैं कुछ तक एच्टीमल में बहुत अगर आपको लगता है आपको table पे border चाहिए, तो HTML आपको एक attribute प्रोवाइड करती है, जो आप अपने table tag के साथ लगा सकते हैं, and the name of the attribute is border attribute. Border को जो आपने two value दिये हैं, friends, ये pixels हैं, हाला कि आपको बताने की ज़रूरत नहीं है, कि ये दो pixels का border है, आपको सिर्फ two लिखना है, और अपने आप, जब table के चारो तरफ border आएगा, वो दो pixels की width का border आएगा, यानि line की जो thickness होगी, वो होगी by default two pixels, नहीं करते हैं तो टेबल पे कोई बॉडर HTML अपनी तरफ से नहीं देती है अब आप output में इस बात को भी notice करियेगा कि आपने बॉडर तो लगाया है टेबल पे लेकिन ये बॉडर टेबल पे भी आएगा और टेबल के अंदर के content पे भी आएगा देखिये output आप मेरी बात ज़्यादा better समझ पाएंगे notice कीजिए तो हर cell का, हर column का आपको अपना अलग border दिख रहा होगा यह HTML की default nature है और अगर आपको लगता है आपको यह double border नहीं चाहिए तो मैंने indicate कर रहा था lecture की starting में आपको यह काम करना होगा with the help of CSS CSS में हमारे पास एक property होती है जब हम CSS पढ़ेंगे तब इसको detail में आपको समझाऊंगा property का नाम होता है border collapse अगर आप इस border collapse property को use करें तो आप control कर सकते हैं कि जो border आ रहे हैं वो merge होकर एक single border बन जाए बट HTML आपको by default दिखाती है डबल बॉर्डर, एक टेबल का बॉर्डर अलग चलता है, और टेबल के अंदर के कॉलम्स का बॉर्डर अलग चलता है, ठीक है? तो ये तो ही बार, टेबल पर हमको बॉर्डर चाहिए, तो हम क्या करें? अब आता है अगला important point, टेबल में बॉर्डर के अलाव हम और क्या चीज़ें आड़ कर सकते हैं?
तो friends, टेबल टैक के अपने total 8 attributes होते हैं, एट attributes होते हैं, जिसमें से एक आपने पढ़ लिया, which is border. अब हम बात करते हैं टेबल टैक के दूसरे attributes के बारे में, लेकिन दूसरे attributes को समझें, उससे पहले इस example को देखिए और notice करिए कि आपके notice में बात आ रही है कि table के अंदर का जो data है वो बहुत जादा packed है अपने border की edges से देख पा रहे हैं आप beginning CSS या effective CSS बहुत जादा packed है और इसमें बिल्कुल भी space नहीं आ रही है अगर आपको लगता है आपको table का data और table के border के बीच में gap चाहिए थोड़ा से gap बढ़ाना है तो HTML आपको एक attribute प्रोवाइड करती है जो आप अपने table tag के अंदर use कर सकते हैं and the name of the attribute is cell padding. What is the attribute?
Cell padding is the name of the attribute. So let's get back to the code window. Code window में चलते हैं और यहां आकर अगर मैं open करूँ तो आपको मिलेगी cell padding नाम की एक attribute value जिसको आप जो भी देंगे again that will be in pixel और cell padding यह बता रहा है कि table के अंदर जो content आ रहा है जैसे यहां लिखा बारा है HTML by example यह HTML by example और इसके border के बीच का gap कितना हो, गौर करिएगा आपने जो 20 दिया है, ये minimum 20 pixel का gap होगा, हो सकता है कुछ borders और content के बीच में इससे ज़्यादा भी gap आजाएगा, but minimum 20 pixel का gap होगा और ज़्यादा क्यों आजाएगा, क्योंकि अलग-अलग data की length अलग-अलग, right, तो जो longest data है, उसको देखकर gap maintain करेगा of minimum 20 pixel, जो उससे छोटा data होगा, जागा दिखेगा, let's get to the practical part, run करते हैं page को, तो आप समझ पाओगे let's run it and see the gap जो आपको दिखेगा between content and the border, अब जो मैं आपको समझा रहा था वो ये था, ये जो आप gap देख रहे हैं beginning CSS, right ये आपको मिल रहा है 20 का, लेकिन आप चेक करें, ये आपको थोड़ा जादा भी मिल सकता है ये आपको मिल रहा होगा 20 का, लेकिन ये थोड़ा जादा भी मिल सकता है, तो थोड़ा सा gap कम जादा हो सकता है, but minimum सब तरफ आपको मिलेगा 20 का gap, एक बात दूसरी बात, ये जो gap 20 का है ये चारों तरफ है मतलब top पे भी padding 20 की है, bottom पे भी padding 20 की है, right or left पे भी padding 20 की है. इसको अगर बहतर तरीके से control करना है, again the solution is in CSS, जिसमें आप कई तरीके से padding को कर पाएंगे control, but अभी के लिए जो आप padding दे रहे हैं, वो overall सब तरफ की padding को control करेगा. So this was all about self-padding attribute, अब move करते हैं अगले attribute की तरफ, अब जैसे आपके पास self-padding है friends, बिलकुल वैसे आपके पास अगला attribute है, which is self-spacing.
क्या करता होगा cell spacing? दो cells के बीच का gap control करता है, दो cells, यह दो cell होते हैं न, यह आपका एक cell है, जिसके अंदर कुछ text आ रहा है, यह आपका दूसरा cell है जिसके अंदर कुछ text आ रहा है by default browser अपनी तरफ से एक pixel का gap इनके बीच में देता है क्या आप इस gap को increase करना चाते हैं अगर करना चाते हैं तो आप इसको increment कर सकते हैं with the help of the attribute whose name is cell spacing तो हम cell spacing लेते हैं लेकिन इससे पहले कि मैं cell spacing दिखाऊं एक बार previous वाले मैं इस gap की बात कर रहा हूँ यह gap आप देख रहे हैं जो दो adjacent वो control होगा gap with the help of cell spacing अब मैं run करता हूँ cell spacing वाले example को ठीक है previous वाला बंद कर देते हैं और इस वाले को open रखते हैं comparison के लिए चेक करिए कितना gap आ रहा है आपके इस वाले example में I hope notice कर पा रहे होंगे आप gap अब हमारा बढ़ गया है it's around 20 pixels जो हमने अपनी तरफ से दिया है या maybe 10 pixels लेकिन जो previous वाला gap आपने देखा होगा वो इस से कम है right तो हमारे पास यहाँ पर cell spacing 10 pixels की आ रही है और जो previous example है जैसा मैंने कहा उसमें default spacing आ रही है जो generally browsers 1 pixels की रखते हैं clear तो यह होई बात border, cell padding और cell spacing के बारे अब बात करते हैं table के अगले important attribute को लेकर और अगला important attribute है table का alignment आपने देखा होगा हर example में जो हमारी table है वो page के left side पे आ रही है और normally data left aligned ही आता है अगर आपको लगता है कि आपको यह alignment बदलना है तो आप table पे लगा सकते हैं align attribute table का align attribute table का जो left align data है उसे center या right align कर देगा right, again सिरब right या center aligned आप कर पाएंगे और वो भी row wise alignment कर पाएंगे not कि आप table को पूरे page के center पे ला पाएंगे page के center पे लाना है, जैसा मैंने कहा ये काम करेंगी हमारे लिए CSS तो अगर मैं इस code को execute करूँ इसको match करूँ यह वो code था जिसमें अपने से border set करावा है, आप notice कर पाया रहे हैं कोई data left aligned आ रहा है, इसको friends compare करते हैं अपन इस वाले example में, जिसमें border 2 दे देता हूँ मैं, और अब आप check करिये alignment कैसा आ रहा है, check करिये यह आपका previous example, इसमें alignment left आ रहा है, यह current example जिसमें alignment आपको मिल रहा है और अगर आप right कर देंगे, let me do this, align equal to right अगर आपने कर दिया, as expected, the data will get right aligned on your page. Clear?
This is how we do, or how we handle align attribute. Then comes the next attribute, which is called as width attribute. अब table में आपने गौर कराओगा, table by default उतनी ही width लेती है, जितना table का content है.
नहीं notice कराए, तो आप notice करिए हमारे इस example में. गौर करिए, जो table की width आ रही है, वो इतनी ही आ रही है, जितना हमारे table का content है, right? अब अगर आपको लगता है, नहीं, content कितना भी हो, width मेरे को increase करनी है, तो आप ये काम कर सकते हैं, with the help of width attribute, ऐसे अगर आपको height increase करनी है, again आप ये काम कर सकते हैं, with the help of height attribute, कैसे करेंगे? एक example आपके सामने है, अगर आपको table की width change करनी है, irrespective of the content, तो आप width के अंदर value देंगे, friends ये value के साथ percentage का symbol लगाना ज़रूरी है क्योंकि ये लिखकर आप value को percent में convert कर अब width equal to 100% का मतलब क्या है जो row की width है हम पूरी width चाहते हैं table को मिल जाए exactly बोलूं तो table जिसके भी अंदर आ रहा है table किसके अंदर है table body के अंदर है body की जो भी width आ रही है हम चाहते हैं वो पूरी 100% width हमारी table को मिल जाए ठीक है आप example का output देखिए तो आप समझ पाएंगे output complete 100% width को control कर रहा है, right, यह है आपकी table की पूरी 100% width, got it, then हमारे पास अगला attribute है, जो बिल्कुल width जैसा ही है, and that is called as height, इस example में मैंने height कितनी set करिए friends, example में height set करिए मैंने 75%, जैसे ही मैं page को run करूँगा, output which I'll get, will be in a height of 75%, तो आप देख पा रहे हैं, table का content width wise तो उतना ही है, height wise 75%, या आप generally तब करते हैं जब आप table को थोड़ी जादा जगा अपने web page पे देना चाहते हैं, उसके content के देखते हुए जादा जगा अपने पर देनी हैं, तो अपने use कर सकते हैं attributes width and height.
हालकि मैंने कहा ये सब कुछ customizable है with the help of CSS. अब आता है table का एक और attribute which is bg color. By default, table पे वो ही color आता है जो उसके background element का है. Table का background element कौन है body? Body के लिए normally color white है.
तो आपको table भी white दिख रही होगी बट अगर आपको लगता है table का मुझे अलग background color चेगी तो आप table पे apply कर सकते हैं जैसे मैंने करा है bg color attribute बीजी कलर को आप जो भी value देंगे, बस table का background color, उस particular value पे set हो जाएगी, और जब मैं बात table की कर रहा हूँ, तो color row का भी change होगा, color column का भी change होगा, color heading का भी change होगा, अगर आपको लगता है नहीं, मुझे table में किसी particular row पे अलग color चाहिए, column पे अलग color चाहिए, तो friend the good thing is that, this BG color attribute can also be applied on TR, as well as TD and TH tags, फिलाल इस example मैं इसको apply कर रहा हूँ on TR tag, एक और, sorry, table tag, एक और बात मैं आपके notice मिलाना चाहूँगा, यह जो color को आप value दे रहे हैं, ज़रूरी नहीं है, color का नाम ही हूँ, जैसे हमने पिछले वीडियो में discuss करा था, आप यहाँ पर सीधे color की hex value भी set कर सकते हैं, जो भी hex value आप देंगे, वो ही table का बन जाएगा color, तो Can you guess, यह last वाली row में color different क्यों मिल रहा है? Yes, you guessed it right. मैंने TR और TD में भी apply करावा है उनका BG color. तो actual में इस page में कितने BG color applied है?
तीन BG color applied है. मैंने BG color apply कराए टेबल पे, तो color आ रहा है lime green. थोड़ा सा scroll down करिए, तो मैंने इस TR पे भी एक BG color लगाएवा है, तो color आ रहा है light blue, और मैंने इस TD पे BG color लगाएवा है, पूरी टेबल का color green है.
जिन जिस row पे color नहीं है वो green है जिस पे color दिया वा है वो blue आ रही है और particular td का color आपको दिख रहा होगा crimson इस तरह से आप table में अलग-अलग row या अलग-अलग column को different colors दे सकते हैं ठीक है? Then comes an attribute called background background friends role play करता है आपके web page के background color को set करने का web page पे background image set करने का background image कैसे set करेंगे? उसके लिए आप use करेंगे background attribute ठीक,..forward slash की बात हम anchor tag के दौरान कर चुके हैं..forward slash से आप value को एक step उपर लेकर जाएंगे, यानि आप browser को ही बता रहे हैं, current folder से एक folder उपर जाओ, तो एक folder उपर जाने पर मिलेगा media, media के अंदर मिलेगा images, images के अंदर मिलेगा puzzle.jpg बट एक चोटी से दिक्कत आपको इस background के साथ नजर आईगी, notice करिए आ रही है, आई, background में image तो आ रही है लेकिन यह अपना आपको repeat कर रही है, इस repetition को हम बोलते हैं tiling, और यह tiling आप control करेंगे again with the help of CSS. By default, HTML में, जब आप table के background पे कोई image लाते हैं, image keeps on repeating itself. Got it?
तो अगर आपको लग रहा हो, कोई table के background image चाहिए, this is the way to put image on the table's background. Fine. फिर हमारे पास अगला interesting attribute, bg color जो table पे हैं, और इसके example मैं आपको दिखाई चुका हूँ, एक बार और देख लेते हैं, हम BG color TR पे भी और TD पे भी सेट कर पा रहे हैं, तो अगर मैं इस code को run करूँ, although this example को मैंने cover कर लिया है, एक बार फिर देख लेते हैं, तो आप notice करिए, table का color हमें different दिख रहा है, और हमें TD का और TR का color लाने का तरीका तीनों तरीकों से TD पे भी, TR पे भी और table पे भी.
अब एक और चीज इसको समझने के लिए मैंने जहाँ पर width set करी थी, वो वाला example अपन लेंगे, यह वाला example आपकी अब इस example में आपके notice में आ रहा होगा कि जो हमारी row का data है क्या वो left aligned आ रहा है can you see that? beginning CSS left पे HTML by example left पे आप ये भी देख पा रहे होंगे, अगर मैं height वाला example open करूँ, let me open the example जिसमें height use करिए, तो आप देखेंगे, vertically जो हमारा data आ रहा था, वो middle align आ रहा है, check करिए, आ रहा है middle align, यानि table के data की जो default nature होती है, वो horizontal alignment उसका left होता है, let me write this, table के data का horizontal alignment left होता है, और table के data का by default vertical alignment friends middle होता है, अगर आपको लगता है कि आपको यह alignment change करना है, for example, मैं चाहता हूँ java strip for beginners right side पे आजाएं, या मैं चाहता हूँ professional java strip top पे आजाएं, तो मेरे पास दो attributes हैं, जो मैं tr या td पे लगा सकता हूँ, table पे तो लगाओंगा तो पूरी table align हो जाएगी, मुझे अंदर के content को align करना है, यह करने के लिए there is one attribute called align, जो horizontal alignment सेक्ट करता है, जिसके लिए possible values हैं left, center, और right और friends मेरे पास दूसरा attribute है जिसका नाम है v align v align से हम vertical alignment set करते हैं और इसके लिए हम use करते हैं top, bottom और middle. ठीक है? Default value किसकी क्या होती है?
तो अगर हम align attribute बोलें, इसकी default value left होती है. अगर हम V align attribute बोलें, इसकी default value middle होती है. इसलिए आप चेक करिए, आपको table का हर data horizontally left align दिख रहा है, दिख पा रहे होंगे, और vertically हार data आपको दिख रहा है middle.
अब इसको कैसे control कर सकते हैं? तो ये रहा हमारा alignment control करने वाला example चेक कीज़े this one चिके चेक करें मैंने TR के अंदर align में value दियू ये right इसका मतलब जो मेरी table की third row है first row तो आप notice करेंगे heading की हो गई second row के अंदर एक data आ रहा है I mean एक row आ रही है data की जो मेरी तीसरी row आ रही है उसका मैंने alignment करावा है right यानि इस पूरी row का alignment right आएगा horizontal alignment vertical alignment मैंने करा बाय top यानि पूरी row right और top पे आईगी बट एक column इसके अंदर ऐसा होगा जो alignment row के against जाकर अपना left कर रहा है और अपना vertical alignment सॉरी अपना vertical alignment सेट कर रहा है bottom पे तो खास देहान रखियेगा third row पे आपको data दो तरह से align दिखेगा चेक करिए, क्या आपके notice में यह बात आ रही है, यह जो row है हमारी, third row, इसका पूरा data जा रहा है right align और top, लेकिन जो third row में second column है, उसका data left align भी आ रहा है, और बिल्कुल bottom पे भी set हो रहा है, अगर आपको लग रहा है table right align कैसे हो गई, तो आप easily predict कर सकते हो, table right align हो गई, क्योंक कि vertical alignment कैसे set हो रहा है बड़ाना आपको समझ नहीं आएगा ठीक है और यही कारण है कि आपको रोज दिख रही है right align लेकिन एक particular column आपको नज़र आ रहा है left align clear तो यह हुए सारे attributes जो table और trtd के साथ अपने लोग यूज़ कर सकते हैं अब इससे पहले कि मैं आगे बढ़ूं एक और छोटी सी बात आपसे करनी है कि जब आप HTML में table बनाते हैं तो HTML 5 यह recommend करती है कि आप table के अंदर तीन और tags को यूज़ करें इसका benefit ही होता है कि जो screen readers होते हैं या assistive technologies होती हैं वो आपके web page को जादा better समझ पाती हैं जो SEOs होते हैं, search engine optimizations वो आपके table के content को रोज को better समझ पाते हैं अगर आप table का data TRTD के साथ इन tags के अंदर रखें कौन-कौन से तीन tags की बात हो रही है friends पहला है tag which is called as T-head क्या करेगा ये T-head आप तब रखाईए जब आप table में row की heading set कर रहे हो, यानि हमारे example की अगर हम बात करें, तो हमने जो उपर बिल्कुल title डालावा है न, जिसमें हमने लिखा वाए, HTML, CSS, JavaScript, वो हमको डालना चाहिए किसके अंदर, T-head के अंदर, गौर करिएगा आपको output में कोई फरक नहीं दिखेगा, T-head ना भी होता, output वैसा ही दिखता जैसा उसके बिना दिखता है, या उसके साथ दिख रहा है, बट जब आपका web page कोई भी screen reader पढ़ता है, screen reader वो devices होते हैं, जो लोग तब use करते हैं, जब वो visually आपकी website को इतना clearly नहीं देख पा रहे हैं. तो वो लोग यूज़ करते हैं screen reader या assistive technologies और ये technologies बोल कर आपके web page का content बताती है तो ज़ादा better रहेगा न अगर कोई ये बोल कर बताए कि ये table की heading है so T head that is why हम T head यूज़ करते हैं और ये semantic tags की category में आता है आपको याद होगा एक semantic tag मैंने आपको strong भी बताया था जिसका verbal meaning जादा clear है कि वो आपके table की row की set कर रहा है heading अच्छा T head के अलाबा और क्या है तो T head के अलाबा आपको बाकी का पूरा data जो actual content है table का वो आप देखी पा रहे होंगे अपन को रखना चाहिए inside T body tag और जो आपके table में last आपको कुछ conclusion दिखाना होगा वो आप लोग रखेंगे उस tag में जिसका नाम है T foot tag तो T head के अंदर table की heading आईगी टी बॉडी के अंदर मीन कंटेंट आएगा, टी फूट के अंदर टेबल का फूटर डाल दीजे, से पर एक्जांपल, मैं कोई बिलिंग के लिए टेबल बना रहा हूँ, किस के लिए टेबल बना रहा हूँ, बिलिंग के लिए टेबल बना रहा हूँ, ये पूरा मेरा आना चाहिए inside T-body और मान लीजिए बिलकुल bottom पे, मैं यहाँ पर कुछ total वगेरा show कर रहा हूँ, bill का, यह मेरा आ जाना चाहिए T foot में, ठीक है, इससे आपकी page की appearance, और जैसा मैंने कहा बार-बार screen reader और assistive technologies के लिए page समझना आसान है जाता है, तो इस example के अंदर, मैंने इनी tags को use करावा है, एक use करावा है, मैंने T head, जिसमें हमने पूरी heading डाली हुई है, एक मैंने use करावा है, T body, foot की मुझे जरूरत नहीं है, क्योंकि मेरे पास ऐसी कोई special row नहीं है, जो last में कुछ conclusion दे रही हो, इसलिए मैंने t foot use नहीं करा है, दो use करें, एक t body और एक t head, page run करने पर, जैसा मैंने कहा difference नजर नहीं आएगा, output वैसा ही देखेगा, जैसा इनके बिना आता है, but page को समझना, screen readers या दूसरी technologies के लिए आसा हो जाएगा, अब आते हैं table से related, एक और important tag, but knowledge होनी चाहिए आपको, अगला important tag है, वो है caption tag, कैप्शन से क्या सेट करते हैं?
कैप्शन से आप यह सेट करते हैं, कि आपको अपनी टेबल पे क्या कैप्शन चाहिए, क्या टाइटल चाहिए, जैसे आपके वेब पेज का टाइटल होता है, जो आपको टाइटल बार में दिखता है, तो वह आप सेट करेंगे using caption tag, recommended books, तो अब क्या होगा, recommended books, by default, जो caption अपना text render करता है, वो render करता है top center को, अगर आपको लग रहा है मुझे ये bottom पे लाना है, we have the attribute for caption itself, जिसका नाम होता है align attribute, align attribute को आप bottom value दे सकते हैं, जैसे ही आप bottom value देंगे, ये caption टेबल के bottom पे आ जाएगा, बहुत जगों पर ये भी लिखा वाए, कि अब align को left कर देंगे, तो left हो जाएगा, जानते हैं आपने head section पढ़ा हुआ है, style tag लगाईए, style tag के अंदर अपना selector बनाईए, हमें selector किस पे बनाना है, caption पे बनाना है, और CSS के अंदर align नहीं होता है, CSS के अंदर होता है text align, तो अगर मेरे को table का caption का alignment left करना है, तो मैं बोलूंगा text align colon left, अब क्या होगा, अब दोनों का combined effect आपको दिखेगा, जो vertical alignment है, वो आपको bottom दिख रहा होगा, और जो horizontal alignment है, वो आपको दिख रहा होगा left hand side इस तरह से आप table पे alignment या content set कर सकते हैं अगले वीडियो में मैं आप से discuss करूँगा एक और table से related बहुत important topic और वो है irregular tables बनाने ऐसी tables जिसमें हर row में same number of columns नाओ जैसे इस example में सब में same number of columns थे अगले lecture में बात करते हैं different columns की table नाम कैसे बनाते हैं see you in the next lecture bye and take very good care of yourself