Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> HTML

एचटीएमएल टेबल्स

<घंटा/>

HTML टेबल का उपयोग

टैग का उपयोग करके टेबल बनाने के लिए किया जाता है। तालिका में, प्रत्येक पंक्ति को टैग का उपयोग करके निर्दिष्ट किया जाता है और तालिका शीर्षलेख को
टैग का उपयोग करके परिभाषित किया जाता है। तालिका डेटा को टैग का उपयोग करके परिभाषित किया जाता है।

सिंटैक्स

निम्नलिखित वाक्य रचना है -

<table>
<tr>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr>
<td>Table data</td>
<td>Table data</td>
</tr>
<tr>
<td>Table data</td>
<td>Table data</td>
</tr>
</table>

HTML तालिका विशेषताएँ

विशेषता स्पष्टीकरण
colspan इसका उपयोग किसी तालिका के स्तंभ में तालिका कक्ष को फैलाने के लिए किया जाता है।
रोस्पैन इसका उपयोग टेबल सेल को टेबल की पंक्तियों में फैलाने के लिए किया जाता है।

HTML कैप्शन तत्व

हम HTML कैप्शन एलिमेंट का उपयोग करके टेबल के लिए कैप्शन भी सेट कर सकते हैं।

सिंटैक्स

निम्नलिखित वाक्य रचना है -

<caption>text</caption>

उदाहरण

आइए HTML टेबल्स का एक उदाहरण देखें:

<!DOCTYPE html>
<html>
<style>
   body {
      color: #000;
      height: 100vh;
      background-color: #8BC6EC;
      background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
      text-align: center;
   }
   table {
      margin: 2rem auto;
      width: 400px;
   }
   caption {
      color: #fff;
      font-size: 1.5rem;
   }
</style>
<body>
<h1>HTML Tables</h1>
<table border="2">
<caption>Student Data</caption>
<tr>
<th>Name</th>
<th>Roll No.</th>
</tr>
<tr>
<td>John</td>
<td>031717</td>
</tr>
<tr>
<td>Elon</td>
<td>051717</td>
</tr>
</table>
</body>
</html>

आउटपुट

एचटीएमएल टेबल्स


  1. HTML DOM टेबल क्रिएटकैप्शन () मेथड

    HTML DOM तालिका createCaption() विधि एक खाली तत्व उत्पन्न करती है और इसे HTML दस्तावेज़ में तालिका में जोड़ती है। सिंटैक्स निम्नलिखित वाक्य रचना है - object.createCaption() आइए HTML DOM तालिका createCaption() विधि का एक उदाहरण देखें - उदाहरण <!DOCTYPE html> <html> <style>  

  1. एचटीएमएल डोम टेबलहेडर ऑब्जेक्ट

    HTML DOM TableHeader ऑब्जेक्ट HTML दस्तावेज़ के तत्व का प्रतिनिधित्व करता है। टेबलहेडर ऑब्जेक्ट बनाएं सिंटैक्स निम्नलिखित वाक्य रचना है - document.createElement(“TH”); टेबलहेडर ऑब्जेक्ट के गुण संपत्ति स्पष्टीकरण सेल इंडेक्स यह तालिका पंक्ति के सेल संग्रह में सेल की स्थिति लौटाता है।

  1. एचटीएमएल डोम टेबल टीहेड संपत्ति

    HTML DOM तालिका tHead गुण HTML दस्तावेज़ में तालिका के तत्व को लौटाता है। सिंटैक्स निम्नलिखित वाक्य रचना है - object.tHead आइए HTML DOM तालिका tHead गुण का एक उदाहरण देखें - उदाहरण <!DOCTYPE html> <html> <style>    body {       color: #000;