HTML <td> टैग

परिभाषा और उपयोग

<td> टैग एचटीएमएल टेबल में मानक डाटा कोष्ठ को परिभाषित करता है।

HTML टेबल में दो प्रकार के कोष्ठ हैं:

  • शीर्षक कोष्ठ - शीर्षक जानकारी (उपयोग करते हुए) <th> एलिमेंट बनाया जाता है)
  • डाटा कोष्ठ - डाटा (उपयोग करते हुए) <td> एलिमेंट बनाया जाता है)

डिफ़ॉल्ट में,<td> एलिमेंट में टेक्स्ट सामान्य है और बाएँ जस्ता है।

<th> एलिमेंट में टेक्स्ट डिफ़ॉल्ट में बोल्ड और मध्यस्थ है।

और देखें:

HTML शिक्षण:HTML तालिका

HTML DOM संदर्भ दस्तावेज़:TableData ऑब्जैक्ट

CSS शिक्षण:टेबल के शैली सेट करें

इस्तेमाल

उदाहरण 1

एक साधारण HTML टेबल, दो पंक्तियाँ और चार टेबल कोष्ठ है:

<table>
  <tr>
    <td>कोष्ठ A</td>
    <td>कोष्ठ B</td>
  </tr>
  <tr>
    <td>कोष्ठ C</td>
    <td>कोष्ठ D</td>
  </tr>
</table>

अपने आप साबित करें

उदाहरण 2

कैसे जस्ता करें <td> की सामग्री (CSS के उपयोग से):

<table style="width:100%">
  <tr>
    <th>महीना</th>
    <th>बचत</th>
  </tr>
  <tr>
    <td>जनवरी</td>
    <td style="text-align:right">￥3400</td>
  </tr>
  <tr>
    <td>फरवरी</td>
    <td style="text-align:right">￥4500</td>
  </tr>
</table>

अपने आप साबित करें

उदाहरण 3

कैसे टेबल कोष्ठ में पृष्ठभूमि रंग जोड़ें (CSS के उपयोग से):

<table>
  <tr>
    <th>महीना</th>
    <th>बचत</th>
  </tr>
  <tr>
    <td style="background-color:#FF0000">जनवरी</td>
    <td style="background-color:#00FF00">￥3400</td>
  </tr>
 </table>

अपने आप साबित करें

उदाहरण 4

तालिका कक्ष की ऊंचाई को कैसे सेट करें (CSS के उपयोग से):

<table>
  <tr>
    <th>महीना</th>
    <th>बचत</th>
  </tr>
  <tr>
    <td style="height:100px">जनवरी</td>
    <td style="height:100px">￥3400</td>
  </tr>
</table>

अपने आप साबित करें

उदाहरण 5

तालिका कक्ष में अभिनिर्माण (CSS के उपयोग से) कैसे निर्धारित करेंः

<table>
  <tr>
    <th>पद</th>
  </tr>
  <tr>
    <td style="white-space:nowrap">朝辞白帝彩云间，千里江陵一日还。两岸猿声啼不住，轻舟已过万重山。</td>
  </tr>
</table>

अपने आप साबित करें

उदाहरण 6

कैसे अड़ेसे अनुक्रमण (CSS के उपयोग से): <td> की सामग्री (CSS के उपयोग से):

<table style="width:50%;">
  <tr>
    <th>महीना</th>
    <th>बचत</th>
  </tr>
  <tr style="height:100px">
    <td style="vertical-align:bottom">जनवरी</td>
    <td style="vertical-align:bottom">￥3400</td>
  </tr>
</table>

अपने आप साबित करें

उदाहरण 7

तालिका कक्ष की चौड़ाई को कैसे सेट करें (CSS के उपयोग से):

<table style="width:100%">
  <tr>
    <th>महीना</th>
    <th>बचत</th>
  </tr>
  <tr>
    <td style="width:70%">जनवरी</td>
    <td style="width:30%">￥3400</td>
  </tr>
</table>

अपने आप साबित करें

उदाहरण 8

कैसे तालिका शीर्षक बनाएंः

<table>
  <tr>
    <th>नाम</th>
    <th>ई-मेल</th>
    <th>फोन</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

अपने आप साबित करें

उदाहरण 9

कैसे शीर्षक वाली तालिका बनाएंः

<table>
  <caption>महीना की बचत</caption>
  <tr>
    <th>महीना</th>
    <th>बचत</th>
  </tr>
  <tr>
    <td>जनवरी</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>फरवरी</td>
    <td>￥4500</td>
  </tr>
</table>

अपने आप साबित करें

उदाहरण 10

बहु-पंक्ति या बहु-स्तम्भ तालिका कक्ष को कैसे परिभाषित करेंः

<table>
  <tr>
    <th>नाम</th>
    <th>ई-मेल</th>
    <th colspan="2">फोन</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

अपने आप साबित करें

गुण

गुण मूल्य वर्णन
colspan संख्या सेल को आगे की स्तम्भों को चौड़ा करने के लिए निर्दिष्ट करता है
headers header_id एक या अधिक से एक सेल से संबंधित शीर्षक सेल निर्दिष्ट करता है
rowspan संख्या सेट को आगे की रेखाओं को चौड़ा करने के लिए

वैश्विक गुण

<td> टैग इवेंट गुण का समर्थन करता है HTML में वैश्विक गुण。

इवेंट गुण

<td> टैग इवेंट गुण का समर्थन करता है HTML में इवेंट गुण。

डिफ़ॉल्ट CSS सेटिंग

अधिकांश ब्राउज़र निम्नलिखित डिफ़ॉल्ट मूल्यों को प्रदर्शित करेंगे <td> एलीमेंट:

td {
  display: table-cell;
  vertical-align: inherit;
}

ब्राउज़र समर्थन

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
सापोर्ट सापोर्ट सापोर्ट सापोर्ट सापोर्ट