revision:
An HTML table consists of one <table> element and one or more <tr>, <th>, and <td> elements.
the "tr" element defines a table row;
the "th" element defines a table header;
the "td" element defines a table cell.
An HTML table may also include "caption", "colgroup", "thead", "tfoot", and "tbody" elements.
<table> . . . </table>
| Month | Savings |
|---|---|
| January | $100 |
| January | $80 |
<style>
table, th, td {border: 1px solid black; margin-left: 4vw;}
</style>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>January</td>
<td>$80</td>
</tr>
</table>
| Month | Savings |
|---|---|
| January | $100 |
| January | $80 |
<table style="background-color:#00FF00">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>January</td>
<td>$80
</tr>
</table>
| First name: | ||
| Last name: | ||
| Email: | ||
| User ID: | ||
| Password: | ||
| Confirm password: | ||
<div class="spec">
<table id="table1" style="margin-left:1vw;">
<tr>
<td>First name:</td>
<!-- onkeyup: execute a JS when a user releases a key -->
<td><input type="text" id="first" onkeyup="validate();" /></td>
<td><div id="errFirst"></div></td>
</tr>
<tr>
<td>Last name:</td>
<td><input type="text" id="last" onkeyup="validate();"/></td>
<td><div id="errLast"></div></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" id="email" onkeyup="validate();"/></td>
<td><div id="errEmail"></div></td>
</tr>
<tr>
<td>User ID:</td>
<td><input type="text" id="uid" onkeyup="validate();"/></td>
<td><div id="errUid"></div></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" id="password" onkeyup="validate();"/></td>
<td><div id="errPassword"></div></td>
</tr>
<tr>
<td>Confirm password:</td>
<td><input type="password" id="confirm" onkeyup="validate();"/></td>
<td><div id="errConfirm"></div></td>
</tr>
<tr>
<!-- execute a JS when a button is clicked -->
<td><input type="button" id="create" value="Create" onclick="validate();
finalValidate();"/></td>
<td><div id="errFinal"></div></td>
</tr>
</table>
</div>
<script>
var divs = new Array();
divs[0] = "errFirst";
divs[1] = "errLast";
divs[2] = "errEmail";
divs[3] = "errUid";
divs[4] = "errPassword";
divs[5] = "errConfirm";
function validate(){
var inputs = new Array();
inputs[0] = document.getElementById('first').value;
inputs[1] = document.getElementById('last').value;
inputs[2] = document.getElementById('email').value;
inputs[3] = document.getElementById('uid').value;
inputs[4] = document.getElementById('password').value;
inputs[5] = document.getElementById('confirm').value;
var errors = new Array();
errors[0] = "<span style='color:red'>Please enter your first name!</span>";
errors[1] = "<span style='color:red'>Please enter your last name!</span>";
errors[2] = "<span style='color:red'>Please enter your email!</span>";
errors[3] = "<span style='color:red'>Please enter your user id!</span>";
errors[4] = "<span style='color:red'>Please enter your password!</span>";
errors[5] = "<span style='color:red'>Please confirm your password!</span>";
for (i in inputs) {
var errMessage = errors[i];
var div = divs[i];
if (inputs[i] == "")
document.getElementById(div).innerHTML = errMessage;
else if (i==2) {
var atpos=inputs[i].indexOf("@");
var dotpos=inputs[i].lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=inputs[i].length)
document.getElementById('errEmail').innerHTML = "<span style='color: red'>
Enter a valid email address!</span>";
else
document.getElementById(div).innerHTML = "OK!";
}
else if (i==5) {
var first = document.getElementById('password').value;
var second = document.getElementById('confirm').value;
if (second != first)
document.getElementById('errConfirm').innerHTML = "<span style='color: red'>
Your passwords don't match!</span>";
else
document.getElementById(div).innerHTML = "OK!";
}
else
document.getElementById(div).innerHTML = "OK!";
}
}
function finalValidate(){
var count = 0;
for(i=0;i<6;i++){
var div = divs[i];
if(document.getElementById(div).innerHTML == "OK!")
count = count + 1;
}
if(count == 6)
document.getElementById("errFinal").innerHTML = "All the data you entered
is correct!!!";
}
</script>
<div class="spec">
<form name="f1">
<table>
<tr>
<td><input name="ta1" type="text" size="15"></td>
<td><input name="ta2" type="text" size="15"></td>
<td><input name="ta3" type="text" size="15"></td>
</tr>
</table>
</form>
<form name="f2" action="#" method="POST">
name <input name="pername" type="text" size="15"> name<p>
age <input name="perage" type="text" size="5"> age<P>
occupation <input name="perocc" type="text" size="15">occupation <P>
<input type="Submit" value="Submit">
<input type="Reset" value="Reset">
</form>
<form name="f3">
<table>
<tr>
<td><input name="ta4" type="text" size="15">
<td> <input name="ta5" type="text" size="15">
<td> <input name="ta6" type="text" size="15">
</tr>
</table>
</form>
</div>
<script language= "javascript">
setInterval("document.f1.ta1.value = 'Answer Soon'", 1000)
setInterval("document.f1.ta1.value = ''", 1300)
setInterval("document.f1.ta2.value = 'Answer Soon'", 1600)
setInterval("document.f1.ta2.value = ''", 1900)
setInterval("document.f1.ta3.value = 'Answer Soon'", 2200)
setInterval("document.f1.ta3.value = ''", 2500)
setInterval("document.f3.ta4.value = 'Answer Soon'", 2800)
setInterval("document.f3.ta4.value = ''", 3100)
setInterval("document.f3.ta5.value = 'Answer Soon'", 3400)
setInterval("document.f3.ta5.value = ''", 3700)
setInterval("document.f3.ta6.value = 'Answer Soon'", 4000)
setInterval("document.f3.ta6.value = ''", 4300)
</script>