Skip to main content

Introduction to HTML Tables

Image
By SARVESH SHARMA

Introduction to HTML Tables 

एक webpage में किसी data को structured form में represent करने के लिये आप HTML tables को use करते है। अपने webpage में tables include करके आप उसे ओर भी structured ओर attractive बना सकते है।
HTML मे tables create करने के लिये आप <table> tag युज करते है। इस tag का एक sub tag होता है जिसे <tr> table row tag कहते है। <tr> tag का भी एक sub tag होता है जिसे <td> table data tag कहते है।

Creating Tables in HTML 

कोई भी table row ओर columns से मिलकर बनी होती है। इसलिये <table> tag के बाद row create करने के लिये आप <tr> tag युज करते है। आप जितनी rows create करना चाहते है उतने ही <tr> tag define करते है।
Rows create करने के बाद आप rows मे columns create करते है। Columns create करने के लिये <td> tag का इस्तेमाल किया जाता है। आप जितने columns create करना चाहते है उतने ही <td> tags define करते है।

Example

<!DOCTYPE html>

<html> 

<head> 
<title> Table web page</title> 
</head> 

<body> 

<table border="1">  
<tr> <td>First row first column</td> 
<td>First row second column</td></tr>   
 
<tr> <td>Second row first column</td>
<td>Second row second column</td></tr>  
</table> 

</body> 
</html>

Output

HTML-table-example-output
HTML में table create करने के लिए आपको tags का order हमेशा ध्यान रखना चाहिए। सबसे पहले <table> tag आता है। इसके बाद <tr> tag आता है।  फिर उसके बाद <th>  और <td> tags आते है। <th> और <td> tags हमेशा <tr> tags के अंदर ही आएंगे। एक बात आपको और ध्यान रखनी चाहिए की जब तक आप border attribute के द्वारा table की border define नहीं करते है तब तक table की border show नहीं होती है।

Creating Table Headings

आप चाहे तो tables कि first row मे headings भी create कर सकते है। Heading text table के बाकी text से मोटा ओर बडा होता है। उदाहरण के लिए यदि आप कोई table create कर रहे है जो employees कि information store करती है तो आप Names ओर addresses आदि headings create कर सकते है।
Heading create करने के लिये <th> tag युज किया जाता है। इसे HTML में table heading tag कहते है। इस tag मे आप जो text युज करते है वह web page मे heading कि तरह show होती है। इस tag को <tr> tag के अंदर युज किया जाता है। 

Example

<!DOCTYPE html>

<html> 

<head> 
<title>Table Heading Page</title> 
</head> 

<body> 

<table border="1"> 
<tr><th>Names</th> 
<th>Address</th> </tr>  
<tr> <td>Sam</td> 
<td>United States</td></tr> 
<tr><td>Vijay</td> 
<td>India</td></tr> 
</table> 

</body> 
</html>

OUTPUT

HTML-table-heading-example-in-Hindi

COLSPAN Attribute  

आप चाहे तो किसी एक row के column को एक से ज्यादा columns मे भी divide कर सकते है। इसके लिये आप उससे पहले वाले column मे colspan attribute define करते है। जिस column मे आप colspan define करते है वो एक column उतने ही columns की जगह घेरता है।     

Example

<!DOCTYPE html>

<html> 

<head> 
<title>Colspan WebPage </title> 
</head> 

<body> 

<table border="1"> 
<tr><th>Names</th> 
<th colspan ="2">Mobile No.</th></tr>  
<tr><td>Charlie</td>  
<td>4856456465486</td> 
<td>1235713</td></tr> 
<tr><td>Rajesh</td> 
<td colspan ="2">12683124598</td></tr> 
</table> 

</body> 
</html>
उपर दिए गए उदाहरण को देखिये राम के pass 2 mobile numbers है। लेकिन श्याम के pass एक ही mobile number है। यदि आप normally table create करेंगे तो श्याम वाली row में एक column की जगह खाली बच जाएगी। ऐसे में आपकी HTML table बिलकुल भी अच्छी नहीं लगेगी।
यदि आप चाहते है की श्याम वाली row का एक column ऊपर वाली row के दो columns को cover करे तो आप उस column में colspan attribute यूज़ करते है। और जितने columns आप इस एक column से cover करना चाहते है उतनी ही integer values देते है।
और जितने columns आप इस एक column से cover करना चाहते है उतनी ही integer values देते है। जैसे की मैने उपर दिए हुए example श्याम वाली row के एक column से राम वाली row के 2 columns cover किये है।

output

HTML-colspan-attribute-example-in-Hindi

ROWSPAN Attribute 

ROWSPAN attribute भी colspan की तरह ही होता है। इसे आप <tr> tag में define करते है। इस attribute की आप जितनी values देते है वह एक row उतने ही columns की जगह घेरती है।

Example

<!DOCTYPE html>

<html> 

<head> 
<title> Rowspan Webpage </title> 
</head> 

<body> 

<table border="1"> 
<tr><th rowspan="2">Colors</th> 
<td>Red</td></tr> 
<tr><td>Lime</td></tr> 
<tr><th rowspan="2">Guava</th> 
<td></td></tr> 
<tr><td>Apple</td></tr> 
</table> 
 
</body>

</html>

OUTPUT

HTML-rowspan-attribute-example-in-Hindi

Naming The Table 

आप चाहे तो HTML में table का कोई नाम दे सकते है जिसे caption भी बोलते है। इसके लिए आप <caption> tag यूज़ करते है। इसे <table> tag के बाद define किया जाता है।

Example

<!DOCTYPE html>

<html 

<head> 
<title>Naming the tables</title> 
</head> 

<body> 

