Table Tag in HTML in Hindi
आज के इस Table Tag in HTML in Hindi के topic के जरिये हम HTML में table create करना सीखेंगे |
HTML me table kaise banaye ( Creating tables in html )
HTML table – data को row और column में arrange करने की अनुमति देती है। इस row and column के combination को table cell कहा जाता है |
जैसे हम MS Word में table के जरिये data को tabular format में arrange करते है ठीक उसी तरह हम webpages पर भी data को tabular format में arrange कर सकते है | जैसे की customer की details , employee list , product list etc.
HTML document में table create करने के लिए हम HTML table tag ( <table> element ) का use कर सकते है | Table की row create करने के लिए <table> tag में <tr> tag का use किया जाता है और table का column बनाने के लिए <tr> element के अंदर <td> element का use किया जाता है |
Friends, यदि आपको HTML Element क्या होता है यह पता नहीं है तो आप HTML Elements in Hindi का post read कर सकते है |
HTML Table में header कैसे define करे ( Table header in HTML )
किसी भी content का heading बहुत ही important role अदा करता है | Heading के जरिये content reader को आसानी से समझ में आ जाता है की यह content किस topic के बारे मे है |
HTML Tables में भी हम heading को define कर सकते है | HTML में table के किसी भी cell में heading define करने के लिए <th> tag का use किया जाता है |
HTML table को हम three section में divide कर सकते है | first head section , second body section and third footer section
- HTML table head : HTML में table का head section define करने के लिए
<thead>tag का use किया जाता है | - HTML table body : HTML में table का body section define करने के लिए
<tbody>tag का use किया जाता है | - HTML table footer : HTML में table का footer section define करने के लिए
<tfoot>tag का use किया जाता है |
Note : <th> tag को आप <thead> tag के साथ या without <thead> tag के भी use कर सकते है |
Example
<table>
<thead>
<tr>
<th>This is heading example with header tag</th>
</tr>
</thead>
<tbody>
<tr>
<th>This is heading example without header tag</th>
</tr>
<tbody>
<tfoot>
<th>This is footer section</th>
</tfoot>
</table>HTML table structure
<table>
<thead>
<tr>
<th> </th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tbody>
</table>HTML code to create table
निचे दिए गए HTML code को आप notepad , notepad++ या किसी भी text editor में paste करे या फिर आप इस HTML code को आप manually text editor में type कर के file को HTML format में save करे | किसी भी file को HTML format में save करने के लिए file के name के पीछे .html extention लगाना होगा | For example tableexample.html , file को html format में save करने के बाद इसे आप open करे |
<table>
<tr>
<th>Sr. No.</th>
<th>Customer Name</th>
<th>Order Date</th>
</tr>
<tr>
<td>1</td>
<td>Saman Patel</td>
<td>12-01-1980</td>
</tr>
<tr>
<td>2</td>
<td>Hasmukh Sharma</td>
<td>01-05-1985</td>
</tr>
</table>ऊपर दिए गए example को जब आप save करके अपने chrome या अन्य मनपसंद web browser में open करोगे तो कुछ इस तरह output आएगा |
| Sr. No. | Customer Name | Order Date |
|---|---|---|
| 1 | Saman Patel | 12-01-1980 |
| 2 | Hasmukh Sharma | 01-05-1985 |
HTML table में by default border नहीं होती है , लेकिन आप border attribute या css की border property के जरिये table पर border add कर सकते है | css के जरिये table पर border add करने के लिए आप inline styles, internal styles या external styles – इन तीनो मे से किसी भी एक method का use कर सकते है |
Example :
<html>
<head>
<title> This HTML Table Example </title>
<style>
.cssborder
{
border : 2px solid black;
}
</style>
</head>
<body>
<b>This is Table Example With Border attribute</b>
<br /><br />
<table border="2px">
<thead>
<tr>
<th>Client Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td> Manoj Yadav </td>
<td>26 Year</td>
</tr>
</tbody>
</table>
<br />
<b>This is table example using internal CSS</b>
<br /><br />
<table class="cssborder">
<thead>
<tr>
<th class="cssborder">Client Name</th>
<th class="cssborder">Age</th>
</tr>
</thead>
<tbody>
<tr>
<td class="cssborder"> Raju Parmar </td>
<td class="cssborder">30 Year</td>
</tr>
</tbody>
</table>
</body>
</html>ऊपर दिए गए example में हम ने two table लिए है | पहले table में border attribute का use कर के html table पर border add की है जब की दूसरे table में inernal css styles का use कर के border add की है , और दोनों table का output कुछ इस तरह है |
Click here to try our HTML Code Editor
Output :
| Client Name | Age |
|---|---|
| Manoj Yadav | 26 Year |
This is table example using internal CSS
| Client Name | Age |
|---|---|
| Raju Parmar | 30 Year |
Table cells का आकार इतना बड़ा होता है कि वे content को default रूप से fit कर सकें। means की content को अपने अंदर fit set करने के लिए table cells default रूप से अपनी size increase या decrease कर सकता है | Table cells में content के चारों ओर more space add करने के लिए आप CSS padding property का उपयोग कर सकते हैं।
<table border="1">
<tr>
<td style="padding:10px;">Type some paragraph here</td>
</tr>
</table>ऊपर दिए गए example में style rules के through table cell के चारो ओर 10px की space add होगी | Live output check करने के लिए हमारा HTML code editor में ऊपर दिए गए code को paste करे |
By default table के चारो ओर की border और table cells की border एक दूसरे से separate होती है , but हम इन borders को table element में css की border-collapse property का use करके एक कर सकते है |
साथ ही <th> tag के अंदर लिखा गया text by default horizontally center alignment के साथ bold font में display होता है | font का default allignment change करने के लिए आप css की text-align property का use कर सकते है |
निचे दिए गए example में table की चारो ओर की border और table cells की border एक हो जाएगी , और table header का text left alignment में set हो जायेगा |
<style>
table
{
border-collapse: collapse;
}
th
{
text-align:left;
}
</style>
<table border="2px">
<tr>
<th>Table collapse example</th>
</tr>
<tr>
<td border="2px">Type some paragraph here</td>
</tr>
</table>ऊपर दिए गए example का output चेक करने के लिए code को copy करे और हमारे HTML text editor में paste करे |
HTML rowspan in Hindi
HTML table में multiple rows को merge करने के लिए rowspan attribute का use किया जाता है |
आइये इसे हम example से समझने की कोशिश करते है |
<table border="2px">
<tr>
<th>Order Date</th>
<th>Product Purchased</th>
</tr>
<tr>
<td rowspan="2">12/08/2022</td>
<td>HTML Full Tutorial</td>
</tr>
<tr>
<td>Coumputer Basic Course</td>
</tr>
</table>Output
| Order Date | Product Purchased |
|---|---|
| 12/08/2022 | HTML Full Tutorial |
| Coumputer Basic Course |
HTML colspan in Hindi
HTML table में rowspan की तरह हम multiple column को colspan attribute के जरिये merge कर के column को extand कर सकते है |
<table border="2px">
<tr>
<th>Order Date</th>
<th colspan="2">Product Purchased</th>
</tr>
<tr>
<td>25/08/2022</td>
<td>Video editing course</td>
<td>Tips for online money</td>
</tr>
</table>| Order Date | Product Purchased | |
|---|---|---|
| 25/08/2022 | Video editing course | Tips for online money |
Caption in HTML table ( HTML table me caption kaise lagaye )
आमतौर पर caption का meaning title होता है | HTML table पर caption लगाने के लिए <caption> tag का use किया जाता है | <caption> element हंमेसा opening <table> tag के exact बाद मे लिखा जाता है | By default caption table के ऊपर दिखाई देता है , but आप caption की position css की caption-side property के जरिये change कर सकते है |
<style>
.table2
{
caption-side:bottom;
}
</style>
<table border="2">
<caption>Product Purchage Details</caption>
<tr>
<th>Date</th>
<th>Product</th>
<th>Qty.</th>
</tr>
<tr>
<td>22/07/2022</td>
<td>Computer Monitor</td>
<td>18</td>
</tr>
<tr>
<td>25/07/2022</td>
<td>Keyboard</td>
<td>24</td>
</tr>
</table>
<br /><br />
<table border="2" class="table2">
<caption>Product Service Details</caption>
<tr>
<th>Service Date</th>
<th>Product</th>
<th>Status</th>
</tr>
<tr>
<td>30/07/2022</td>
<td>Computer Monitor</td>
<td>Done</td>
</tr>
<tr>
<td>28/07/2022</td>
<td>Mouse</td>
<td>Pending</td>
</tr>
</table>| Date | Product | Qty. |
|---|---|---|
| 22/07/2022 | Computer Monitor | 18 |
| 25/07/2022 | Keyboard | 24 |
| Service Date | Product | Status |
|---|---|---|
| 30/07/2022 | Computer Monitor | Done |
| 28/07/2022 | Mouse | Pending |