codescracker


html

HTML Tables



« Previous Tutorial Next Tutorial »


You can use table to organize your date in the form of rows and columns.

HTML Table Example

S.N. Name Mark Percentage
1 Vikrant 890 89.00%
2 Ravi 901 90.10%
3 Rajat 903 90.30%
4 Deepak 883 88.30%

Define HTML Tables

Here is an example demonstrates how to create table on the web page using HTML.

<!DOCTYPE html>
<html>
<head>
	<title>HTML Table Example</title>
</head>
<body>

<table style="width:100%;">
<tr>
	<td>1</td>
	<td>Vikrant</td>
	<td>890</td>
	<td>89.00%</td>
</tr>
<tr>
	<td>2</td>
	<td>Ravi</td>
	<td>901</td>
	<td>90.10%</td>
</tr>
<tr>
	<td>3</td>
	<td>Rajat</td>
	<td>903</td>
	<td>90.30%</td>
</tr>
<tr>
	<td>4</td>
	<td>Deepak</td>
	<td>883</td>
	<td>88.30%</td>
</tr>
</table>

</body>
</html>

Here is the sample output produced by the above HTML table example code:

html table

Let's explain the above example:

HTML Table with Border Attribute

You can use border attribute to add border for the table. Let's look at the following example:

<!DOCTYPE html>
<html>
<head>
	<title>HTML Table Example</title>
</head>
<body>

<table border="3" style="width:100%;">
<tr>
	<td>1</td>
	<td>Vikrant</td>
	<td>890</td>
	<td>89.00%</td>
</tr>
<tr>
	<td>2</td>
	<td>Ravi</td>
	<td>901</td>
	<td>90.10%</td>
</tr>
<tr>
	<td>3</td>
	<td>Rajat</td>
	<td>903</td>
	<td>90.30%</td>
</tr>
<tr>
	<td>4</td>
	<td>Deepak</td>
	<td>883</td>
	<td>88.30%</td>
</tr>
</table>

</body>
</html>

It will display the following result:

html table border

Note - Here, the HTML border attribute is a way out of HTML standard. Therefore, it is better to use CSS

Therefore to add borders, use the CSS border property. Let's look at the following example:

<!DOCTYPE html>
<html>
<head>
	<title>HTML Table Example</title>
	<style>
		table, td
		{
			border: 3px solid green;
		}
	</style>
</head>
<body>

<table style="width:100%;">
<tr>
	<td>1</td>
	<td>Vikrant</td>
	<td>890</td>
	<td>89.00%</td>
</tr>
<tr>
	<td>2</td>
	<td>Ravi</td>
	<td>901</td>
	<td>90.10%</td>
</tr>
<tr>
	<td>3</td>
	<td>Rajat</td>
	<td>903</td>
	<td>90.30%</td>
</tr>
<tr>
	<td>4</td>
	<td>Deepak</td>
	<td>883</td>
	<td>88.30%</td>
</tr>
</table>

</body>
</html>

It will display the following result:

html border using css

HTML Table with Collapsed Borders

Use border-collapse to collapse the table border. Here is an example:

<!DOCTYPE html>
<html>
<head>
	<title>HTML Table Example</title>
	<style>
		table, td
		{
			border: 5px solid cyan;
			border-collapse:collapse;
		}
	</style>
</head>
<body>

<table style="width:100%;">
<tr>
	<td>1</td>
	<td>Vikrant</td>
	<td>890</td>
	<td>89.00%</td>
</tr>
<tr>
	<td>2</td>
	<td>Ravi</td>
	<td>901</td>
	<td>90.10%</td>
</tr>
<tr>
	<td>3</td>
	<td>Rajat</td>
	<td>903</td>
	<td>90.30%</td>
</tr>
<tr>
	<td>4</td>
	<td>Deepak</td>
	<td>883</td>
	<td>88.30%</td>
</tr>
</table>

</body>
</html>

It will display the following result:

html border collapse

HTML Table with Cell Padding

Cell padding determines the space between the cell content and its borders. Therefore use padding property to add padding. Let's look at the following example:

<!DOCTYPE html>
<html>
<head>
	<title>HTML Table Example</title>
	<style>
		table, td
		{
			border: 5px solid red;
			border-collapse:collapse;
		}
		td
		{
			padding:8px;
		}
	</style>
