HomeEducationHTML Table क्या है और इसे कैसे बनाते है ?

HTML Table क्या है और इसे कैसे बनाते है ?

HTML Table वेब लेखकों को डेटा जैसे टेक्स्ट, इमेज, लिंक, अन्य टेबल आदि को सेल की Rows और Columns में व्यवस्थित करने की अनुमति देती है।

HTML तालिकाएँ <table> टैग का उपयोग करके बनाई जाती हैं जिसमें <tr> टैग का उपयोग तालिका पंक्तियों को बनाने के लिए किया जाता है और <td> टैग का उपयोग डेटा सेल बनाने के लिए किया जाता है। <td> के अंतर्गत तत्व नियमित हैं और डिफ़ॉल्ट रूप से बाएं संरेखित हैं

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Tables</title>
   </head>
	
   <body>
      <table border = "1">
         <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
         </tr>
         
         <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
         </tr>
      </table>
      
   </body>
</html>

OUTPUT:

HTML Tables

Row 1, Column 1	Row 1, Column 2
Row 2, Column 1	Row 2, Column 2

Contents show

HTML Table Heading in Hindi

Table Heading को <th> टैग का उपयोग करके परिभाषित किया जा सकता है। यह टैग <td> टैग को बदलने के लिए लगाया जाएगा, जिसका उपयोग वास्तविक डेटा कोशिकाओं का प्रतिनिधित्व करने के लिए किया जाता है। आम तौर पर आप अपनी शीर्ष पंक्ति को नीचे दिखाए गए तालिका शीर्षक के रूप में रखेंगे, अन्यथा, आप किसी भी पंक्ति में <th> तत्व का उपयोग कर सकते हैं। शीर्षक, जो <th> टैग में परिभाषित होते हैं, डिफ़ॉल्ट रूप से केंद्रित और बोल्ड होते हैं।

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Header</title>
   </head>
	
   <body>
      <table border = "1">
         <tr>
            <th>Name</th>
            <th>Salary</th>
         </tr>
         <tr>
            <td>Ramesh Raman</td>
            <td>5000</td>
         </tr>
         
         <tr>
            <td>Shabbir Hussein</td>
            <td>7000</td>
         </tr>
      </table>
   </body>
   
</html>

OUTPUT:

HTML Table Header

Name	Salary
Kapil Gupta	5000
Rohan Maurya	7000

Colspan and Rowspan Attributes in Hindi

यदि आप दो या अधिक कॉलम को एक कॉलम में मर्ज करना चाहते हैं तो आप colspan विशेषता का उपयोग करेंगे। इसी तरह यदि आप दो या दो से अधिक पंक्तियों को मर्ज करना चाहते हैं तो आप Rowspan का उपयोग करेंगे।

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Colspan/Rowspan</title>
   </head>
	
   <body>
      <table border = "1">
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
         <tr>
            <td rowspan = "2">Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
         </tr>
         <tr>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
         </tr>
         <tr>
            <td colspan = "3">Row 3 Cell 1</td>
         </tr>
      </table>
   </body>
	
</html>

OUTPUT:

HTML Table Colspan/Rowspan

Column 1	Column 2	Column 3
Row 1 Cell 1	Row 1 Cell 2	Row 1 Cell 3
Row 1 Cell 1	Row 2 Cell 2	Row 2 Cell 3
Row 3 Cell 1

Tables Backgrounds Color in Hindi

आप निम्न दो तरीकों में से किसी एक का उपयोग करके Table Backgrounds Color सेट कर सकते हैं –

bgcolor Attribute – आप पूरी टेबल के लिए या सिर्फ एक सेल के लिए बैकग्राउंड कलर सेट कर सकते हैं।

Backgrounds Attribute – आप पूरी टेबल के लिए या सिर्फ एक सेल के लिए बैकग्राउंड इमेज सेट कर सकते हैं।

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Background</title>
   </head>
	
   <body>
      <table border = "1" bordercolor = "green" bgcolor = "yellow">
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
         <tr>
            <td rowspan = "2">Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
         </tr>
         <tr>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
         </tr>
         <tr>
            <td colspan = "3">Row 3 Cell 1</td>
         </tr>
      </table>
   </body>
	
</html>

OUTPUT:

HTML Table Background