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

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

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

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>

SHARMA COMPUTE GYAN

Search This Blog