Tables in HTML

The HTML tables allow web developers to arrange data like text, images, links, other tables, etc. into rows and columns of cells. In HTML a table is defined by <table> tag, where each table row is defined with the <tr> tag and table data or cell is defined with the <td> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. The example of the table is given below :
<!DOCTYPE html>
<html>
   <body>
	<table>
  		<tr>
			<th>Firstname</th>
			<th>Age</th> 
			<th>Occupation</th>
  		</tr>
  		<tr>
			<td>John Doe</td>
			<td>34</td> 
			<td>Web Developer</td>
  		</tr>
  		<tr>
			<td>Som Dev</td>
			<td>40</td> 
			<td>System Architect</td>
  		</tr>
	</table>
   </body>
</html>
Output :


Firstname   Age    Occupation
John Doe 34 Web Developer
Som Dev 40 System Architect


At the above the table headers are defined within the <th> tag and rows are defined within the <tr> tag, and inside rows, the table data is defined with in the <td> tag.

The attributes used in the <table> tag are as follows :

align : it is used to declare the alignment of the table, weather it is left, right or center of the page. Example :
<table align="center">
   <tr>
	<th>Firstname</th>
	<th>Agge/th> 
        <th>Occupation</th>
   </tr>
   <tr>
	<td>John Doe</td>
	<td>34</td> 
	<td>Web Developer</td>
   </tr>
</table>
Output :


Firstname     Age     Occupation
John Doe      34      Web Developer


width : It is used to specify the Width Size of the Table. The value of width attribute is in the pixels. Exmaple :
<table width="300">
	<tr>
		<th>Firstname</th>
		<th>Age</th> 
		<th>Occupation</th>
        </tr>
  	<tr>
		<td>John Doe</td>
		<td>34</td> 
		<td>Web Developer</td>
  	</tr>
</table>
Output :


Firstname Age Occupation
     John Doe   34        Web Developer


height : it is used to specify the height of the table structure.The value of height attribute is in the pixels. Example :
	<table height="80">
	<tr>
		<th>Firstname</th>
		<th>Age</th> 
		<th>Occupation</th>
  	 </tr>
  	 <tr>
		<td>John Doe</td>
		<td>34</td> 
		<td>Web Developer</td>
   	 </tr>
</table>
Output :


Firstname Age Occupation
John Doe 34 Web Developer


bgcolor : used to specify the Background Color. Example :
<table bgcolor="yellow">
	<tr>
		<th>Firstname</th>
		<th>Age</th> 
		<th>Occupation</th>
 	</tr>
	<tr>
		<td>John Doe</td>
		<td>34</td> 
		<td>Web Developer</td>
	</tr>
</table>
Output :


Firstname Age Occupation
John Doe 34 Web Developer


background : It is used to specify the background image for table. Here the value of background is image url. Example :
<table background="http://4.bp.blogspot.com/-mBxzAW0KQbY/WhK8mioNxmI/AAAAAAAAAgQ/WSZLZ5gRShwzLIGvTr8VYGjyB3Xd_iMXQCK4BGAYYCw/s1600/csnotes_logo.png">
	<tr>
		<th>Firstname</th>
		<th>Age</th> 
		<th>Occupation</th>
	</tr>
	<tr>
		<td>John Doe</td>
		<td>34</td> 
		<td>Web Developer</td>
	</tr>
</table>
Output :


Firstname Age Occupation
John Doe 34 Web Developer


border : It is used to specify the size of border thickness. The value of attribute is in pixels. Example :
<table border="1px">
	<tr>
		<th>Firstname</th>
		<th>Age</th> 
		<th>Occupation</th>
	</tr>
	<tr>
		<td>John Doe</td>
		<td>34</td> 
		<td>Web Developer</td>
	</tr>
</table>
Output :


Firstname Age Occupation
John Doe 34 Web Developer


bordercolor : It is used to specify the color of border. Example :
<table border="1px" bordercolor="red">
	<tr>
		<th>Firstname</th>
		<th>Age</th> 
		<th>Occupation</th>
	</tr>
	<tr>
		<td>John Doe</td>
		<td>34</td> 
		<td>Web Developer</td>
	</tr>
</table>
Output :


Firstname Age Occupation
John Doe 34 Web Developer


cellspacing : used to specify the space between two cell. The value of attribute is in pixels. Example :
<table border="1px" cellspacing="10">
	<tr>
		<th>Firstname</th>
		<th>Age</th> 
		<th>Occupation</th>
	</tr>
	<tr>
		<td>John Doe</td>
		<td>34</td> 
		<td>Web Developer</td>
	</tr>
</table>
Output :


Firstname Age Occupation
John Doe 34 Web Developer


cellpadding : used to specify the space between cell boundary and text. The value of attribute is in pixels. Example :
<table border="1px" cellpadding="10">
	<tr>
		<th>Firstname</th>
		<th>Age</th> 
		<th>Occupation</th>
	</tr>
	<tr>
		<td>John Doe</td>
		<td>34</td> 
		<td>Web Developer</td>
	</tr>
</table>
Output :


Firstname Age Occupation
John Doe 34 Web Developer


The attributes used in the <th> tag are as follows :

bgcolor : Used to specify the background color. Example :
<table border="1px" cellpadding="10">
	<tr>
		<th bgcolor="lightgreen">Firstname</th>
		<th bgcolor="lightgreen">Age</th> 
		<th bgcolor="lightgreen">Occupation</th>
	</tr>
	<tr>
		<td>John Doe</td>
		<td>34</td> 
		<td>Web Developer</td>
	</tr>
</table>
Output :


Firstname Age Occupation
John Doe 34 Web Developer


colspan : Used to specify the span of there column. The value of the attribute is the number of column you want to span under the table header. Example :
<table border="1px" cellpadding="10">
	<tr>
		<th bgcolor="lightgreen" colspan="2">Firstname</th>
		<th bgcolor="lightgreen">Age</th> 
		<th bgcolor="lightgreen">Occupation</th>
	</tr>
	<tr>
		<td>John </td>
		<td>Doe</td>
		<td>34</td> 
		<td>Web Developer</td>
	</tr>
</table>
Output :


Firstname Age Occupation
John Doe 34 Web Developer


rowspan : Used to specify the span of there Row. The value of the attribute is the number of rows you want to span under the table header. Example :
<table border="1px" cellpadding="10">
	<tr>
		<th bgcolor="gray" rowspan="2">Spanned clumn upto two rows</th>
		<td bgcolor="green">Name</td>
		<th bgcolor="green">Age</th> 
		<th bgcolor="green">Occupation</th>
	</tr>
	<tr>
		<td>John Doe</td>
		<td>34</td> 
		<td>Web Developer</td>
	</tr>
</table>
Output :


Spanned clumn upto two rows Name Age Occupation
John Doe 34 Web Developer


The attributes used in the <tr> tag are as follows :

bgcolor : Used to specify the background color. Example :
<table border="1px">
	<tr bgcolor="green">
		<th>Firstname</th>
		<th>Age</th> 
		<th>Occupation</th>
	</tr>
	<tr bgcolor="yellow">
		<td>John Doe</td>
		<td>34</td> 
		<td>Web Developer</td>
	</tr>
</table>
Output :


Firstname Age Occupation
John Doe 34 Web Developer





Next Topic :