If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.
HTML में जब हमें tabular form में data show कराना होता है तब table का use करते हैं। Basically Table में data row , columns में data display किया जाता है।
HTML में table बनाने के लिए <table> tag का use किया जाता है , rows को represent करने के लिए <tr> Tag का use किया जाता है और columns को represent करने के लिए <td> tag ka use किया जाता है।
| Tag Name | Uses |
|---|---|
| <table> | यह table को बनाने के लिए use किया जाता है। |
| <thead> | यह table head को represent करता है। |
| <th> | यह table head data को represent करता है। |
| <tr> | या table row को represent करता है। |
| <td> | यह table column को represent करता है। |
| <tbody> | यह table body को define करता है , जिसमे हमें actual information show करानी होती यही। |
| <tfoot> | यह table footer को define करता है। |
तो ये कुछ important table tags हैं जिनका use हम HTML में table print करने के लिए करते हैं।
File : html_table.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Table Example</title>
</head>
<body>
<table border="1">
<thead><tr><th>Language Name</th><th>Uses</th></tr></thead>
<tbody>
<tr>
<td>PHP</td>
<td>An open sources, object oriented, cross platform , server side, scripting language.</td>
</tr>
<tr>
<td>Laravel</td>
<td>A PHP Framework use to develop web applications.</td>
</tr>
<tr>
<td>JavaScript</td>
<td>An open sources, object oriented, cross platform , client side, scripting language</td>
</tr>
<tr>
<td>JQuery</td>
<td>A JavaScript Library</td>
</tr>
<tr>
<td>HTML</td>
<td>Hyper Text Markup Language use to devlope web pages.</td>
</tr>
</tbody>
<tfoot><tr><th>Language Name</th><th>Uses</th></tr></tfoot>
</table>
</body>
</html> | Language Name | Uses |
|---|---|
| PHP | An open sources, object oriented, cross platform , server side, scripting language. |
| Laravel | A PHP Framework use to develop web applications. |
| JavaScript | An open sources, object oriented, cross platform , client side, scripting language |
| JQuery | A JavaScript Library |
| HTML | Hyper Text Markup Language use to devlope web pages. |
| Language Name | Uses |
Example में हालाँकि <table> tag में एक border use किया गया है जिससे row , columns को easily देखा जा सके।
rowspan attribute का use हम तब करते हैं जब हमें 1 से ज्यादा rows को single row में दिखाना होता है। हालाँकि यह attribute सिर्फ <td> , <th> में ही लगता है।
File : html_rowspan.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Table Example</title>
</head>
<body>
<table border="1">
<thead><tr><th>Language Name</th><th>Uses</th></tr></thead>
<tbody>
<tr>
<td rowspan="2">PHP & Laravel</td>
<td>An open sources, object oriented, cross platform , server side, scripting language.</td>
</tr>
<tr>
<td>Laravel is a PHP Framework use to develop web applications.</td>
</tr>
<tr>
<td>JavaScript</td>
<td>An open sources, object oriented, cross platform , client side, scripting language</td>
</tr>
</tbody>
</table>
</body>
</html> | Language Name | Uses |
|---|---|
| PHP & Laravel | An open sources, object oriented, cross platform , server side, scripting language. |
| Laravel is a PHP Framework use to develop web applications. | |
| JavaScript | An open sources, object oriented, cross platform , client side, scripting language |
example में आप देख सकते हैं कि 2 rows को एक साथ मिलाकर एक single row बनाई है हालाँकि आप अपने need के according कितनी ही row को single row बना सकते हैं।
❕ Important
इसे हम जिस column में apply करते हैं सिर्फ उसी column के लिए rows merge होकर single row बनती है। ऐसा नहीं कि आप एक column में rowspan लिखकर complete row merge होंगी।
colspan attribute का use हम तब करते हैं जब हमें 1 से ज्यादा columns को single column में दिखाना होता है। यह attribute भी सिर्फ <td> , <th> में ही लगता है।
File : html_colspan.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Table Example</title>
</head>
<body>
<table border="2">
<tbody>
<tr><td colspan="2">Web Devlopment Languages</td></tr>
<tr><th>Language Name</th><th>Uses</th></tr>
<tr>
<td>PHP</td><td>An open sources, object oriented, cross platform , server side, scripting language.</td>
</tr>
<tr>
<td>Laravel</td><td>A PHP Framework use to develop web applications.</td>
</tr>
<tr>
<td>JavaScript</td><td>An open sources, object oriented, cross platform , client side, scripting language</td>
</tr>
<tr>
<td>JQuery</td><td>A JavaScript Library</td>
</tr>
<tr>
<td>HTML</td><td>Hyper Text Markup Language use to devlope web pages.</td>
</tr>
</tbody>
</table>
</body>
</html> | Web Devlopment Languages | |
| Language Name | Uses |
|---|---|
| PHP | An open sources, object oriented, cross platform , server side, scripting language. |
| Laravel | A PHP Framework use to develop web applications. |
| JavaScript | An open sources, object oriented, cross platform , client side, scripting language |
| JQuery | A JavaScript Library |
| HTML | Hyper Text Markup Language use to devlope web pages. |
हालाँकि आप CSS ला use करके Table और अच्छा बना सकते हैं। I Hope अब आपको HTML में Table के बारे में अच्छे से समझ आ गया होगा।
Hi ! I'm Rahul Kumar Rajput founder of learnhindituts.com. I'm a software developer having more than 4 years of experience. I love to talk about programming as well as writing technical tutorials and blogs that can help to others. I'm here to help you navigate the coding cosmos and turn your ideas into reality, keep coding, keep learning :)
Get connected with me. :) LinkedIn Twitter Instagram Facebook
