HTML in Hindi : Tables

HTML Tables 

  • Introduction to HTML tables in Hindi 
  • Creating HTML tables in Hindi 
  • Styling HTML tables in Hindi

Introduction to HTML Tables 

किसी भी data को structured form में represent करने के लिये आप 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 करते है।

इसका उदाहरण नीचे दिया जा रहा है।

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

<body>

<table border="1"> 

<tr> 
<td>First row first column</td>
<td> First row second coloumn</td>
</tr>  

<tr>   
<td>Second row first column</td>
<td>Second row second column</td>
</tr> 

</table>

</body>

</html>

ऊपर दी गयी script निचे दिया गया web page generate करती है।

HTML-table-example-output

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 युज किया जाता है। इसे table heading tag कहते है। इस tag मे आप जो text युज करते है वह webpage मे heading कि तरह show होती है। इस tag को <tr> tag के अंदर युज किया जाता है। इसका उदाहरण नीचे दिया जा रहा है। 

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

<body>

<table border="1">

<tr>
<th>Names</th>
<th>Addresse</th> 
</tr> 

<tr> 
<td>Sam</td>
<td>United States</td>
</tr>

<tr>
<td>Vijay</td>
<td>India</td>
</tr>

</table>
</body>
</html> 
      
ऊपर दी गयी script को run करने पर निचे दिया गया web page generate होगा।

HTML-table-heading-example-in-Hindi


COLSPAN Attribute  

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

<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 की जगह खाली बच जाएगी। ऐसे में table बिलकुल भी अच्छी नहीं लगेगी। यदि आप चाहते है की श्याम वाली row का एक column ऊपर वाली row के दो columns को cover करे तो आप उस column में colspan attribute यूज़ करते है और जितने columns आप इस एक column से cover करना चाहते है उतनी ही integer values देते है। जैसे की मैने उपर दिए हुए example श्याम वाली row के एक column से राम वाली row के 2 columns cover किये है। इस script के द्वारा निचे दिया गया web page generate होगा।

HTML-colspan-attribute-example-in-Hindi


ROWSPAN Attribute 

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

 <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>

</html>

ऊपर दी गयी script निचे दिया गया web page generate करेगी।

HTML-rowspan-attribute-example-in-Hindi


Naming The Table 

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

<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> 
ऊपर दी गयी script निचे दिया गया web page generate करेगी। 

HTML-table-naming-example-output

©         DMCA.com Protection Status
Labels:

8  Replies so far - Add your comment

  1. सर जी
    table border="1" क्या है
    table border="2" क्या है
    आपने बताया
    टेबल तो सिर्फ ब्रेकेट में टेबल लिखने से से बनती है

    उत्तर देंहटाएं
    उत्तर

    1. Hi,
      border ek attribute h table tag ka
      table----- tag
      border="1" ------attribute

      jab tak aap border attribute define karke koi value
      set nahi karte hie aapki table ki border show nahi hoti hie

      yedi aap chahte hie ki aapke table ki border show ho to aapko
      border attribute jarur define karna hoga

      Jyada jankari ke liye me aapko suggest karunga ki aap
      HTML tags & attributes wali tutorial pade

      हटाएं

  2. y table ka border agarm hm border "1" dengai to jyada accha nhi ayega km bold lgega agar "2" dengai to y or b accha lgega or dark b ho jyega

    उत्तर देंहटाएं

सदस्यता लें टिप्पणियाँ भेजें (Atom)