Adding automatic serial number to an HTML table is a common requirement for displaying data in a structured format. Serial numbers help users to easily identify and refer to individual rows in a table. In this article, we will discuss two methods to add serial numbers to an HTML table i.e. using HTML and using JavaScript for dynamic tables.
Add Automatic Serial Number in HTML Table
In this approach, we will manually add serial numbers to each row in the table using HTML and style the table using CSS.
HTML
<!DOCTYPE html> <html>
<head>
<title>Serial Number in HTML Table</title>
<style>
table {
margin: auto;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Serial Number</th>
<th>Name</th>
<th>Email</th>
</tr>
<tr>
<td>1</td>
<td>xyz</td>
<td>xyz@geeksforgeeks.org</td>
</tr>
<tr>
<td>2</td>
<td>xyz</td>
<td>xyz@geeksforgeeks.org</td>
</tr>
<tr>
<td>3</td>
<td>xyz</td>
<td>xyz@geeksforgeeks.org</td>
</tr>
<tr>
<td>4</td>
<td>xyz</td>
<td>xyz@geeksforgeeks.org</td>
</tr>
<tr>
<td>5</td>
<td>xyz</td>
<td>xyz@geeksforgeeks.org</td>
</tr>
<tr>
<td>6</td>
<td>xyz</td>
<td>xyz@geeksforgeeks.org</td>
</tr>
</table>
</body>
</html>
|
Output:
Explanation
- In this example, we simply add a new column for the serial number in the table header (<th>) and then manually number each row in the table body (<td>).
- This method is straightforward but not ideal for dynamic tables where rows can be added or removed.
Add Automatic Serial Number in HTML Table using JavaScript (for Dynamic Tables)
For dynamic tables, where rows can be added or removed, it’s more efficient to use JavaScript to automatically generate serial numbers.
Example:
HTML
<!DOCTYPE html> <html>
<head>
<title>Dynamic Serial Number in HTML Table</title>
<style>
table {
margin: auto;
}
#pagination {
text-align: center;
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 10px;
}
</style>
</head>
<body>
<table id="myTable">
<tr>
<th>Serial Number</th>
<th>Name</th>
<th>Email</th>
</tr>
</table>
<script>
const data = [
{ name: "xyz", email: "xyz@geeksforgeeks.org" },
{ name: "xyz", email: "xyz@geeksforgeeks.org" },
{ name: "xyz", email: "xyz@geeksforgeeks.org" },
{ name: "xyz", email: "xyz@geeksforgeeks.org" },
{ name: "xyz", email: "xyz@geeksforgeeks.org" },
{ name: "xyz", email: "xyz@geeksforgeeks.org" }
];
// Function to display the table with serial numbers
function displayTable() {
const table = document.getElementById("myTable");
// Clear existing table rows except the header
table.innerHTML = `
<tr>
<th>Serial Number</th>
<th>Name</th>
<th>Email</th>
</tr>
`;
// Add new rows to the table with serial numbers
data.forEach((item, index) => {
const row = table.insertRow();
const serialCell = row.insertCell(0);
const nameCell = row.insertCell(1);
const emailCell = row.insertCell(2);
serialCell.innerHTML = index + 1;
nameCell.innerHTML = item.name;
emailCell.innerHTML = item.email;
});
}
// Initial display of the table
displayTable();
</script>
</body>
</html>
|
Output:
Explanation
- In this example, we use JavaScript to dynamically create table rows based on the data array. Each row includes a serial number, which is automatically generated based on the index of the item in the array (plus one, since indices start at 0).
- The displayTable function first clears any existing rows in the table (except the header) and then iterates over the data array, creating a new row for each item with the corresponding serial number.
- This method is more flexible and suitable for dynamic tables where the number of rows can change.