Guest Posting

Html table and their attributes

Posted on: April 10, 2016 Last Update: September 21, 2016 155

Html table and their attributes

Html table and their attributes

In this article we will be explain about HTML table, their attributes, why we use html table, what is definition of table.

HTML Table Definition and Usage

  • Tables are the simplest form of displaying the data or information. Using tables we can display the information in well manner to the user. There for Simplicity in almost all the projects data is displayed using the tables. Project may be made using any application, But most of them uses only tables to display the information.
  • Tables are very useful to display information in HTML and they are used very frequently by almost all web developers. Tables are just like spreadsheets and which are combination of rows and columns.
  • Table is a best way to split a page into different sections.
  • If you want to display information of some type, like displaying your time table of class, Report Card or menu etc.
  • You will create a table in HTML/XHTML by using <table> tag and closed by the </table> tag.
  • HTML <table> element is contained inside a <tr> tag, which stands for table row.
  • Every time you add a <tr> tag, when table will create and you want add extra row.
  • HTML <tr> element is contained inside a <td> tag, HTML <td> tag stands for table data (also say table column), and it places one cell in your table row.
  • HTML table you can also merge two or more column or two or more row merge using respectively colspan or rowspan attributes.

 

<table> Attributes

Attributes Value Description
align Left,Right,Center Declared your alignment side.
width “Size_px” Specify the Width Size of the Table.
height “Size_px” Specify the Height Size of the Table.
bgcolor “purple” Specify the Background Color.
background “Specified_URL” Specify the Background Image open for URL file.
border “Size_px” Specify the size of border thickness.
bordercolor “Yellow” Specify the color of border.
cellspacing “Size_px” Specify the space between two Cell.
cellpadding “Size_px” Specify the space between cell boundary and text.

<tr> Attributes

Attributes Value Description
bgcolor “purple” Specify the Background Color.

<th> and <td> Attributes

Attributes Value Description
bgcolor “purple” Specify the Background Color.
colspan “Column_N” Specify the span of there column.
rowspan “Row_N” Specify the span of there Row.

Example : HTML Simple Table.

<html> 
<head>    
<title> HTML Table Examples </title> 
</head> 
<body>    
<!-- Now we are using HTML Table tags -->		
<table border="1px" width="100%">	 
<tr>	  
<td> HTML Table Cell 1 </td>	  
<td> HTML Table Cell 2 </td>	 
</tr>	 
<tr>	  
<td> HTML Table Cell 3 </td>	  
<td> HTML Table Cell 4 </td>	 
</tr>	 
<tr>	  
<td> HTML Table Cell 5 </td>	  
<td> HTML Table Cell 6 </td>	 
</tr>	
</table> 
</body> 
</html>

Output :

HTML Table Cell 1 HTML Table Cell 2
HTML Table Cell 3 HTML Table Cell 4
HTML Table Cell 5 HTML Table Cell 6

HTML Table Some More Examples

Now we are using HTML table heading <th> tag and display table of student.Example : HTML Table using table heading <th> tag.

<html>
<head>
<title> HTML Table using table heading <th> tag Examples </title>
</head>
<body>
<!-- Now we are using HTML Table using table heading
<th> tag -->
<table border="1px" width="100%" bordercolor="#003300">
<tr>
<th> HTML Table Heading 1 ( Name )</th>
<th> HTML Table Heading 2 ( Email_id ) </th>	
<th> HTML Table Heading 3 ( Class ) </th>	 
</tr>	 
<tr>	  
<td> Rahul </td>	  
<td> rahul@phpkida.com </td>	  
<td> B.tech </td>	 
</tr>	 
<tr>	  
<td> Shivani </td>	  
<td> shivani@phpkida.com </td>	  
<td> MCA </td>	 
</tr>	
</table> 
</body> 
</html>

Output :

HTML Table Heading 1 ( Name ) HTML Table Heading 2 ( Email_id ) HTML Table Heading 3 ( Class )
Rahul rahul@phpkida.com B.tech
Shivani shivani@phpkida.com MCA

