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 कहते है।
Rows create करने के बाद आप rows मे columns create करते है। Columns create करने के लिये <td> tag का इस्तेमाल किया जाता है। आप जितने columns create करना चाहते है उतने ही <td> tags define करते है।
इसका उदाहरण नीचे दिया जा रहा है।
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 करते है।
इसका उदाहरण नीचे दिया जा रहा है।
<!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>
|
ऊपर दी गयी script निचे दिया गया web page generate करती है।
Table create करने के लिए आपको tags का order हमेशा ध्यान रखना चाहिए। सबसे पहले <table> tag आता है। इसके बाद <tr> tag आता है। फिर उसके बाद <th> और <td> tags आते है। <th> और <td> tags हमेशा <tr> tags के अंदर ही आएंगे।
एक बात आपको और ध्यान रखनी चाहिए की जब तक आप border attribute के द्वारा table की border define नहीं करते है तब तक table की border show नहीं होती है।
एक बात आपको और ध्यान रखनी चाहिए की जब तक आप 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 युज करते है वह web page मे heading कि तरह show होती है। इस tag को <tr> tag के अंदर युज किया जाता है। इसका उदाहरण नीचे दिया जा रहा है।
Heading create करने के लिये <th> tag युज किया जाता है। इसे table heading tag कहते है। इस tag मे आप जो text युज करते है वह web page मे heading कि तरह show होती है। इस tag को <tr> tag के अंदर युज किया जाता है। इसका उदाहरण नीचे दिया जा रहा है।
<!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>
|
COLSPAN Attribute
आप चाहे तो किसी एक row के column को एक से ज्यादा columns मे भी divide कर सकते है। इसके लिये आप उससे पहले वाले column मे colspan attribute define करते है। जिस column मे आप colspan define करते है वो एक column उतने ही columns की जगह घेरता है।
इसका उदाहरण नीचे दिया जा रहा है।
इसका उदाहरण नीचे दिया जा रहा है।
<!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>
|
उपर दिए गए उदाहरण को देखिये राम के 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 होगा।
यदि आप चाहते है की श्याम वाली row का एक column ऊपर वाली row के दो columns को cover करे तो आप उस column में colspan attribute यूज़ करते है और जितने columns आप इस एक column से cover करना चाहते है उतनी ही integer values देते है।
जैसे की मैने उपर दिए हुए example श्याम वाली row के एक column से राम वाली row के 2 columns cover किये है। इस script के द्वारा निचे दिया गया web page generate होगा।
ROWSPAN Attribute
ROWSPAN attribute भी colspan की तरह ही होता है। इसे आप <tr> tag में define करते है। इस attribute की आप जितनी values देते है वह एक row उतने ही columns की जगह घेरती है। इसका उदाहरण नीचे दिया जा रहा है।
<!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>
|
ऊपर दी गयी script निचे दिया गया web page generate करेगी।
Naming The Table
आप चाहे तो table का कोई नाम दे सकते है जिसे caption भी बोलते है। इसके लिए आप <caption> tag यूज़ करते है। इसे <table> tag के बाद define किया जाता है। इसका उदाहरण नीचे दिया गया है।
<!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>
|
ऊपर दी गयी script निचे दिया गया web page generate करेगी।
Previous: HTML Links
Next: HTML Images
सर जी
उत्तर देंहटाएंtable border="1" क्या है
table border="2" क्या है
आपने बताया
टेबल तो सिर्फ ब्रेकेट में टेबल लिखने से से बनती है
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
THANX A LOT SIR JI
हटाएं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
उत्तर देंहटाएंthanks sir
उत्तर देंहटाएंYou are welcome!
हटाएंtable border color and border style ko kaise change karte hai
उत्तर देंहटाएंesa aap css ke maadhyam se kar sakte h. iske liye css ki tutorial dekhiye.
हटाएं