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

AttributesValueDescription
alignLeft,Right,CenterDeclared 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

AttributesValueDescription
bgcolor“purple”Specify the Background Color.

<th> and <td> Attributes

AttributesValueDescription
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 1HTML Table Cell 2
HTML Table Cell 3HTML Table Cell 4
HTML Table Cell 5HTML 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 )
Rahulrahul@phpkida.comB.tech
Shivanishivani@phpkida.comMCA

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 )
Rahulrahul@phpkida.comB.tech
Shivanishivani@phpkida.comMCA

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 1HTML Table Heading 2HTML Table Heading 3
Row 1 Colomn 1Row 1 Colomn 2Row 1 Colomn 3
Row 2 Colomn 1Row 2 Colomn 2
Row 3 Colomn 1Row 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 )
Rahulrahul@phpkida.comB.tech
Shivanishivani@phpkida.comMCA

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 )
Rahulrahul@phpkida.comB.tech
Shivanishivani@phpkida.comMCA

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 1Row 1 colomn 2Row 1 colomn 3
Row 2 colomn 1Row 2 colomn 2Row 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 1Row 3 colomn 2Row 3 colomn 3

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts: You may like

html5 video tag Complete Guide

How to get multiple selected values of select box in php

Responsive contact form html css

How to increase size of radio button

How Get the value of checked checkbox

complete user registration form validation using java script with example

how to create on mouse hover effect on image using css3

Simple Drop down css menu

Html definition list

Html unordered list

PHPKIDA Offering Free Tools:

INSTA DOWNLOADER

Free online tool to download Instagram videos, photos and save Instagram videos, photos to your device. It's free & easy to use.

Download Now

CURRENCY CONVERTER

Our real time currency converter calculator will convert your money based on current values from around the world. It's free & easy to use.

Convert Now

ROBOST.TXT GEN.

Create robots txt file that help search engines to crawling and indexing your site with help of our free online Robots.txt Generator tool.

Create Now

HTML MINIFIER

Free online tool to minify or compress html code and reduce the size of html code in few clicks. It's free & easy to use.

Minify Now

CSS MINIFIER

Free online tool to minify or compress css code and reduce the size of css code in few clicks. It's free & easy to use.

Minify Now

JAVASCRIPT MINIFIER

Free online tool to minify or compress javascript code and reduce the size of javascript code in few clicks. It's free & easy to use.

Minify Now

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.