परिचय
HTML rowspan एट्रिब्यूट HTML दस्तावेज़ में एक टेबल सेल के कितनी पंक्तियों (rows) तक फैलना चाहिए, यह परिभाषित करता है। यह केवल <td> या <th> HTML एलिमेंट पर लागू होता है।
सिंटैक्स
<tagname rowspan="number"></tagname>
उदाहरण
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
text-align: center;
font-family: Arial, sans-serif;
padding: 20px;
}
table {
margin: 2rem auto;
width: 400px;
border-collapse: collapse;
}
th, td {
border: 2px solid #333;
padding: 12px;
}
th {
background: #333;
color: white;
}
</style>
<body>
<h1>HTML rowspan एट्रिब्यूट डेमो</h1>
<table>
<thead>
<tr>
<th>नाम</th>
<th>भाषा</th>
</tr>
</thead>
<tbody>
<tr>
<td>जॉन</td>
<td>अंग्रेजी</td>
</tr>
<tr>
<td rowspan="2">एलन</td>
<td>जर्मन</td>
</tr>
<tr>
<td>फ्रेंच</td>
</tr>
</tbody>
</table>
</body>
</html>
आउटपुट
एक टेबल दिखाई देगी जहां "एलन" सेल दो पंक्तियों (जर्मन और फ्रेंच) तक फैला हुआ है। पहली पंक्ति: जॉन - अंग्रेजी। दूसरी पंक्ति: एलन (दो पंक्तियों तक फैला) - जर्मन। तीसरी पंक्ति: (केवल फ्रेंच, क्योंकि एलन का सेल ऊपर से फैला है)।
महत्वपूर्ण बिंदु
- मान एक धनात्मक पूर्णांक होना चाहिए (डिफ़ॉल्ट 1)
rowspan="0"का अर्थ है "सेक्शन के अंत तक सभी पंक्तियाँ" (HTML5 में, लेकिन ब्राउज़र समर्थन भिन्न)- जब एक सेल कई पंक्तियों तक फैलता है, तो बाद की पंक्तियों में उस कॉलम के लिए कम सेल होने चाहिए
colspanके साथ संयोजित किया जा सकता है
rowspan + colspan संयोजन
<table>
<tr>
<td rowspan="2" colspan="2">बड़ा सेल (2x2)</td>
<td>सेल 3</td>
</tr>
<tr>
<td>सेल 4</td>
</tr>
<tr>
<td>सेल 5</td>
<td>सेल 6</td>
<td>सेल 7</td>
</tr>
</table>
आम गलतियाँ
- बाद की पंक्तियों में सेल्स की गिनती न करना
rowspanको<tr>पर लगाना (केवल td/th पर लागू होता है)- बहुत बड़ा मान देना जिससे लेआउट टूट जाए
ब्राउज़र समर्थन
सभी ब्राउज़रों में पूर्ण समर्थन।