HTML में टेबल बहुत महत्वपूर्ण है, इस ट्यूटोरियल में, आप सीखेंगे की HTML में टेबल क्या है (What is HTML Table in Hindi) और HTML में टेबल कैसे बनाये (How to create HTML table in Hindi)?
एचटीएमएल में टेबल का उपयोग पंक्तियों (rows) और स्तंभों (columns) में डेटा की प्रबन्ध (arrangement) के लिए किया जाता है।
इस लेख में, एचटीएमएल में टेबल क्या है टेबल का सिंटेक्स और उदाहरण दिखाइए गए है।
आपको पता ही होगा एचटीएमएल एक “Hypertext markup language” है। जो केबल वेब पेज का Structure बनाते है। यदि आप HTML के बारे में ज्यादा नहीं जानते हैं तो “HTML क्या है” को पढ़े और इस विडीओ को देखें:
Table of Contents
HTML में टेबल क्या है (What is HTML Table in Hindi)?
HTML टेबल वेब डेवलपर को डेटा जैसे की टेक्स्ट, लिंक, इमेज, आदि को सेल की rows और columns में arrange करने की अनुमति देती है।
यानी की आप HTML document में डेटा को अपने हिसाब से एक टेबल बनाके rows और columns में डेटा को arrange कर सकते है।
HTML tables बनाने के लिए <table> टैग का उपयोग करके बनाई जाती हैं जिसमें <tr> टैग का उपयोग table rows को बनाने के लिए किया जाता है और <td> टैग का उपयोग डेटा सेल बनाने के लिए किया जाता है।
Get Complete HTML5 with 7 Projects in Hindi PDF Notes
यदि आप HTML5 Basic to Advanced साथ में 7 Projects चाहते हैं तो आप केबल ₹59 रुपये में हमारे संपूर्ण HTML5 नोट्स अभी इस नम्बर “8178180070” पे WP करके खरीद सकते हैं। पहले 50 उपयोगकर्ताओं के लिए केवल ₹59 रुपये है बाद में इसका price ₹149 रुपये हो जाएगा।
- पहले ये पढ़े: HTML Tag क्या है? और Meta Tag क्या होता है?
Basic HTML Table Tags in Hindi
एक बेसिक HTML टेबल बनाने के लिए इन tags का उपयोग किया जाता है:
| Table टैग | अर्थ | विवरण |
| <table>…</table> | यह HTML Table tag है। | यह टेबल की शुरुआत और समाप्ति को परिभाषित करता है |
| <tr>…</tr> | यह एक Row tag है। | HTML table में Row बनाने के लिए <tr> tag का उपयोग होता है। |
| <td>…</td> | Column tag है। | यह row के अंडर columns add करता है। |
| <th>…</th> | Header tag | इस टैग का उपयोग row के भीतर headers देने के लिए किया जाता है। |
- यह भी पढ़ें: Div tag क्या है पूरी जानकारी.
HTML tables Syntax:
<table> //Table Tag <tr> //Row 1 <th></th> //Header 1 <th></th> //Header 2 </tr> <tr> //Row 2 <td></td> //Header 1 <td></td> //Header 2 </tr> </table>
चलिए अब HTML टेबल को उदहारण से समझते हैं;
Example: HTML टेबल टैग का उदाहरण
उदाहरण के साथ HTML में टेबल बनाना सीखें:
<!DOCTYPE html>
<html lang="en">
<head>
<title> Example of HTML Table </title>
</head>
<body>
<h2>Example of HTML Table</h2>
<table>
<tr>
<th>Employee First Name</th>
<th>Employee Last Name</th>
</tr>
<tr>
<td>Md</td>
<td>Badiruddin</td>
</tr>
<tr>
<td>Sujit</td>
<td>Kumar</td>
</tr>
</table>
</body>
</html>
इसका output किस इस्स तरह आएगा:
आपको यहाँ एचटीएमएल में टेबल क्या है टेबल का सिंटेक्स और उदाहरण दिखाइए गए है।
उम्मीद है कि आपको HTML में table tag उदाहरण सहित समझ आगया होगा।
नोट: एक HTML तालिका में <caption>, <tbody>, <thead>, <colgroup>, और <tfoot> element तत्व भी शामिल हो सकते हैं। और हाँ HTML में आप border नहीं दे सकते है। टेबल बॉर्डर CSS सेक्शन के अंतर्गत आता है।
सभी HTML टैग की जानकारी के लिए All Tags list पर जाए। और CSS सीखने के लिए “CSS Tutorial in Hindi” सेक्शन में जा सकते है।
HTML में टेबल कैसे बनाएं (Create Tables in HTML)
HTML में टेबल बनाने के लिए आपको <table> टैग के साथ टेबल को परिभाषित करना होगा।
<table> टैग तालिका का कंटेनर है जो निर्दिष्ट करता है कि तालिका कहां से शुरू होगी और कहां समाप्त होगी।
आप <tr> टैग के साथ एक तालिका पंक्ति (row) जोड़ सकते हैं। टेबल हेडर जोड़ने के लिए <th> टैग का उपयोग करना होगा।
HTML कोड का पालन करके टेबल बनाएं:
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<h2>Tables in HTML</h2>
<table>
<tr>
<th>Name</th>
<th>RollNo</th>
</tr>
<tr>
<td>Badal</td>
<td>001</td>
</tr>
<tr>
<td>Kanchan</td>
<td>002</td>
</tr>
<tr>
<td>Priya</td>
<td>003</td></tr>
</tr>
<tr>
<td>Jeet</td>
<td>004</td></tr>
</tr>
</table>
</body>
</html>
वेब ब्राउज़र में Output कुछ इस तरह दिखेगा:
HTML Table में collapsed borders कैसे add करें:
Table में collapsed borders जोड़ने के लिए आपको केबल <style> टैग में border सेट करना होगा कुछ इस तरह:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Table with Borders</h2>
<table>
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Badiruddin</td>
<td>$1000</td>
</tr>
<tr>
<td>Deep</td>
<td>$800</td>
</tr>
</table>
</body>
</html>
आब HTML table कुछ इस्स तरह दिखेगा border के साथ:
Align HTML Table in Hindi
डिफ़ॉल्ट रूप से HTML table left-align होता है पर अगर आपको right या center में करना हो तो इसके लिए आपको CSS का उपयोग करना होगा कुछ इस तरह:
HTML Table को center-align कैसे करें (With CSS):
table को center करने के लिए आपको केबल left ओर right का margin auto करना होगा कुछ इस्स तरह:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
table.center {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h1>Center a Table</h1>
<p>To center a table, set left and right margin to auto:</p>
<table class="center">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Badal</td>
<td>$900</td>
</tr>
<tr>
<td>Deep</td>
<td>$500</td>
</tr>
</table>
</body>
</html>
Output:
HTML Table को right-align कैसे करें?
Table को right-align करना बहुत ही आसान है <style> टैग में border को 1px रखें और float:right सेट करें कुछ इस्स तरह:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Right-align a Table</h2>
<table style="float:right">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
Output:
इस तरह आप HTML table को align कर सकते है।
निष्कर्ष
इस “HTML Table in Hindi Tutorial” में अपने सिखा की HTML टेबल क्या है?
टेबल का सिंटेक्स और उदाहरण समझ में आगाए होंगे और CSS का उपयोग करके border और टेबल को align कैसे करे सिख गए होंगे।
FREE HTML Coure in Hindi
यदि आप HTML के बारे में सब कुछ सीखना चाहते हैं तो हमारा “HTML ट्यूटोरियल कोर्स” पढ़ें।
अगर आपके HTML में टेबल बनाने में कोई प्रोग्राम हो रही है, तो बेझिझक नीचे कमेंट करके पूछ सकते है।
HTML IS MY FEVOURITE