HTML Table
HTML Table important things to remember
<th> table header
<td>table data
<tr> table row
<!DOCTYPE html>
<html>
<head>
<title>HTML Table By Pranay</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th><label for="inputid">Textbox</label>
<th><label for="inputchkboxid">Select records</label>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td><input type="text" id="inputid" name="inputid" required pattern="^[a-zA-Z]+$"</td>
<td><input type="checkbox" id="inputchkboxid" name="inputchkboxid">
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td><input type="text" id="inputid" name="inputid" required pattern="^[a-zA-Z]+$"</td>
<td><input type="checkbox" id="inputchkboxid" name="inputchkboxid">
</tr>
</table>
<script>
</script>
</body>
</head>
</html>
The output of the above code is
_______________________________________________________________________________
HTML Table By Pranay
_______________________________________________________________________________
<!DOCTYPE html>
<html>
<head>
<title>Prany HTML5 Table</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
<body>
<table style="width:100%">
<table style="width:100%">
<tr>
<th>Name</th>
<th>Designation</th>
<th><label for="cars">Select Car</label></th>
</tr>
<tr>
<td>pranay tiwari</td>
<td>Lead Consultant</td>
<td> <select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select></td>
</tr>
</table>
<script>
</script>
</body>
</head>
</html>
_________________________________________________________________________________
Prany HTML5 Table
_________________________________________________________________________________
<!DOCTYPE html>
<!--Dynamic table apps-->
<html>
<head>
<title></title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table id="myTable">
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Occupation and Employer</th>
<th>VERIFY and Employer</th>
<th>Add</th>
<tr>
<td><input type="text" id="txtName" /></td>
<td><input type="text" id="txtAge" /></td>
<td><input type="text" id="txtGender" /></td>
<td><input type="text" id="txtOccupation" /></td>
<td><input type="text" id="txtverify" /></td>
<td><input type="button" id="btnAdd" class="button-add" onClick="insertRow()" value="add"></input></td>
</tr>
</table>
<script>
function insertRow()
{
var index = 1;
var table=document.getElementById("myTable");
var row=table.insertRow(table.rows.length);
var cell1=row.insertCell(0);
var t1=document.createElement("input");
t1.id = "txtName"+index;
cell1.appendChild(t1);
var cell2=row.insertCell(1);
var t2=document.createElement("input");
t2.id = "txtAge"+index;
cell2.appendChild(t2);
var cell3=row.insertCell(2);
var t3=document.createElement("input");
t3.id = "txtGender"+index;
cell3.appendChild(t3);
var cell4=row.insertCell(3);
var t4=document.createElement("input");
t4.id = "txtOccupation"+index;
cell4.appendChild(t4);
var cell5=row.insertCell(4);
var t5=document.createElement("input");
t5.id = "txtOccupation"+index;
cell5.appendChild(t5);
index++;
}
</script>
</body>
</html>
_________________________________________________________________________________
_________________________________________________________________________
<th> table header
<td>table data
<tr> table row
<!DOCTYPE html>
<html>
<head>
<title>HTML Table By Pranay</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th><label for="inputid">Textbox</label>
<th><label for="inputchkboxid">Select records</label>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td><input type="text" id="inputid" name="inputid" required pattern="^[a-zA-Z]+$"</td>
<td><input type="checkbox" id="inputchkboxid" name="inputchkboxid">
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td><input type="text" id="inputid" name="inputid" required pattern="^[a-zA-Z]+$"</td>
<td><input type="checkbox" id="inputchkboxid" name="inputchkboxid">
</tr>
</table>
<script>
</script>
</body>
</head>
</html>
The output of the above code is
_______________________________________________________________________________
| Firstname | Lastname | Age | ||
|---|---|---|---|---|
| Jill | Smith | 50 | ||
| Eve | Jackson | 94 |
<!DOCTYPE html>
<html>
<head>
<title>Prany HTML5 Table</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
<body>
<table style="width:100%">
<table style="width:100%">
<tr>
<th>Name</th>
<th>Designation</th>
<th><label for="cars">Select Car</label></th>
</tr>
<tr>
<td>pranay tiwari</td>
<td>Lead Consultant</td>
<td> <select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select></td>
</tr>
</table>
<script>
</script>
</body>
</head>
</html>
_________________________________________________________________________________
| Name | Designation | |
|---|---|---|
| pranay tiwari | Lead Consultant |
<!DOCTYPE html>
<!--Dynamic table apps-->
<html>
<head>
<title></title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table id="myTable">
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Occupation and Employer</th>
<th>VERIFY and Employer</th>
<th>Add</th>
<tr>
<td><input type="text" id="txtName" /></td>
<td><input type="text" id="txtAge" /></td>
<td><input type="text" id="txtGender" /></td>
<td><input type="text" id="txtOccupation" /></td>
<td><input type="text" id="txtverify" /></td>
<td><input type="button" id="btnAdd" class="button-add" onClick="insertRow()" value="add"></input></td>
</tr>
</table>
<script>
function insertRow()
{
var index = 1;
var table=document.getElementById("myTable");
var row=table.insertRow(table.rows.length);
var cell1=row.insertCell(0);
var t1=document.createElement("input");
t1.id = "txtName"+index;
cell1.appendChild(t1);
var cell2=row.insertCell(1);
var t2=document.createElement("input");
t2.id = "txtAge"+index;
cell2.appendChild(t2);
var cell3=row.insertCell(2);
var t3=document.createElement("input");
t3.id = "txtGender"+index;
cell3.appendChild(t3);
var cell4=row.insertCell(3);
var t4=document.createElement("input");
t4.id = "txtOccupation"+index;
cell4.appendChild(t4);
var cell5=row.insertCell(4);
var t5=document.createElement("input");
t5.id = "txtOccupation"+index;
cell5.appendChild(t5);
index++;
}
</script>
</body>
</html>
_________________________________________________________________________________
| Name | Age | Gender | Occupation and Employer | VERIFY and Employer | Add |
|---|---|---|---|---|---|
Comments
Post a Comment