</head>
<body>

<table style="width:100%;">
<tr>
	<td>1</td>
	<td>Vikrant</td>
	<td>890</td>
	<td>89.00%</td>
</tr>
<tr>
	<td>2</td>
	<td>Ravi</td>
	<td>901</td>
	<td>90.10%</td>
</tr>
<tr>
	<td>3</td>
	<td>Rajat</td>
	<td>903</td>
	<td>90.30%</td>
</tr>
<tr>
	<td>4</td>
	<td>Deepak</td>
	<td>883</td>
	<td>88.30%</td>
</tr>
</table>

</body>
</html>

It will display the following result:

html border cell padding

HTML Table Headings

Use <th> tag to define headings for the table. Generally table headings are bold and centered aligned. Here is an example:

<!DOCTYPE html>
<html>
<head>
	<title>HTML Table Example</title>
	<style>
		table, th, td
		{
			border: 5px solid red;
			border-collapse:collapse;
		}
		th, td
		{
			padding:8px;
		}
	</style>
</head>
<body>

<table style="width:100%;">
<tr>
	<th>S.N.</th>
	<th>Name</th>
	<th>Mark</th>
	<th>Percentage</th>
</tr>
<tr>
	<td>1</td>
	<td>Vikrant</td>
	<td>890</td>
	<td>89.00%</td>
</tr>
<tr>
	<td>2</td>
	<td>Ravi</td>
	<td>901</td>
	<td>90.10%</td>
</tr>
<tr>
	<td>3</td>
	<td>Rajat</td>
	<td>903</td>
	<td>90.30%</td>
</tr>
<tr>
	<td>4</td>
	<td>Deepak</td>
	<td>883</td>
	<td>88.30%</td>
</tr>
</table>

</body>
</html>

It will display the following result:

html table headings

To left-align the table headings, use the CSS text-align property. Let's look at the following example:

<!DOCTYPE html>
<html>
<head>
	<title>HTML Table Example</title>
	<style>
		table, th, td
		{
			border: 5px solid green;
			border-collapse:collapse;
		}
		th, td
		{
			padding:8px;
		}
		th
		{
			text-align:left;
		}
	</style>
</head>
<body>

<table style="width:100%;">
<tr>
	<th>S.N.</th>
	<th>Name</th>
	<th>Mark</th>
	<th>Percentage</th>
</tr>
<tr>
	<td>1</td>
	<td>Vikrant</td>
	<td>890</td>
	<td>89.00%</td>
</tr>
<tr>
	<td>2</td>
	<td>Ravi</td>
	<td>901</td>
	<td>90.10%</td>
</tr>
<tr>
	<td>3</td>
	<td>Rajat</td>
	<td>903</td>
	<td>90.30%</td>
</tr>
<tr>
	<td>4</td>
	<td>Deepak</td>
	<td>883</td>
	<td>88.30%</td>
</tr>
</table>

</body>
</html>

It will display the following result:

html table headings align

HTML Table with Border Spacing

Border spacing in HTML, determines the space between the cells. Use border-spacing property to set border spacing for the table.

Let's look at the following example:

<!DOCTYPE html>
<html>
<head>
	<title>HTML Table Example</title>
	<style>
		table, th, td
		{
			border: 5px solid red;
		}
		table
		{
			border-spacing: 15px;
		}
		th, td
		{
			padding:5px;
		}
		th
		{
			text-align:left;
		}
	</style>
</head>
<body>

<table style="width:100%;">
<tr>
	<th>S.N.</th>
	<th>Name</th>
	<th>Mark</th>
	<th>Percentage</th>
</tr>
<tr>
	<td>1</td>
	<td>Vikrant</td>
	<td>890</td>
	<td>89.00%</td>
</tr>
<tr>
	<td>2</td>
	<td>Ravi</td>
	<td>901</td>
	<td>90.10%</td>
</tr>
<tr>
	<td>3</td>
	<td>Rajat</td>
	<td>903</td>
	<td>90.30%</td>
</tr>
<tr>
	<td>4</td>
	<td>Deepak</td>
	<td>883</td>
	<td>88.30%</td>
</tr>
</table>

</body>
</html>

It will display the following result:

html table border spacing

Table Cells that Span Many Columns

Use colspan attribute to make a cell span more than one columns. Let's look at the following example:

