एचटीएमएल ट्यूटोरियल

एचटीएमएल होम एचटीएमएल परिचय एचटीएमएल संपादक एचटीएमएल बेसिक एचटीएमएल तत्व एचटीएमएल गुण एचटीएमएल शीर्षक एचटीएमएल पैराग्राफ एचटीएमएल शैलियाँ एचटीएमएल स्वरूपण एचटीएमएल कोटेशन एचटीएमएल टिप्पणियाँ एचटीएमएल रंग एचटीएमएल सीएसएस एचटीएमएल लिंक एचटीएमएल छवियाँ एचटीएमएल फ़ेविकॉन एचटीएमएल टेबल्स एचटीएमएल सूचियां एचटीएमएल ब्लॉक और इनलाइन एचटीएमएल क्लासेस एचटीएमएल आईडी एचटीएमएल इफ्रेम्स एचटीएमएल जावास्क्रिप्ट HTML फ़ाइल पथ एचटीएमएल हेड एचटीएमएल लेआउट एचटीएमएल उत्तरदायी एचटीएमएल कंप्यूटर कोड HTML शब्दार्थ एचटीएमएल स्टाइल गाइड एचटीएमएल इकाइयां एचटीएमएल प्रतीक एचटीएमएल इमोजी एचटीएमएल वर्णसेट एचटीएमएल यूआरएल एनकोड एचटीएमएल बनाम एक्सएचटीएमएल

एचटीएमएल फॉर्म

एचटीएमएल फॉर्म एचटीएमएल फॉर्म गुण एचटीएमएल फॉर्म एलिमेंट्स एचटीएमएल इनपुट प्रकार एचटीएमएल इनपुट गुण HTML इनपुट फॉर्म विशेषताएँ

एचटीएमएल ग्राफिक्स

एचटीएमएल कैनवास एचटीएमएल एसवीजी

एचटीएमएल मीडिया

एचटीएमएल मीडिया एचटीएमएल वीडियो एचटीएमएल ऑडियो एचटीएमएल प्लग-इन एचटीएमएल यूट्यूब

एचटीएमएल एपीआई

एचटीएमएल जियोलोकेशन एचटीएमएल ड्रैग/ड्रॉप एचटीएमएल वेब स्टोरेज एचटीएमएल वेब वर्कर्स एचटीएमएल एसएसई

एचटीएमएल उदाहरण

एचटीएमएल उदाहरण एचटीएमएल प्रश्नोत्तरी एचटीएमएल व्यायाम एचटीएमएल प्रमाणपत्र एचटीएमएल सारांश एचटीएमएल अभिगम्यता

एचटीएमएल संदर्भ

एचटीएमएल टैग सूची एचटीएमएल गुण HTML वैश्विक गुण एचटीएमएल ब्राउज़र समर्थन एचटीएमएल घटनाक्रम एचटीएमएल रंग एचटीएमएल कैनवास एचटीएमएल ऑडियो/वीडियो एचटीएमएल सिद्धांत एचटीएमएल कैरेक्टर सेट एचटीएमएल यूआरएल एनकोड एचटीएमएल लैंग कोड HTTP संदेश HTTP तरीके पीएक्स से ईएम कन्वर्टर कुंजीपटल अल्प मार्ग

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


HTML तालिकाएँ वेब डेवलपर्स को डेटा को पंक्तियों और स्तंभों में व्यवस्थित करने की अनुमति देती हैं।


उदाहरण

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

HTML तालिका को परिभाषित करें

HTML में एक तालिका में पंक्तियों और स्तंभों के अंदर तालिका कक्ष होते हैं

उदाहरण

एक साधारण HTML तालिका:

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

टेबल सेल

<td>प्रत्येक टेबल सेल को एक और एक </td>टैग द्वारा परिभाषित किया जाता है ।

td तालिका डेटा के लिए खड़ा है।

टेबल सेल की सामग्री के <td>बीच सब कुछ है।</td>

उदाहरण

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
</table>

नोट: तालिका डेटा तत्व तालिका के डेटा कंटेनर हैं।
उनमें सभी प्रकार के HTML तत्व शामिल हो सकते हैं; पाठ, चित्र, सूचियाँ, अन्य तालिकाएँ, आदि।



तालिका पंक्तियाँ

प्रत्येक तालिका पंक्ति एक टैग <tr>के साथ शुरू होती है और समाप्त होती है ।</tr>

tr तालिका पंक्ति के लिए खड़ा है।

उदाहरण

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

आपके पास एक तालिका में जितनी चाहें उतनी पंक्तियाँ हो सकती हैं, बस यह सुनिश्चित करें कि प्रत्येक पंक्ति में कक्षों की संख्या समान हो।

नोट: कई बार एक पंक्ति में दूसरी की तुलना में कम या अधिक सेल हो सकते हैं। इसके बारे में आप बाद के अध्याय में जानेंगे।


टेबल हेडर

कभी-कभी आप चाहते हैं कि आपके सेल हेडर हों, उन मामलों में <th>टैग के बजाय टैग का उपयोग करें <td>:

उदाहरण

पहली पंक्ति को टेबल हेडर होने दें:

<table>
  <tr>
    <th>Person 1</th>
    <th>Person 2</th>
    <th>Person 3</th>
  </tr>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

डिफ़ॉल्ट रूप से, <th>तत्वों में टेक्स्ट बोल्ड और केंद्रित होता है, लेकिन आप इसे सीएसएस के साथ बदल सकते हैं।


एचटीएमएल व्यायाम

व्यायाम के साथ खुद को परखें

व्यायाम:

दो टेबल हेडर के साथ एक टेबल रो जोड़ें।

दो टेबल हेडर में "नाम" और "आयु" मान होना चाहिए।

<तालिका>
  
    
    
  
  <tr>
    <td>जिल स्मिथ</td>
    <td>50</td>
  </tr>
</ तालिका>


एचटीएमएल टेबल टैग

Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table

सभी उपलब्ध HTML टैग्स की पूरी सूची के लिए, हमारे HTML टैग संदर्भ पर जाएं ।