एचटीएमएल टेबल्स
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>तत्वों में टेक्स्ट बोल्ड और केंद्रित होता है, लेकिन आप इसे सीएसएस के साथ बदल सकते हैं।
एचटीएमएल व्यायाम
एचटीएमएल टेबल टैग
| 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 टैग संदर्भ पर जाएं ।