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 किया जाता है।

HTML Table Tags

Tag NameUses
<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 करने के लिए करते हैं।

HTML Table Example

File : html_table.html

Copy Fullscreen Close Fullscreen Run
 <!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> 
Output
Language NameUses
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 NameUses

Example में हालाँकि <table> tag में एक border use किया गया है जिससे row , columns को easily देखा जा सके।

HTML rowspan Attribute

rowspan attribute का use हम तब करते हैं जब हमें 1 से ज्यादा rows को single row में दिखाना होता है। हालाँकि यह attribute सिर्फ <td> , <th> में ही लगता है।

HTML rowspan Example

File : html_rowspan.html

Copy Fullscreen Close Fullscreen Run
 <!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> 
Output
Language NameUses
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 होंगी।

HTML colspan Attribute

colspan attribute का use हम तब करते हैं जब हमें 1 से ज्यादा columns को single column में दिखाना होता है। यह attribute भी सिर्फ <td> , <th> में ही लगता है।

HTMl colspan Example

File : html_colspan.html

Copy Fullscreen Close Fullscreen Run
 <!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> 
Output
Web Devlopment Languages
Language NameUses
PHPAn open sources, object oriented, cross platform , server side, scripting language.
LaravelA PHP Framework use to develop web applications.
JavaScriptAn open sources, object oriented, cross platform , client side, scripting language
JQueryA JavaScript Library
HTMLHyper Text Markup Language use to devlope web pages.

हालाँकि आप CSS ला use करके Table और अच्छा बना सकते हैं। I Hope अब आपको HTML में Table के बारे में अच्छे से समझ आ गया होगा।

Hey ! I'm Rahul founder of learnhindituts.com. Working in IT industry more than 4.5 years. I love to talk about programming as well as writing technical tutorials and blogs that can help to others .... keep learning :)

Get connected with me - LinkedIn Twitter Instagram Facebook