HTML Tables: टेबल बनाना — table, tr, th, td
3 मिनट पढ़ें · मुफ़्त · बिना लॉगिन
टेबल data को rows और columns में दिखाती हैं — timetable, price list, exam scheme, comparison chart। टेबल चार tags से बनती है: <table> पूरी टेबल के लिए, <tr> हर row के लिए, <th> header cell के लिए, और <td> सामान्य data cell के लिए।
टेबल की बनावट
हर row एक <tr> होती है। Row के अंदर cells रखते हैं। पहली row में आमतौर पर <th> (header) cells होती हैं, जिन्हें browser bold और बीच में दिखाता है। बाकी सभी rows में <td> cells होती हैं। 3 rows और 3 columns वाली टेबल में 3 <tr> elements होते हैं, जिनमें से हर एक में 3 cells होती हैं।
Caption, colspan और rowspan
<caption>— टेबल का title,<table>के ठीक बाद रखा जाता है।colspan="2"— एक cell जो 2 columns तक फैलती है।rowspan="2"— एक cell जो 2 rows तक फैलती है।
टेबल data के लिए हैं, layout के लिए नहीं
पुराने दिनों में वेबसाइटें टेबल से बनाई जाती थीं। आज ऐसा कभी न करें — layout के लिए CSS इस्तेमाल करें। टेबल सिर्फ असली tabular data के लिए हैं। Layout के लिए इस्तेमाल की गई टेबल को responsive बनाना मुश्किल होता है, और screen readers उसे अजीब क्रम में पढ़ते हैं।
हर table tag किस काम का है
टेबल एक grid है। <table> पूरी grid है। <tr> grid की एक row है। <th> header cell है — column के ऊपर लगा label। <td> सामान्य data cell है। लंबी टेबल के लिए आप rows को <thead> (header rows), <tbody> (data rows) और <tfoot> (footer rows) से group भी कर सकते हैं।
याद रखने की तरकीब: table = जाल, tr = पंक्ति, th = शीर्षक, td = जानकारी।
Table tags और attributes
| Tag / Attribute | Value | विवरण |
|---|---|---|
<caption> | text | टेबल का title, <table> के ठीक बाद रखा जाता है। |
<thead> | — | टेबल की header rows को group करता है। |
<tbody> | — | मुख्य data rows को group करता है। |
colspan | a number | Cell को उतने columns तक फैलाता है। |
rowspan | a number | Cell को उतने rows तक फैलाता है। |
scope | col or row | Screen readers को बताता है कि <th> column का label है या row का। |
यहाँ एक header cell है जो screen reader को बताती है कि वह पूरे column का label है:
<tr><th scope="col">Subject</th><th scope="col">Marks</th></tr>
colspan="2" वाली cell 2 गिनी जाती है। अगर संख्याएँ मेल नहीं खातीं, तो browser टेबल को टेढ़ा बना देता है और समझना मुश्किल हो जाता है कि क्यों।scope="col" दें। इसमें कुछ नहीं लगता, और इससे अंधा उपयोगकर्ता उस column की हर value से पहले "Subject" सुन सकता है — टेबल अचानक उसके लिए समझ में आने लगती है।आम गलतियाँ
- पेज को सजाने के लिए टेबल इस्तेमाल करना — वह CSS का काम है, टेबल का नहीं।
- header cells के लिए
<td>इस्तेमाल करना — headers<th>होने चाहिए, ताकि वे bold दिखें और सही पढ़े जाएँ। <tr>भूल जाना — cells हमेशा row के अंदर होनी चाहिए, सीधे<table>के अंदर कभी नहीं।- colspan और rowspan की संख्याएँ न जोड़ना — हर row में columns गिनें।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>Tables</title>
<style>
table, th, td { border: 1px solid #999; border-collapse: collapse; }
th, td { padding: 8px 12px; }
</style>
</head>
<body>
<table>
<caption>Weekly Class Schedule</caption>
<tr><th>Day</th><th>Subject</th><th>Time</th></tr>
<tr><td>Monday</td><td>HTML Basics</td><td>10:00 AM</td></tr>
<tr><td>Tuesday</td><td>CSS Styling</td><td>10:00 AM</td></tr>
</table>
</body>
</html>परिणाम
खुद करके देखें — लाइव एडिटर
नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।
संबंधित पाठ
अक्सर पूछे जाने वाले सवाल
इस पाठ के बारे में सबसे ज़्यादा पूछे जाने वाले सवाल — सवाल पढ़ें, फिर खोलकर जवाब देखें।
1. HTML टेबल किन टैग से बनती है?
पूरी टेबल के लिए table, हर पंक्ति के लिए tr, हेडर सेल के लिए th और सामान्य सेल के लिए td इस्तेमाल होता है।
2. colspan और rowspan क्या करते हैं?
colspan सेल को कई कॉलम में फैलाता है और rowspan उसे कई पंक्तियों में फैलाता है।
3. क्या टेबल से पेज का लेआउट बनाना चाहिए?
नहीं, टेबल सिर्फ़ असली टेबुलर डेटा के लिए है; लेआउट के लिए CSS इस्तेमाल करें।
खुद क्यों सीखें — AI से पूछने के बजाय?
AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।
सर्टिफिकेट पाएँ — सिर्फ ₹10
सभी 35 पाठ पूरे करें, टेस्ट पास करें (80%), ₹10 दें और अपना सर्टिफिकेट पाएँ।
टेस्ट देंदेखकर सीखना पसंद है? वीडियो कोर्स में वही विषय एक-एक करके सिखाए जाते हैं।
Go further with a full course
Free tutorials teach you the basics. Our paid courses add live projects, mentorship and a certificate.
Browse all courses
