HTML तालिका
आप एचटीएमएल का इस्तेमाल तालिका कर सकते हैं。
उदाहरण
- तालिका
- यह उदाहरण एचटीएमएल दस्तावेज़ में तालिका कृत करने के लिए कैसे काम करता है का प्रदर्शन करता है。
- तालिका किनारा
- इस उदाहरण में विभिन्न प्रकार के तालिका किनारे दिखाया गया है。
तालिका
तालिका <table> टैग के द्वारा परिभाषित की जाती है। प्रत्येक तालिका की कई पंक्तियाँ होती हैं (जो <tr> टैग द्वारा परिभाषित होती है), और प्रत्येक पंक्ति कई युक्तियों (जो <td> टैग द्वारा परिभाषित होती है) में विभाजित होती है। अकार टीडी तालिका डेटा का अर्थ है (table data), यानी डेटा कक्ष की सामग्री। डेटा कक्ष टेक्स्ट, चित्र, सूची, पैराग्राफ, फॉर्म, हैरिजन, तालिका आदि को शामिल कर सकती है।
<table border="1"> <tr> <td>रोड 1, सेल 1</td> <td>रोड 1, सेल 2</td> </tr> <tr> <td>रोड 2, सेल 1</td> <td>रोड 2, सेल 2</td> </tr> </table>
ब्राउज़र में इस तरह से प्रदर्शित होती है:
| रोड 1, सेल 1 | रोड 1, सेल 2 |
| रोड 2, सेल 1 | रोड 2, सेल 2 |
तालिका और किनारा अधिकार
यदि किनारा अधिकार नहीं निर्धारित किया जाता है, तो तालिका किनारा दिखाया नहीं जाएगा। कभी-कभी यह बहुत उपयोगी होता है, लेकिन अधिकतर समय में हम खाली किनारा दिखाना चाहते हैं。
किनारा अधिकार लगाकर एक किनारा वाली तालिका दिखाने के लिए इस्तेमाल करें:
<table border="1"> <tr> <td>रोड 1, सेल 1</td> <td>रोड 1, सेल 2</td> </tr> </table>
तालिका के शीर्षक
तालिका के शीर्षक को <th> टैग के द्वारा परिभाषित किया जाता है。
अधिकांश ब्राउज़र तालिका शीर्षक को बोल्ड केंद्रीय टेक्स्ट के रूप में दिखाते हैं:
<table border="1"> <tr> <th>शीर्षक</th> <th>एनादर शीर्षक</th> </tr> <tr> <td>रोड 1, सेल 1</td> <td>रोड 1, सेल 2</td> </tr> <tr> <td>रोड 2, सेल 1</td> <td>रोड 2, सेल 2</td> </tr> </table>
ब्राउज़र में इस तरह से प्रदर्शित होती है:
| शीर्षक | एनादर शीर्षक |
|---|---|
| रोड 1, सेल 1 | रोड 1, सेल 2 |
| रोड 2, सेल 1 | रोड 2, सेल 2 |
तालिका में खाली कक्ष
कुछ ब्राउज़रों में, बिना सामग्री के तालिका इकाई बहुत अच्छा दिखाया नहीं जाता। यदि कोई इकाई खाली है (कोई सामग्री नहीं है), तो ब्राउज़र इस इकाई का किनारा दिखाने में असमर्थ हो सकता है。
<table border="1"> <tr> <td>रोड 1, सेल 1</td> <td>रोड 1, सेल 2</td> </tr> <tr> <td></td> <td>रोड 2, सेल 2</td> </tr> </table>
ब्राउज़र ऐसा हो सकता है कि दिखाया जाए:
ध्यान:यह खाली कक्ष का किनारा दिखाया नहीं गया है। इस स्थिति को बचाने के लिए, खाली कक्ष में एक खाली जगह धारक जोड़ें, ताकि किनारा दिखाया जा सके。
<table border="1"> <tr> <td>रोड 1, सेल 1</td> <td>रोड 1, सेल 2</td> </tr> <tr> <td> </td> <td>रोड 2, सेल 2</td> </tr> </table>
ब्राउज़र में इस तरह से प्रदर्शित होती है:
| रोड 1, सेल 1 | रोड 1, सेल 2 |
| रोड 2, सेल 2 |
अधिक उदाहरण
- बिना किसी किनारे के तालिका
- बिना किनारे वाली तालिका का उदाहरण दिखाया गया है
- तालिका में शीर्षक (Heading)
- तालिका शीर्षक को दिखाना
- खाली सेल
- इस उदाहरण में " " का उपयोग करके खाली सेल को कैसे संभाला जाता है, दिखाया गया है。
- शीर्षक वाली तालिका
- शीर्षक (caption) वाली तालिका का उदाहरण दिखाया गया है
- अक्ष या स्तम्भ के सेल
- अक्ष या स्तम्भ के अक्षांश या स्तम्भ के सेल को परिभाषित करने के लिए कैसे करना है, दिखाया गया है。
- तालिका में टैग
- विभिन्न एलिमेंटों में एलिमेंट को दिखाना
- सेल पैडिंग (Cell padding)
- सेल पैडिंग का उपयोग करके सेल की सामग्री और किनारे के बीच खाली स्थान बनाना
- सेल स्पेसिंग (Cell spacing)
- सेल स्पेसिंग का उपयोग करके सेल के बीच की दूरी बढ़ाना
- तालिका में पृष्ठभूमि रंग या पृष्ठभूमि इमेज जोड़ना
- तालिका में पृष्ठभूमि जोड़ना
- तालिका एलिमेंट में पृष्ठभूमि रंग या पृष्ठभूमि इमेज जोड़ना
- एक या अधिक तालिका एलिमेंट में पृष्ठभूमि को जोड़ना
- तालिका एलिमेंट में सामग्री को जगह देना
- इस उदाहरण में "align" गुण का उपयोग करके तालिका को अलग-अलग तरीके से बनाने के लिए कैसे करना है, दिखाया गया है。
- फ्रेम (frame) गुण
- इस उदाहरण में "frame" गुण का उपयोग करके तालिका के चारों ओर किनारा नियंत्रित करने के लिए कैसे करना है, दिखाया गया है。
तालिका टैग
| तालिका | वर्णन |
|---|---|
| <table> | तालिका को परिभाषित करता है。 |
| <caption> | तालिका शीर्षक को परिभाषित करता है。 |
| <th> | तालिका के शीर्ष को परिभाषित करता है。 |
| <tr> | तालिका की पंक्ति को परिभाषित करता है。 |
| <td> | तालिका एलिमेंट को परिभाषित करता है。 |
| <thead> | तालिका के शीर्ष को परिभाषित करता है。 |
| <tbody> | तालिका के मुख्य भाग को परिभाषित करता है。 |
| <tfoot> | तालिका के पाद को परिभाषित करता है。 |
| <col> | तालिका स्तम्भ के लिए प्रयोग होने वाले गुणों को परिभाषित करता है。 |
| <colgroup> | तालिका की स्तम्भों के समूह को परिभाषित करता है。 |
