Table of Contents
Learn how to short HTML Table | Shorting a Table by Ascending or Descending Order in HTML
Sorted data help the user to understand the data better, If this data is too large in rows and columns, this is necessary to keep the data sorted. In HTML you can short tables by using Javascript so the following is an example of sorting the table of HTML.
Example
<!DOCTYPE html> <html> <head> <title>Sorting of Table in HTML</title> <style> th, td { text-align: left; padding: 10px; font-size:20px; } tr:nth-child(even) { background-color: #2596be; } table { border: 2px solid #ddd; border-spacing: 2; width: 50%; } </style> </head> <body> <table id="meraTable"> <tr> <th>My Full Name</th> <th>My Place</th> </tr> <tr> <td>Ram Prakash</td> <td>Muzaffarnagar</td> </tr> <tr> <td>Dina Nath</td> <td>Rurkee</td> </tr> <tr> <td>Tara Vati</td> <td>Almaspur</td> </tr> <tr> <td>Tara Vati</td> <td>Almaspur</td> </tr> <tr> <td>Ramu Kumar</td> <td>Germany</td> </tr> <tr> <td>Mona Rani</td> <td>Dorala</td> </tr> <tr> <td>Amina Rani</td> <td>Dorala</td> </tr> </table> <script> var tble, rows, switchingTable, shouldSwitch, i, x, y; tble = document.getElementById("meraTable"); switchingTable = true; while (switchingTable) { switchingTable = false; rows = tble.rows; for (i = 1; i < (rows.length - 1); i++) { shouldSwitch = false; x = rows[i].getElementsByTagName("TD")[0]; y = rows[i + 1].getElementsByTagName("TD")[0]; if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) { shouldSwitch = true; break; } } if (shouldSwitch) { rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); switchingTable = true; } } </script> </body> </html>
Output
Ravindra is Web & Mobile application designer and developer. He is experienced guy in web & mobile app designing and development. He is a tech blogger too.