पङ्क्ति र स्तम्भहरू संग संरचित ढाँचामा डेटा प्रदर्शन गर्नको लागि HTML मा तालिका एक आवश्यक घटक हो। HTML मा, तालिकाहरू <table>, <tr>, र <td> ट्यागहरू प्रयोग गरेर सिर्जना गरिन्छ।
<table> ट्यागले मुख्य तालिका कन्टेनरलाई प्रतिनिधित्व गर्दछ, जसमा सबै पङ्क्ति र स्तम्भहरू छन्। पङ्क्तिहरू <tr>(तालिका पङ्क्ति) ट्याग प्रयोग गरी परिभाषित गरिन्छ, जबकि पङ्क्तिहरू भित्रका कक्षहरू <td>(तालिका डेटा) ट्याग प्रयोग गरी परिभाषित गरिन्छ। थप रूपमा, तपाइँ तालिकाको लागि हेडर कक्षहरू परिभाषित गर्न <th>(तालिका हेडर) ट्याग प्रयोग गर्न सक्नुहुन्छ।
तपाईले colspan र rowspan जस्ता विशेषताहरू प्रयोग गर्न सक्नुहुन्छ टेबलमा सेलहरू मर्ज गर्न वा धेरै पङ्क्तिहरू र स्तम्भहरूमा स्प्यान कक्षहरू। यसबाहेक, तपाइँ तालिकाको उपस्थिति र लेआउट अनुकूलन गर्न CSS गुणहरू लागू गर्न सक्नुहुन्छ।
तालिका( <table>)
- <table> तत्व HTML मा तालिका बनाउन प्रयोग गरिन्छ।
<tr>- डाटा पङ्क्ति() र स्तम्भ( <td> वा <th>) मा राखिएको छ ।
<td>- प्रत्येक डाटा सेल(डेटा सेल) वा <th>(हेडर सेल) तत्वहरू भित्र राखिएको छ ।
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>30</td>
</tr>
</table>
स्तम्भ हेडर( <th>)
- <th> तत्व तालिकामा स्तम्भ हेडरहरू सिर्जना गर्न प्रयोग गरिन्छ।
- सामान्यतया तालिकाको पहिलो पङ्क्तिमा राखिन्छ।
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<!-- data rows -->
</table>
डाटा पङ्क्तिहरू( <tr>):
- <tr> तत्व तालिकामा डेटा पङ्क्तिहरू सिर्जना गर्न प्रयोग गरिन्छ।
- डाटा कक्षहरू( <td>) वा हेडर कक्षहरू() यी तत्वहरूमा <th> राखिएका छन् । <tr>
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>30</td>
</tr>
</table>
स्तम्भ स्प्यानिङ( colspan)
colspan तालिकामा डेटा सेल वा हेडर सेल स्प्यान हुने स्तम्भहरूको संख्या निर्धारण गर्न विशेषता प्रयोग गरिन्छ ।
<table>
<tr>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td colspan="2">John Doe</td>
</tr>
</table>
पङ्क्ति फैलावट( rowspan)
rowspan तालिकामा डेटा सेल वा हेडर सेल स्प्यान हुने पङ्क्तिहरूको संख्या निर्धारण गर्न विशेषता प्रयोग गरिन्छ ।
<table>
<tr>
<th rowspan="2">No.</th>
<td>1</td>
<td>John</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
</tr>
</table>
कक्षहरू मर्ज गर्दै( colspan र rowspan)
तपाइँ तालिकामा कक्षहरू मर्ज गर्न दुवै colspan र विशेषताहरू संयोजन गर्न सक्नुहुन्छ। rowspan
<table>
<tr>
<th rowspan="2">No.</th>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
border सम्पत्ति
- border सम्पत्तिले तालिका सीमानाको मोटाई निर्दिष्ट गर्दछ।
- को मान border गैर-ऋणात्मक पूर्णांक हो।
<table border="1">
<!-- Table rows and columns -->
</table>
cellpadding सम्पत्ति
-, cellpadding गुणले कक्ष सामग्री र तालिकामा रहेको कक्षको किनारा बीचको दूरी निर्दिष्ट गर्दछ।
- को मान cellpadding गैर-ऋणात्मक पूर्णांक हो
<table cellpadding="5">
<!-- Table rows and columns -->
</table>
cellspacing सम्पत्ति
- cellspacing गुणले तालिकामा कक्षहरू बीचको स्पेसिङ निर्दिष्ट गर्दछ।
- को मान cellspacing गैर-ऋणात्मक पूर्णांक हो।
<table cellspacing="10">
<!-- Table rows and columns -->
</table>
यी विशेषताहरू र तत्वहरूले तपाइँलाई तपाइँको आवश्यकता अनुसार HTML मा तालिकाहरू सिर्जना गर्न र अनुकूलन गर्न अनुमति दिन्छ। तपाइँ तपाइँको वेबसाइट मा एक स्पष्ट र संगठित तरीका मा डाटा प्रदर्शन गर्न को लागी तिनीहरूलाई प्रयोग गर्न सक्नुहुन्छ।