HTML Tables
HTML Tables क्या हैं?
HTML Tables का उपयोग डेटा को Row और Column में व्यवस्थित तरीके से प्रदर्शित करने के लिए किया जाता है। ये उन स्थितियों में बहुत उपयोगी होते हैं, जब आपको डेटा को तालिका (Table) के रूप में व्यवस्थित करना होता है, जैसे कि प्रोडक्ट लिस्ट, शेड्यूल्स, या किसी रिपोर्ट का प्रदर्शन।
HTML में Tables को <table> टैग का उपयोग करके बनाया जाता है। इसके साथ अन्य टैग जैसे <tr>, <td>, और <th> का उपयोग डेटा को व्यवस्थित करने के लिए किया जाता है।
HTML Table के मुख्य टैग
<table>:
यह Table को परिभाषित करता है।<tr>(Table Row):
यह Table की एक Row को परिभाषित करता है।<th>(Table Header):
यह Table के हेडर सेल को परिभाषित करता है। यह टेक्स्ट को Bold और Centered बनाता है।<td>(Table Data):
यह Table के डेटा सेल को परिभाषित करता है।
HTML Table का Basic Syntax
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<h1>HTML Table Example</h1>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Rahul</td>
<td>25</td>
<td>Mumbai</td>
</tr>
<tr>
<td>Anjali</td>
<td>22</td>
<td>Delhi</td>
</tr>
<tr>
<td>Ramesh</td>
<td>28</td>
<td>Bangalore</td>
</tr>
</table>
</body>
</html>
आउटपुट:
| Name | Age | City |
|---|---|---|
| Rahul | 25 | Mumbai |
| Anjali | 22 | Delhi |
| Ramesh | 28 | Bangalore |
Table Attributes
HTML Tables में अतिरिक्त Attributes का उपयोग करके इन्हें और अधिक स्टाइलिश और उपयोगी बनाया जा सकता है।
1. border
Table की बॉर्डर को प्रदर्शित करता है।
<table border="1">
2. cellpadding
सेल के अंदर कंटेंट और बॉर्डर के बीच के स्पेस को सेट करता है।
<table border="1" cellpadding="10">
3. cellspacing
सेल्स के बीच के स्पेस को सेट करता है।
<table border="1" cellspacing="5">
4. width और height
Table की चौड़ाई और ऊंचाई को सेट करता है।
<table border="1" width="100%" height="200">
Table में Row और Column को Merge करना
1. colspan (Column Merge):
दो या अधिक कॉलम्स को मर्ज करने के लिए उपयोग किया जाता है।
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Details</th>
</tr>
<tr>
<td>Rahul</td>
<td>25</td>
<td>Mumbai</td>
</tr>
</table>
आउटपुट:
| Name | Details |
|---|---|
| Rahul | 25 |
2. rowspan (Row Merge):
दो या अधिक Rows को मर्ज करने के लिए उपयोग किया जाता है।
<table border="1">
<tr>
<th rowspan="2">Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>25</td>
<td>Mumbai</td>
</tr>
</table>
आउटपुट:
| Name | Age | City |
|---|---|---|
| Rahul | 25 | Mumbai |
Table को Style देना (CSS के साथ)
Table को आकर्षक बनाने के लिए CSS का उपयोग किया जा सकता है।
<!DOCTYPE html>
<html>
<head>
<title>Styled Table</title>
<style>
table {
width: 80%;
border-collapse: collapse;
margin: 20px 0;
font-size: 18px;
text-align: left;
}
th, td {
border: 1px solid #dddddd;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
</style>
</head>
<body>
<h1>Styled HTML Table</h1>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Rahul</td>
<td>25</td>
<td>Mumbai</td>
</tr>
<tr>
<td>Anjali</td>
<td>22</td>
<td>Delhi</td>
</tr>
<tr>
<td>Ramesh</td>
<td>28</td>
<td>Bangalore</td>
</tr>
</table>
</body>
</html>
आउटपुट:
इस Table में Alternate Rows को अलग-अलग रंगों से स्टाइल किया गया है।
Table में Caption जोड़ना
Table का एक शीर्षक (Caption) जोड़ने के लिए <caption> टैग का उपयोग किया जाता है।
<table border="1">
<caption>Student Details</caption>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Rahul</td>
<td>25</td>
<td>Mumbai</td>
</tr>
</table>
आउटपुट:
Caption “Student Details” Table के शीर्ष पर दिखाई देगा।
निष्कर्ष
HTML Tables डेटा को व्यवस्थित और पढ़ने योग्य तरीके से प्रस्तुत करने का एक शक्तिशाली तरीका है। हमने सीखा कि Basic Tables कैसे बनाएं, उन्हें Style दें, और उनके अंदर Row और Column Merge करें। Tables का उपयोग रिपोर्ट्स, शेड्यूल, और किसी भी संरचित डेटा को प्रदर्शित करने के लिए किया जा सकता है।
अगले अध्याय में, हम HTML Lists के बारे में सीखेंगे, जिससे आप क्रमबद्ध और गैर-क्रमबद्ध लिस्ट बनाना सीखेंगे।