Introduction of Table tag in HTML in Hindi
आपने MS Word मे तो table बनाई होगी। तो आज हम table को web page मे बनाना सीखेंगे। इस लेख मे हम सीखेंगे की table को कैसे बनाते है? इसके लिए कोन से tag और attribute का इस्तेमाल करते है?
Structure of an HTML Table
Table तीन elements का use करके बनती है। Rows, columns और cell
Rows – आड़ी रेखाओ से बने खाने को हम table मे row कहते है। दो और दो से ज्यादा आड़ी रेखाओ से row का निर्माण होता है।
Columns – Table मे खड़े खाने को हम column कहते है। दो और दो से ज्यादा खड़ी रेखाओ से row का निर्माण होता है।
Cell – जब rows and columns टकराते है तब cell का निर्माण होता है।
Defining an HTML Table
HTML table को बनाने के लिए <table> tag का इस्तेमाल किया जाता है।
HTML table मे rows को define करने के लिए <tr> का इस्तेमाल होता है।
HTML table मे headings को define करने के लिए <th> tag का इस्तेमाल होता है। HTML Table मे headings by default bold और middle मे होते है।
इसमे table cell को define करने के लिए <td> tag का इस्तेमाल होता है।
उदाहरण
<!DOCTYPE html>
<html>
<body>
<p>Table tag in HTML in Hindi</p>
<table style="width:100%%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>milan</td>
<td>shah</td>
<td>29</td>
</tr>
<tr>
<td>prakash</td>
<td>pandit</td>
<td>32</td>
</tr>
<tr>
<td>mukund</td>
<td>parekh</td>
<td>38</td>
</tr>
</table>
</body>
</html>
HTML Table Border
HTML मे Table border के लिए border attribute का इस्तेमाल होता है। इसके अलावा आप border color को भी set कर सकते है। इसके लिए आपको bordercolor attribute का इस्तेमाल करना पड़ता है।
उदाहरण
<!DOCTYPE html>
<html>
<body>
<p>Table tag in HTML in Hindi</p>
<table border="1" bordercolor="red">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>milan</td>
<td>shah</td>
<td>29</td>
</tr>
<tr>
<td>prakash</td>
<td>pandit</td>
<td>32</td>
</tr>
<tr>
<td>mukund</td>
<td>parekh</td>
<td>38</td>
</tr>
</table>
</body>
</html>
cellspacing Attribute
दो cell के बीच के space को cellspacing कहते है। cellspacing की by default value “2” होती है। अगर cellspacing=”0″ होता है तो दो cell के बीच मे कोई भी space नहीं होता है।
उदाहरण
<!DOCTYPE html>
<html>
<body>
<p>Table tag in HTML in Hindi</p>
<table border="1" cellspacing="0">
<--we suggest use this <table border="1" style="border-collapse:collapse;"> -->
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>milan</td>
<td>shah</td>
<td>29</td>
</tr>
<tr>
<td>prakash</td>
<td>pandit</td>
<td>32</td>
</tr>
<tr>
<td>mukund</td>
<td>parekh</td>
<td>38</td>
</tr>
</table>
</body>
</html>
हम यहा suggest करेंगे की आप cellspacing के लिए CSS का use करे। यहा cellspacing के बजाय style=”border-collapse:collapse;” का इस्तेमाल करे।
cellpadding Attribute
border और data cell के बीच के अंतर को cellpadding कहते है। By default इसकी value “1” होती है।
उदाहरण
<!DOCTYPE html>
<html>
<body>
<p>Table tag in HTML in Hindi</p>
<table border="1" cellpadding="5">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>milan</td>
<td>shah</td>
<td>29</td>
</tr>
<tr>
<td>prakash</td>
<td>pandit</td>
<td>32</td>
</tr>
<tr>
<td>mukund</td>
<td>parekh</td>
<td>38</td>
</tr>
</table>
</body>
</html>
rowspan Attribute
rowspan Attribute दो और दो से ज्यादा rows को merge कर देता है।
उदाहरण
<!DOCTYPE html>
<html>
<body>
<p>Table tag in HTML in Hindi</p>
<table border="1">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td rowspan="2">milan</td>
<td>shah</td>
<td>29</td>
</tr>
<tr>
<td>pandit</td>
<td>32</td>
</tr>
<tr>
<td>mukund</td>
<td>parekh</td>
<td>38</td>
</tr>
</table>
</body>
</html>
colspan Attribute
colspan Attribute दो और दो से ज्यादा columns को merge कर देता है।
उदाहरण
<!DOCTYPE html>
<html>
<body>
<p>Table tag in HTML in Hindi</p>
<table border="1">
<tr>
<th colspan="2">name</th>
<th>Age</th>
</tr>
<tr>
<td>milan</td>
<td>shah</td>
<td>29</td>
</tr>
<tr>
<td>prakash</td>
<td>pandit</td>
<td>32</td>
</tr>
<tr>
<td>mukund</td>
<td>parekh</td>
<td>38</td>
</tr>
</table>
</body>
</html>
Adding a Caption
Table को caption देने के लिए <caption> tag का इस्तेमाल होता है। By default यह middle मे होता है।
उदाहरण
<!DOCTYPE html>
<html>
<body>
<p>Table tag in HTML in Hindi</p>
<table border="1">
<caption>Table Data</caption>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>milan</td>
<td>shah</td>
<td>29</td>
</tr>
<tr>
<td>prakash</td>
<td>pandit</td>
<td>32</td>
</tr>
<tr>
<td>mukund</td>
<td>parekh</td>
<td>38</td>
</tr>
</table>
</body>
</html>
width and height Attribute
Table के size को बदलने के लिए width and height attribute का इस्तेमाल होता है। इसके लिए हम style attribute का भी इस्तेमाल कर सकते है।
उदाहरण
<!DOCTYPE html>
<html>
<body>
<p>Table tag in HTML in Hindi</p>
<table border="1" width="400" height="300">
<!-- same as <table border="1" style="width:400px;height:300px;"> -->
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>milan</td>
<td>shah</td>
<td>29</td>
</tr>
<tr>
<td>prakash</td>
<td>pandit</td>
<td>32</td>
</tr>
<tr>
<td>mukund</td>
<td>parekh</td>
<td>38</td>
</tr>
</table>
</body>
</html>
Background Color
Background Color के लिए <bgcolor> attribute का इस्तेमाल होता है। bgcolor attribute को HTML 5 से हटा दिया गया है। इसलिए आप bgcolor के बजाय style attribute का इस्तेमाल करे।
उदाहरण
<!DOCTYPE html>
<html>
<body>
<p>Table tag in HTML in Hindi</p>
<table border="1" bgcolor="yellow">
<!-- for better use <table border="1" style="background-color:yellow;"> -->
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>milan</td>
<td>shah</td>
<td>29</td>
</tr>
<tr>
<td>prakash</td>
<td>pandit</td>
<td>32</td>
</tr>
<tr>
<td>mukund</td>
<td>parekh</td>
<td>38</td>
</tr>
</table>
</body>
</html>
Next – HTML Iframe