<!DOCTYPE html>
<html>
<head>
	<title>HTML Table Example</title>
	<style>
		table, th, td
		{
			border: 3px solid green;
			border-collapse: collapse;
		}
		th, td
		{
			padding: 5px;
			text-align: left;    
		}
	</style>
</head>
<body>

<h2>Cell that spans two columns:</h2>
<table style="width:100%">
<tr>
	<th>Company</th>
	<th colspan="2">Phone</th>
</tr>
<tr>
	<td>Google</td>
	<td>(212) 565-0000</td>
	<td>+1 650 253 0000</td>
</tr>
</table>

</body>
</html>

It will display the following result:

html table spanning many columns

Table Cells that Span Many Rows

Use rowspan attribute to make a cell span more than one row. Let's look at the following example:

<!DOCTYPE html>
<html>
<head>
	<title>HTML Table Example</title>
	<style>
		table, th, td
		{
			border: 3px solid green;
			border-collapse: collapse;
		}
		th, td
		{
			padding: 5px;
			text-align: left;    
		}
	</style>
</head>
<body>

<h2>Cell that spans two rows:</h2>
<table style="width:100%">
<tr>
	<th>Company</th>
	<th>Google</th>
</tr>
<tr>
	<th rowspan="2">Phone</th>
	<td>(212) 565-0000</td>
</tr>
<tr>
	<td>+1 650 253 0000</td>
</tr>
</table>

</body>
</html>

It will display the following result:

html table spanning multiple rows

HTML Table With a Caption

Use <caption> tag to add caption to the table. Let's look at the following example:

<!DOCTYPE html>
<html>
<head>
	<title>HTML Table Example</title>
	<style>
		table
		{
			border-spacing:5px;
		}
		table, th, td
		{
			border: 5px solid green;
			border-collapse:collapse;
		}
		th, td
		{
			padding:8px;
		}
		th
		{
			text-align:left;
		}
	</style>
</head>
<body>

<table style="width:100%;">
<caption>Students Record</caption>
<tr>
	<th>S.N.</th>
	<th>Name</th>
	<th>Mark</th>
	<th>Percentage</th>
</tr>
<tr>
	<td>1</td>
	<td>Vikrant</td>
	<td>890</td>
	<td>89.00%</td>
</tr>
<tr>
	<td>2</td>
	<td>Ravi</td>
	<td>901</td>
	<td>90.10%</td>
</tr>
<tr>
	<td>3</td>
	<td>Rajat</td>
	<td>903</td>
	<td>90.30%</td>
</tr>
<tr>
	<td>4</td>
	<td>Deepak</td>
	<td>883</td>
	<td>88.30%</td>
</tr>
</table>

</body>
</html>

It will display the following result:

html table caption

HTML Fancy/Stylish/interactive Table

Let's look at the following example to make a stylish/interactive table:

<!DOCTYPE html>
<html>
<head>
	<title>HTML Table Example</title>
	<style>
		table
		{
			border-spacing:5px;
		}
		table, th, td
		{
			border:5px solid silver;
			border-collapse:collapse;
		}
		th, td
		{
			padding:8px;
		}
		th
		{
			text-align:left;
			padding:15px;
		}
		table tr:nth-child(even)
		{
			background-color: black;
			color:white;
		}
		table tr:nth-child(odd)
		{
			background-color: green;
			color:white;
		}
		table th
		{
			color: white;
			background-color: red;
		}
	</style>
</head>
<body>

<table style="width:100%;">
<caption>Students Record</caption>
<tr>
	<th>S.N.</th>
	<th>Name</th>
	<th>Mark</th>
	<th>Percentage</th>
</tr>
<tr>
	<td>1</td>
	<td>Vikrant</td>
	<td>890</td>
	<td>89.00%</td>
</tr>
<tr>
	<td>2</td>
	<td>Ravi</td>
	<td>901</td>
	<td>90.10%</td>
</tr>
<tr>
	<td>3</td>
	<td>Rajat</td>
	<td>903</td>
	<td>90.30%</td>
</tr>
<tr>
	<td>4</td>
	<td>Deepak</td>
	<td>883</td>
	<td>88.30%</td>
</tr>
</table>

</body>
</html>

Here is the sample output of the above HTML fancy/interactive/stylish table example code:

html interactive fancy table

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test