<table border="2"> 
<caption>MyTable</caption> 
<tr><td>Vipin Sharma</td> 
<td>India</td></tr> 
</table> 
  
</body>

</html>

Output

HTML-table-naming-example-output

Comments

Post a Comment

Popular posts from this blog

सॉफ्टवेयर क्या हैं तथा उसके प्रकार

By SARVESH SHARMA
सॉफ्टवेयर क्या हैं तथा उसके प्रकार, सॉफ्टवेयर क्या हैं? (What is Software)  सॉफ्टवेयर Computer का वह Part होता है जिसको हम केवल देख सकते हैं और उस पर कार्य कर सकते हैं, Software का निर्माण Computer पर कार्य करने को Simple बनाने के लिये किया जाता है, आजकल काम के हिसाब से Software का निर्माण किया जाता है, जैसा काम वैसा Software । Software को बडी बडी कंपनियों में यूजर की जरूरत को ध्‍यान में रखकर Software programmers द्वारा तैयार कराती हैं, इसमें से कुछ free में उपलब्‍ध होते है तथा कुछ के लिये चार्ज देना पडता है। जैसे आपको फोटो से सम्‍बन्धित कार्य करना हो तो उसके लिये फोटोशॉप या कोई वीडियो देखना हो तो उसके लिये मीडिया प्‍लेयर का यूज करते है। कंप्यूटर बिभिन्न प्रोग्रामों का समूह होता हैं जिसके द्वारा विशिष्ट कार्यों को किया जा सकता हैं| कंप्यूटर में दो भाग होते है, पहला हार्डवेयर कहलाता है जबकि दूसरा सॉफ्टवेयर | हार्डवेयर कंप्यूटर के भौतिक भाग होते है जिन्हें हम छु सकते है जो एक निश्चित कार्य करते है, जिसके लिए उन्हें बनाया गया है जैसे- Keyboard, Mouse, Monitor, CPU, Printer, ...
3 comments
Read more

Whatsapp की voice कॉल रिकॉर्ड कैसे करे ।।शर्मा_कंप्यूट_ज्ञान

By SARVESH SHARMA
Whatsapp की voice कॉल रिकॉर्ड कैसे करे ।।शर्मा_कंप्यूट_ज्ञान आप सभी ने कभी न कभी यह महसूस ज़रूर किया होगा कि फोन पर कॉल करने के दौरान उसे रिकॉर्ड कर सकते हैं, लेकिन WhatsApp पर किसी से कॉल करने पर क्या उसे रिकॉर्ड किया जा सकता है। हां, ज़रूर, फेसबुक के इंस्टेंट मेसेजिंग ऐप WhatsApp में आप एक ट्रिक की मदद से कोई भी कॉल रिकॉर्ड कर सकते हैं। 1- सबसे पहले क्यूब कॉल रिकॉर्डर (Cube Call Recorder) ऐप को अपने फोन में डाउनलोड करें। ऐप ओपन करने के बाद व्हाट्सऐप पर जाएं। 2- इसके बाद उस व्यक्ति को कॉल लगाएं जिससे आपको बात करनी है। 3- अगर आपको कॉलिंग के दौरान क्यूब कॉल विजेट दिखाई देता है तो इसका मतलब यह आपके फोन में काम कर रहा है। 4- अगर आपको error शो होता है तो एक बार फिर क्यूब कॉल रिकॉर्डर को खोलें। इस बार आपको ऐप के सेटिंग सेक्शन में जाना है और यहां आपको वॉयस कॉल में Force VoIP पर क्लिक करना है। 5- एक बार फिर व्हाट्सऐप से कॉल लगाएं और देखें कि क्या अब क्यूब कॉल रिकॉर्डर का विजेट शो हो रहा है या नहीं। 6- अगर आपके फोन में दोबारा error दिखाता है तो इसका मतलब यह आपके फोन पर काम नहीं करेगा...
Post a Comment
Read more

कम्प्यूटर की पीढियाँ (Generation of Computer in Hindi)

By SARVESH SHARMA
कम्प्यूटर की पीढियाँ (Generation of Computer in Hindi) कंप्यूटर का विकास 16 वीं शताब्दी से शुरू हो गया था तथा आज का आधुनिक कंप्यूटर्स इसका परिणाम है। हालांकि, कंप्यूटर के विकास में तेज़ी से बदलाव आया। प्रत्येक पीढ़ी के बाद, कंप्यूटर के आकार-प्रकार, कार्यप्रणाली और कार्यशीलता में बहुत सुधार हुआ है। वर्तमान के कंप्यूटर काफी आधुनिक और विकशित है। इस क्रम-विकास की अवधि के दौरान, कंप्यूटर में काफी परिवर्तन आये जिसने कंप्यूटरों की नई पीढीयों को जन्म तथा विभिन्न प्रकार की कंप्यूटर का आविष्कार हुआ। जिससे हम  जनरेशन ऑफ कंप्यूटर   (Generation of Computer in Hindi)  के रूप में जानते है तथा इसे पांच अलग चरणों में विभाजित किया गया है। पहली पीढ़ी के कंप्यूटर (1940 – 1956) दूसरी पीढ़ी के कंप्यूटर (1956 – 1963) तीसरी पीढ़ी के कंप्यूटर (1964 – 1971) चौथी पीढ़ी के कंप्यूटर (1971 – 1980) पांचवीं पीढ़ी के कंप्यूटर (वर्तमान और भविष्य) फर्स्ट जनरेशन ऑफ कंप्यूटर (1940 – 1956) पहले पीढ़ी के कंप्यूटरों में  वैक्यूम ट्यूब  का इस्तेमाल किया गया था। वैक्यूम ट्...
1 comment
Read more