एच टी एम एल मे टेबल्‍स का परिचय

                                                       HTML Tables

HTML में प्रोग्रामिंग करने के लिए टेबल्स बहुत उपयोगी हैं और लगभग सभी वेब डेवलपर्स द्वारा इनका बहुत बार उपयोग किया जाता है। टेबल स्प्रेडशीट की तरह हैं और वे पंक्तियों और स्तंभों से बने होते हैं। आप <table> टैग का उपयोग करके HTML / XHTML में एक तालिका बनाएंगे। अंदर <table> तत्व तालिका को पंक्ति से पंक्ति के बाहर लिखा गया है। एक पंक्ति(रो) <tr> टैग के अंदर समाहित है। जो तालिका पंक्ति के लिए खड़ा है। और फिर प्रत्येक सेल को पंक्ति तत्व के अंदर(कालम ) <td> टैग का उपयोग करके लिखा जाता है। जो तालिका डेटा के लिए खड़ा है।

उदाहरण:

<table border="1"> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table>

आउटपुट

Row 1, Column 1	Row 1, Column 2
Row 2, Column 1	Row 2, Column 2

नोट: ऊपर दिए गए उदाहरण में बॉर्डर < table > का एक गुण है और यह सभी सेल में बॉर्डर डाल देगा। यदि आपको बॉर्डर की आवश्यकता नहीं है, तो आप बॉर्डर = "0" का उपयोग कर सकते हैं।

Table Heading - The <th> Element:

Table Heading  को <th> तत्व का उपयोग करके परिभाषित किया जा सकता है। यह टैग <td> टैग को बदलने के लिए रखा जाएगा जिसका उपयोग वास्तविक डेटा का प्रतिनिधित्व करने के लिए किया जाता है। आम तौर पर आप अपनी शीर्ष पंक्ति को Table Heading के रूप में नीचे दिखाए अनुसार डाल सकते हैं, अन्यथा आप किसी भी स्थान पर <th> तत्व का उपयोग कर सकते हैं:

<table border="1">

<tr>

<th>Name</th>

<th>Salary</th>

</tr>

<tr>

<td>Ramesh Raman</td>

<td>5000</td>

</tr>

<tr>

<td>Shabbir Hussein</td>

<td>7000</td>

</tr>

</table>

आउटपुट

Name	Salary
Ramesh Raman	5000
Shabbir Hussein	7000

                                             Table Cellpadding and Cellspacing:

सेलपैडिंग और सेलस्पेसिंग नामक दो अट्रिब्यूट्स हैं जिनका उपयोग आप अपने टेबल सेल में सफेद स्थान को समायोजित करने के लिए करेंगे। सेलस्पेसिंग सीमा की चौड़ाई को परिभाषित करता है, जबकि सेलपैडिंग सेल बॉर्डर और सामग्री के बीच की दूरी का प्रतिनिधित्व करता है। निम्नलिखित उदाहरण 

<table border="1" cellpadding="5" cellspacing="5"> <tr> <th>Name</th> <th>Salary</th> </tr> <tr> <td>Ramesh Raman</td> <td>5000</td> </tr> <tr> <td>Shabbir Hussein</td> <td>7000</td> </tr> </table>

आउटपुट

Name	Salary
Ramesh Raman	5000
Shabbir Hussein	7000

Colspan and Rowspan Attributes:

यदि आप दो या दो से अधिक स्तंभों को एक एकल स्तंभ में मर्ज करना चाहते हैं, तो आप colspan विशेषता का उपयोग करेंगे। यदि आप दो या दो से अधिक पंक्तियों को मर्ज करना चाहते हैं तो इसी तरह आप Rowspan का उपयोग करेंगे। निम्नलिखित उदाहरण है:

<table border="1"> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr><td rowspan="2">Row 1 Cell 1</td> <td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr> <tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr> <tr><td colspan="3">Row 3 Cell 1</td></tr> </table>

आउटपुट

Column 1	Column 2	Column 3
Row 1 Cell 1	Row 1 Cell 2	Row 1 Cell 3
	Row 2 Cell 2	Row 2 Cell 3
Row 3 Cell 1

Tables Backgrounds

आप निम्न दो तरीकों का उपयोग करके टेबल बैकग्राउंड सेट कर सकते हैं:

1 Bgcolor विशेषता का उपयोग करना - आप पूरे टेबल के लिए या सिर्फ एक सेल के लिए                                         पृष्ठभूमि का रंग सेट कर सकते हैं।

2 बैकग्राउंड attribute  का उपयोग करना - आप पूरे टेबल के लिए या सिर्फ एक सेल के लिए                                          बैकग्राउंड इमेज सेट कर सकते हैं।

नोट: आप बॉर्डर कलर भी bordercolor attribute का उपयोग कर सेट कर सकते हैं।

यहाँ bgcolor विशेषता का उपयोग करने का एक उदाहरण दिया गया है:

<table border="5" bordercolor="green" bgcolor="gray"> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr><td rowspan="2">Row 1 Cell 1</td> <td bgcolor="red">Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr> <tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr> <tr><td colspan="3">Row 3 Cell 1</td></tr> </table>

आउटपुट

Column 1	Column 2	Column 3
Row 1 Cell 1	Row 1 Cell 2	Row 1 Cell 3
	Row 2 Cell 2	Row 2 Cell 3
Row 3 Cell 1

Using a Header, Body, and Footer:

टेबल्स को तीन भागों में विभाजित किया जा सकता है: एक हेडर, एक बॉडी और Footer । 

Header और Footer एक शब्द-संसाधित दस्तावेज़ में हेडर और फ़ुटर के समान हैं जो हर पृष्ठ के लिए समान रहते हैं, जबकि Body तालिका की मुख्य सामग्री है।

एक मेज के Header, Body और Footer को अलग करने के तीन तत्व हैं:

1 <thead> - एक अलग तालिका शीर्ष लेख बनाने के लिए।

2 <tbody> - तालिका के मुख्य शरीर को इंगित करने के लिए।

3 <tfoot> - एक अलग तालिका पाद बनाने के लिए।

एक तालिका में कई पेज या डेटा के समूह को इंगित करने के लिए कई <tbody> तत्व हो सकते हैं। लेकिन यह उल्लेखनीय है कि <thead> और <tfoot> टैग <tbody> से पहले प्रदर्शित होने चाहिए

<table border="1" width="100%"> <thead> <tr> <td colspan="4">This is the head of the table</td> </tr> </thead> <tfoot> <tr> <td colspan="4">This is the foot of the table</td> </tr> </tfoot> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> ...more rows here containing four cells... </tr> </tbody> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> ...more rows here containing four cells... </tr> </tbody> </table>

Nested Tables:

आप एक Tables का उपयोग दूसरी Tables के अंदर कर सकते हैं। केवल टेबल ही नहीं आप टेबल डेटा टैग <td> के अंदर लगभग सभी टैग का उपयोग कर सकते हैं।

निम्न Tables Tables के अंदर किसी अन्य Tables और अन्य टैग का उपयोग करने का उदाहरण है।

table border="1"> <tr> <td>       <table border="1">       <tr>       <th>Name</th>       <th>Salary</th>       </tr>       <tr>       <td>Ramesh Raman</td>       <td>5000</td>       </tr>       <tr>       <td>Shabbir Hussein</td>       <td>7000</td>       </tr>       </table> </td> <td>       <ul>       <li>This is another cell</li>       <li>Using list inside this cell</li>       </ul> </td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table>

आउटपुट