How to use HTML only In HTML
In this approach, a drop-down list will be created using only in-built HTML tags. It will be a static dropdown list where options can be added only during the creation of the drop-down.
- select tag used to create the drop down.
- option tag used to create choices inside the drop down.
Example: This example describes the implementation of a drop down list using only HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Drop Down List in Table Cell Using HTML/CSS
</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<table>
<tr>
<th>Header Text 1</th>
<th>Header Text 2</th>
</tr>
<tr>
<td>
<select>
<option value="optionText1">
Option Text 1
</option>
<option value="optionText2">
Option Text 2
</option>
<option value="optionText3">
Option Text 3
</option>
</select>
</td>
<td>Cell Text</td>
</tr>
</table>
</body>
</html>
/* style.css*/
table {
width: 80vh;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
width: 35vh;
}
tr{
background-color: cadetblue;
color: white;
text-transform: uppercase;
}
select {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f1f1f1;
font-size: 16px;
cursor: pointer;
outline: none;
width: 35vh;
text-align: center;
}
select:hover {
background-color: #e0e0e0;
}
select:focus {
border-color: #214974;
box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, 0.25);
}
Output:
OUTPUT FOR DROPDOWN CREATED INSIDE A TABLE CELL USING HTML/CSS
How to Add Drop Down List in Table Cell ?
Drop-downs are the user interface elements. Drop Down List is used to select one out of various options. This article focuses on creating a drop down list in the table cell which helps in selecting the choices directly from the table itself.
Below are the approaches to add a Drop Down List in a Table Cell:
Table of Content
- Using HTML only
- Using JavaScript