Automatic serial number in HTML table - CSS Counter

Here we will discuss how to get serial number automatically in a column in the html table. CSS counters are “variables” maintained by CSS whose values can be incremented by CSS rules (to track how many times they are used). Counters let you adjust the appearance of content based on its placement in the document.

Program :

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		body
		{
		    counter-reset: Serial;          
		}

		table
		{
		    border-collapse: separate;
		}

		tr td:first-child:before
		{
		  counter-increment: Serial;      
		  content: counter(Serial); 
		}
	</style>
</head>
<body>
	<table border="1" cellpadding="10">
		<tr>
			<th>Sl.No</th>
			<th>Name</th>
			<th>Age</th>
		</tr>
		<tr>
			<td></td>
			<td>John</td>
			<td>30</td>
		</tr>
		<tr>
			<td></td>
			<td>Sam</td>
			<td>28</td>
		</tr>
		<tr>
			<td></td>
			<td>Siya</td>
			<td>25</td>
		</tr>
	</table>
</body>
</html>

Following are the properties of CSS counters :

counter-reset – Creates or resets a counter
counter-increment – Increments a counter value
content – Inserts generated content
counter() or counters() function – Adds the value of a counter to an element

Output :

We can use this same for any other html element like div, span, heading, etc. Let’s have a look at div

Program :

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		body
		{
		    counter-reset: Serial;    
		}

		div::before {
		  counter-increment: Serial;
		  content: "Section " counter(Serial) ": ";
		}
	</style>
</head>
<body style="margin:20%">
	
	<h3>Serial Number using CSS Counters:</h3>
	<div>Php Programs</div>
	<div>CSS Examples</div>
	<div>jQuery Programs</div>

</body>
</html>

Output :

To use multiple counters in same page, specify the counter name in the counter-reset property without delimiters as counter-reset: Serial Section;

CSS Code :

body
{
   counter-reset: Serial Section;      
}

table
{
    border-collapse: separate;
}

tr td:first-child:before
{
    counter-increment: Serial;      
    content: counter(Serial); 
}

div::before {
    counter-increment: Section;
    content: "Section " counter(Section) ": ";
}

For more CSS programs Click here

To know more about Css Counters Click here

Post Views: 16,401