Add Checkbox in HTML Table
In this method, we will add checkboxes to each row of the table using plain HTML.
HTML
<!DOCTYPE html> <html> <head> <title>Table with Checkboxes</title> <style> table { margin: auto; } </style> </head> <body> <table border="1"> <tr> <th>Select</th> <th>Name</th> <th>Email</th> </tr> <tr> <td><input type="checkbox" name="select"></td> <td>XYZ</td> <td>xyz@w3wiki.org</td> </tr> <tr> <td><input type="checkbox" name="select"></td> <td>ABC</td> <td>abc@w3wiki.org</td> </tr> </table> </body> </html> |
Output:
Explanation
- We add a new column with the heading “Select” to accommodate the checkboxes.
- Inside each row, under the “Select” column, we insert an
<input>element with thetypeattribute set to “checkbox”. - The
nameattribute is set to “select” for all checkboxes, but you can use different names if needed for form submission or JavaScript manipulation.
How to Add Checkbox in HTML Table ?
Adding checkboxes to an HTML table can be useful for various purposes, such as selecting multiple rows for batch processing or toggling the state of individual items. In this article, we will explore two methods to add checkboxes to an HTML table i.e. using basic HTML and JavaScript for dynamic interaction.