table Element in HTML: जब हमें हमारे Document में किसी Data या Information को Tabular Form में Display करने की जरूरत होती है, तब हम Tables Element का प्रयोग करते हैं। Table Element में Table विभिन्न जानकारियों को Rows व Columns के समूह के रूप में लिखा जाता है।
सबसे पहले एक Table Element को उपयोग में लिया जाता है और फिर अपनी जरूरत के अनुसार उस Table में Rows को Create किया जाता है। Row Create हो जाने के बाद Row में हमें जितने Columns की जरूरत होती है, उतने Columns को Create किया जाता है।
Row Create करने के लिए हमें <tr> Element को उपयोग में लेना होता है, जबकि Rows में Columns को Create करने के लिए हमें <td> Element को उपयोग में लेना होता है। Table Creation की Process को हम निम्न उदाहरण द्वारा समझ सकते हैं:
<html> <body> <table border=”1”> <tr> <td> Row1, Column1 </td> <td> Row1, Column2 </td> </tr> <tr> <td> Row2, Column1 </td> <td> Row2, Column2 </td> </tr> </table> </html> </body>
इस HTML File को Run करने पर हमें निम्नानुसार Output प्राप्त होता है:
ये Table किसी भी Table का एक Basic Structure है, जिसे किसी भी Table को Create करने के लिए उपयोग में लेना पडता है। Table Element के विभिन्न Attributes को उपयोग में लेकर हम अपनी Table के Structure को विभिन्न प्रकार से Control कर सकते हैं।
सामान्यतया किसी भी Table के पहले Row या पहले Column अथवा दोनों को Heading Row/Column के रूप में उपयोग में लिया जाता है। Table की Heading को Display करने के लिए सामान्यतया हमें <td> Element के स्थान पर <th> Element को उपयोग में लेना होता है। इस Element को हम निम्नानुसार उपयोग में लेकर अपनी Heading वाली Table Create कर सकते हैं:
<html> <body> <table border=”1”> <tr> <th></th> <th>Outgoings ($)</th> <th>Receipts ($)</th> <th>Profit ($)</th> </tr> <tr> <th>Quarter 1 (Jan-Mar)</th> <td>11200.00</td> <td>21800.00</td> <td><b>10600.00</b></td> </tr> <tr> <th>Quarter 2 (Apr-Jun)</th> <td>11700.00</td> <td>22500.00</td> <td><b>10800.00</b></td> </tr> <tr> <th>Quarter 3 (Jul - Sep)</th> <td>11650.00</td> <td>22100.00</td> <td><b>10450.00</b></td> </tr> <tr> <th>Quarter 4 (Oct - Dec)</th> <td>11850.00</td> <td>22900.00</td> <td><b>11050.00</b></td> </tr> </table> </html> </body>
इस उदाहरण में हमने किसी Company की Financial Report को एक Table के रूप में Show किया है। इस Table में सबसे पहली Row को Heading Row बनाने के लिए हमने सबसे पहली Row में <td> Element के स्थान पर <th> Element को उपयोग में लिया है।
ठीक इसी तरह से हमने सभी अन्य Rows में सबसे पहले Column को Heading Column बनाया है। इस Table की सबसे पहली Row का सबसे पहला Column Empty रखा गया है, जबकि बाकी के सभी Rows के पहले Column को Heading के रूप में Specify किया गया है। इस HTML File को Run करने पर ये Page हमें निम्नानुसार दिखाई देता है:
ये Article इस वेबसाईट पर Selling हेतु उपलब्ध EBook HTML5 with CSS3 in Hindi से लिया गया है। इसलिए यदि ये Article आपके लिए उपयोगी रहा, तो निश्चित रूप से ये पुस्तक भी आपके लिए काफी उपयोगी साबित होगी।
HTML5 with CSS3 in Hindi | Page: 481 | Format: PDF