Here we are using two attributes of table called cellpadding and cellspacing which you will use to adjust the white space in your table cell. Cellspacing defines the width of the border, while cellpadding define the distance between cell borders and the content within. so lets we try using example.

Example : HTML Table using Cellpadding and Cellspacing Attributes.

<html> 
<head>    
<title> HTML Table using Cellpadding and Cellspacing Attributes </title> 
</head> 
<body>    
<!-- Now we are using HTML Table using Cellpadding and Cellspacing Attributes -->		
<table border="1px" width="100%" bordercolor="#003300" cellpadding="5" cellspacing="5">	 
<tr>	  
<th> HTML Table Heading 1 ( Name )</th>	  
<th> HTML Table Heading 2 ( Email_id ) </th>	  
<th> HTML Table Heading 3 ( Class ) </th>	 
</tr>	 
<tr>	  
<td> Rahul </td>	  
<td> rahul@phpkida.com </td>	  
<td> B.tech </td>	 
</tr>	 
<tr>	  
<td> Shivani </td>	  
<td> shivani@phpkida.com </td>	  
<td> MCA </td>	 
</tr>	
</table> 
</body> 
</html>

Output :

HTML Table Heading 1 ( Name ) HTML Table Heading 2 ( Email_id ) HTML Table Heading 3 ( Class )
Rahul rahul@phpkida.com B.tech
Shivani shivani@phpkida.com MCA

Here we are using two attribiutes of td called Colspan and Rowspan. Which are use to merge two or more columns into a single column called Colspan and Similarly merge two or more rows is called rowspan attribute.Example : HTML Table using Colspan and Rowspan Attributes.

<html> 
<head>    
<title> HTML Table using Colspan and Rowspan Attributes </title> 
</head> 
<body>    
<!-- Now we are using HTML Table using Colspan and Rowspan Attributese -->	
<table border="1px" width="100%" bordercolor="#003300">	 
<tr>	  
<th> HTML Table Heading 1 </th>	  
<th> HTML Table Heading 2 </th>	  
<th> HTML Table Heading 3 </th>	 
</tr>	 
<tr>	  
<td> Row 1 Colomn 1 </td>	  
<td> Row 1 Colomn 2 </td>	  
<td rowspan="2"> Row 1 Colomn 3 </td>	 
</tr>  	  
<td> Row 2 Colomn 1 </td>	  
<td rowspan="2"> Row 2 Colomn 2 </td>	 
</tr>  	  
<td> Row 3 Colomn 1 </td>	  
<td> Row 3 Colomn 3 </td>	 
</tr>  	  
<td colspan="3"> Row 4 Colomn 1 </td>	 
</tr>	
</table> 
</body> 
</html>

Output :

HTML Table Heading 1 HTML Table Heading 2 HTML Table Heading 3
Row 1 Colomn 1 Row 1 Colomn 2 Row 1 Colomn 3
Row 2 Colomn 1 Row 2 Colomn 2
Row 3 Colomn 1 Row 3 Colomn 3
Row 4 Colomn 1

Here we are using two attribiutes of Table called height and width. Which are use to define height of table in pixel or percentage and width of table pixel or percentage.Example : HTML Table using height and width Attributes.

<html> 
<head>    
<title> HTML Table using height and width Attributes </title> 
</head> 
<body>     
<!-- Now we are using HTML Table using height and width Attributese -->		
<table border="1px" width="700" height="300" bordercolor="#003300" cellpadding="5" cellspacing="5">	 
<tr>	  
<th> HTML Table Heading 1 ( Name )</th>	  
<th> HTML Table Heading 2 ( Email_id ) </th>	  
<th> HTML Table Heading 3 ( Class ) </th>	 
</tr>	 
<tr>	  
<td> Rahul </td>	  
<td> rahul@phpkida.com </td>	  
<td> B.tech </td>	 
</tr>	 
<tr>	  
<td> Shivani </td>	  
<td> shivani@phpkida.com </td>	  
<td> MCA </td>	 
</tr>	
</table> 
</body> 
</html>

Output :

