How to use ‘input’ tag In HTML
In this approach, we are using the <input> tag directly within table cells to allow users to input values. This enables the creation of editable fields for specific data entries, such as names and ages, directly within the table structure.
Syntax:
<tr>
<td><input type="text" placeholder="Enter value"></td>
<td>Data</td>
</tr>
Example: The below example uses the <input> tag Directly to Add an input field inside the table cell in HTML.
<!DOCTYPE html>
<html>
<head>
<title>Example 1</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
background-color: #f8f8f8;
color: #333;
}
h1 {
color: #4CAF50;
}
h3 {
margin-bottom: 20px;
}
table {
border-collapse: collapse;
width: 50%;
margin: 20px auto;
}
th,
td {
padding: 10px;
border: 1px solid #ddd;
text-align: left;
}
th {
background-color: #4CAF50;
color: white;
}
input {
padding: 8px;
width: 80%;
box-sizing: border-box;
}
</style>
</head>
<body>
<h1>w3wiki</h1>
<h3>Using <input> tag Directly</h3>
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>
<input type="text"
placeholder="Enter value">
</td>
<td>23</td>
</tr>
<tr>
<td>Gaurav</td>
<td>
<input type="text"
placeholder="Enter value">
</td>
</tr>
</table>
</body>
</html>
Output:
How to Add Input Field inside Table Cell in HTML ?
In HTML, adding input fields inside the table cells can be done to make the application user interactive and useful in the scenarios of building forms, data entry systems, etc.
Below are the approaches to add input field inside a Table Cell in HTML:
Table of Content
- Using ‘input’ tag
- Using data Attribute with JavaScript
Contact Us