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

Leave a Reply

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

Tools:

Crypto Currency

PHPKIDA provides free online the best real-time crypto market price, news, predictions, index with graphs & historical data for 2000+ coins including bitcoin, ethereum, & altcoins from major cryptocurrency exchanges.

Visite Tool

Icon Generator

PHPKIDA provides free online icon generator. Our icon generator help you to edit, modify, resize and customize icon for your website and applications. Convert to a shap you like add icon border, you can change icon border color, border size, background color, icon shadow, icons color, icon size in your own way and save it as a png image.

Visite Tool

Youtube Video Downloader

PHPKIDA provides Free online YouTube video downloader to download YouTube videos quickly in MP4, 3GP, and more. Search your video and free fast download youtube videos.

Visite Tool

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.