HTML Table Heading 1 ( Name ) HTML Table Heading 2 ( Email_id ) HTML Table Heading 3 ( Class )
Rahul rahul@phpkida.com B.tech
Shivani shivani@phpkida.com MCA

The caption tags will working as a title tag and display at the top of the table.Example : HTML Table using Table Caption.

<html> 
<head>    
<title> HTML Table using Table Caption </title> 
</head> 
<body>     
<!-- Now we are using HTML Table using Table Caption -->		
<table border="1px" width="500" height="300" bordercolor="#003300" cellpadding="5" cellspacing="5">		
<caption> This is the Table Caption </caption>	 
<tr>	  
<th> HTML Table Heading 1 ( Name )</th>	  
<th> HTML Table Heading 2 ( Email_id ) </th>	  
<th> HTML Table Heading 3 ( Class ) </th>	 
</tr>	 
<tr>	  
<td> Rahul </td>	  
<td> rahul@phpkida.com </td>	  
<td> B.tech </td>	 
</tr>	 
<tr>	  
<td> Shivani </td>	  
<td> shivani@phpkida.com </td>	  
<td> MCA </td>	 
</tr>	
</table> 
</body> 
</html>

Output :

This is the Table Caption
HTML Table Heading 1 ( Name ) HTML Table Heading 2 ( Email_id ) HTML Table Heading 3 ( Class )
Rahul rahul@phpkida.com B.tech
Shivani shivani@phpkida.com MCA

You can also use one table inside another table or You can also use table within table. Not only tables you can also use all the tags of table inside table data tag <td>.Example : HTML Table using Nested Tables.

 
<html> 
<head>    
<title> HTML Table using Nested Tables </title> 
</head> 
<body>     
<!-- Now we are using HTML Table using Nested Tables -->		
<table border="1px" width="100%" bordercolor="#003300">		
<caption> This is the Table Caption </caption>	
<tr>	  
<td> Row 1 colomn 1 </td>	  
<td> Row 1 colomn 2 </td>	  
<td> Row 1 colomn 3 </td>	 
</tr>	 
<tr>	  
<td> Row 2 colomn 1 </td>	  
<td> Row 2 colomn 2 </td>	  
<td> Row 2 colomn 3 ( Here using nested table ).		
<table width="300" bgcolor="#CCCCCC">		 
<tr>		  
<td> Row 1 colomn 1 ( of nested table ) </td>		  
<td> Row 1 colomn 2 ( of nested table ) </td>		 
</tr>		 
<tr>		  
<td> Row 2 colomn 1 ( of nested table ) </td>		  
<td> Row 2 colomn 2 ( of nested table ) </td>		 
</tr>		
</table> 	  
</td>	 
</tr>	 
<tr>	  
<td> Row 3 colomn 1 </td>	  
<td> Row 3 colomn 2 </td>	  
<td> Row 3 colomn 3 </td>	 
</tr>	
</table> 
</body> 
</html>

Output :

Row 1 colomn 1 Row 1 colomn 2 Row 1 colomn 3
Row 2 colomn 1 Row 2 colomn 2 Row 2 colomn 3 ( Here using nested table ).

Row 1 colomn 1 ( of nested table ) Row 1 colomn 2 ( of nested table )
Row 2 colomn 1 ( of nested table ) Row 2 colomn 2 ( of nested table )
Row 3 colomn 1 Row 3 colomn 2 Row 3 colomn 3
About Author

My name is Mukesh Jakhar and I am a Web Application Developer and Software Developer, currently living in Jaipur, India. I have a Master of Computer Application in Computer Science from JNU Jaipur University. I loves to write on technology and programming topics. Apart from this, I love to travel and enjoy the beauty of nature.

Categories
Recently Published Posts

Why Writing is Important

25/09/2022

Is it easier to learn React than Angular?

05/09/2022

6 Tips for Cross-Posting Content On Different Platforms

13/07/2022

Why Cloud Computing Is the Current Technology Fad in 2022?

13/07/2022

How technology is contributing to the Automobile Industry

31/05/2022

Sign up for weekly update

Milkshake is almost ready. If you're interested in testing it out, then sign up below to get exclusive access.