HTML Table Tag

HTML Table Tag is used for arranging the data in the form of rows and columns on the web page. It is a very useful feature. One another purpose of using a table is to create a page layout with the use of hidden tables.

Table can be created using <table> element in HTML. Alongwith table element, other elements used are <tr> which refers to a table row, <th> which refers to a table header and <td> which refers to a table cell/column.

Syntax

<table>
	<tr>
	<th>Heading1</th>
	<th>Heading2</th>
	<th>Heading3</th>
	</tr>
	<tr>
	<td>Content1</td>
	<td>Content2</td>
	<td>Content3</td>
	</tr>
</table>

Example

<!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<table border="1">
	<tr>
	<th>Name</th>
	<th>Subject</th>
	<th>Marks</th>
	</tr>
	<tr>
	<td>John</td>
	<td>History</td>
	<td>79</td>
	</tr>
</table>
</body>
</html>

This will produce following result

Name	Subject	Marks
John	History	79

Table Attributes List

The below table contains Table Attributes and their description which is supported by HTML version.

Attribute Name	Attribute Value	Attribute Description
border	0 or 1	refers to whether the table cells have border or not
bgcolor	color-name	refers to background color of the table
cellpadding	pixels	refers to spacing between cell's wall & content
cellspacing	pixels	refers to spacing between cells
width	pixels or %	refers to width of a table
align	left, center or right	refers to alignment of the table
valign	top, middle,bottom	refers to vertical alignment of the table

Above attributes can be better understood by following examples:

border Example

<!DOCTYPE html>
<html>
<head>
<title>border Example</title>
</head>
<body>
<table border="1">
	<tr>
	<th>Name</th>
	<th>Subject</th>
	<th>Marks</th>
	</tr>
	<tr>
	<td>John</td>
	<td>History</td>
	<td>79</td>
	</tr>
</table>
</body>
</html>

This will produce following result

Name	Subject	Marks
John	History	79

bgcolor Example

<!DOCTYPE html>
<html>
<head>
<title>bgcolor Example</title>
</head>
<body>
<table border="1" bgcolor="FF00FF">
	<tr>
	<th>Name</th>
	<th>Subject</th>
	<th>Marks</th>
	</tr>
	<tr>
	<td>John</td>
	<td>History</td>
	<td>79</td>
	</tr>
</table>
</body>
</html>

This will produce following result

Name	Subject	Marks
John	History	79

cellpadding Example

<!DOCTYPE html>
<html>
<head>
<title>cellpadding Example</title>
</head>
<body>
<table border="1" cellpadding="6">
	<tr>
	<th>Name</th>
	<th>Subject</th>
	<th>Marks</th>
	</tr>
	<tr>
	<td>John</td>
	<td>History</td>
	<td>79</td>
	</tr>
</table>
</body>
</html>

This will produce following result

Name	Subject	Marks
John	History	79

cellspacing Example

<!DOCTYPE html>
<html>
<head>
<title>cellspacing Example</title>
</head>
<body>
<table border="1" cellspacing="8">
	<tr>
	<th>Name</th>
	<th>Subject</th>
	<th>Marks</th>
	</tr>
	<tr>
	<td>John</td>
	<td>History</td>
	<td>79</td>
	</tr>
</table>
</body>
</html>

This will produce following result

Name	Subject	Marks
John	History	79

width Example

<!DOCTYPE html>
<html>
<head>
<title>width Example</title>
</head>
<body>
<table border="1" width="500">
	<tr>
	<th>Name</th>
	<th>Subject</th>
	<th>Marks</th>
	</tr>
	<tr>
	<td>John</td>
	<td>History</td>
	<td>79</td>
	</tr>
</table>
</body>
</html>

This will produce following result

Name	Subject	Marks
John	History	79

align Example

<!DOCTYPE html>
<html>
<head>
<title>align Example</title>
</head>
<body>
<table border="1" align="center">
	<tr>
	<th>Name</th>
	<th>Subject</th>
	<th>Marks</th>
	</tr>
	<tr>
	<td>John</td>
	<td>History</td>
	<td>79</td>
	</tr>
</table>
</body>
</html>

This will produce following result

Name	Subject	Marks
John	History	79

valign Example

<!DOCTYPE html>
<html>
<head>
<title>valign Example</title>
</head>
<body>
<table border="1" valign="bottom">
	<tr>
	<th>Name</th>
	<th>Subject</th>
	<th>Marks</th>
	</tr>
	<tr style="height:100px">
	<td valign="top">John</td>
	<td valign="middle">History</td>
	<td valign="bottom">79</td>
	</tr>
</table>
</body>
</html>

This will produce following result