JavaScript | JSON HTML
Last Updated :
13 Sep, 2022
Improve
HTML table: In the HTML, tables are defined by <table> tag, table's header are defined by <th> tag and by default table's header are placed in center and it is bold and row of the table is defined by <tr> and the data or information of the row is defined by <td> tag.
Below code shows the demonstration of the HTML table: Code #1:
<!DOCTYPE html>
<html>
<body>
<table style="width:50%">
<tr>
<th>First_name</th>
<th>Last_name</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html><html><body> <table style="width:50%"> <tr> <th>First_name</th> <th>Last_name</th> <th>Age</th> </tr> <tr> <td>Priya</td> <td>Sharma</td> <td>24</td> </tr> <tr> <td>Arun</td> <td>Singh</td> <td>32</td> </tr> <tr> <td>Sam</td> <td>Watson</td> <td>41</td> </tr></table> </body></html>Output: 
Dynamic HTML table: The insertRow() method put an empty <tr> into the table that create a new row in that defined table. The deleteRow() method is used to remove the row from the defined table
Code #2:
<html>
<head>
<style>
</style>
</head>
<body>
<p>Click the button to perform the function:</p>
<table id="tablecreate">
<tr>
<th>First_Column</th>
<th>Second_Column</th>
</tr>
</table>
<br>
<button onclick="create()">Create</button>
<script>
function create() {
var table = document.getElementById("tablecreate");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "New Column-1";
cell2.innerHTML = "New Column-2";
}
</script>
</body>
</html>
<html><head> <style> </style></head><body> <p>Click the button to perform the function:</p> <table id="tablecreate"> <tr> <th>First_Column</th> <th>Second_Column</th> </tr> </table> <br> <button onclick="create()">Create</button> <script> function create() { var table = document.getElementById("tablecreate"); var row = table.insertRow(0); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); cell1.innerHTML = "New Column-1"; cell2.innerHTML = "New Column-2"; } </script></body></html>Output: Before clicking the create button- 
After one time clicking the create button- 
After two times clicking the create button- 
HTML drop down list: A dropdown menu allows the user to choose the predefined option. It is basically a toggleable menu. For creating a drop down menu we need basics HTML, CSS and JavaScript. Note: For getting complete result of this effect, All the below three section have to be combined.
- HTML Section: The <button>, <a> and <p> tags are used to create the dropdown menu. Example:
<div class="dropdown">
<button onclick="dropdown()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a href="#">Option 1</a>
<a href="#">Option 2</a>
</div>
</div>- CSS Section: The .dropbtn is a button for the toggleable menu, background-color set the button color, .dropbtn:hover set the hover effect on the button, position: relative; will appear the dropdown menu under the dropdown button to maintain the content using .dropdown-content. Example:
.dropbtn {
background-color: white;
padding: 16px;
}
.dropbtn:hover, .dropbtn:focus {
background-color: black;
color:white;
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
background-color: grey;
min-width: 97px;
overflow: auto;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}- JavaScript: Example:
function dropdown() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
Code #3:
<html>
<head>
<style>
.dropbtn {
background-color: white;
padding: 16px;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: black;
color: white;
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
background-color: grey;
min-width: 97px;
overflow: auto;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
display: block;
}
.dropdown a:hover {
background-color: #ddd;
}
.show {
display: block;
}
</style>
<script>
function dropdown() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</head>
<body>
<p>Click the Dropdown button to see the options:</p>
<div class="dropdown">
<button onclick="dropdown()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a href="#">Option 1</a>
<a href="#">Option 2</a>
</div>
</div>
</body>
</html>
<html><head> <style> .dropbtn { background-color: white; padding: 16px; } .dropbtn:hover, .dropbtn:focus { background-color: black; color: white; } .dropdown { position: relative; } .dropdown-content { display: none; position: absolute; background-color: grey; min-width: 97px; overflow: auto; } .dropdown-content a { color: black; padding: 12px 16px; display: block; } .dropdown a:hover { background-color: #ddd; } .show { display: block; } </style> <script> function dropdown() { document.getElementById("myDropdown").classList.toggle("show"); } window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } </script></head><body> <p>Click the Dropdown button to see the options:</p> <div class="dropdown"> <button onclick="dropdown()" class="dropbtn">Dropdown</button> <div id="myDropdown" class="dropdown-content"> <a href="#">Option 1</a> <a href="#">Option 2</a> </div> </div></body></html>Output: Before clicking the dropdown button- 
After clicking the dropdown button- 
