HTML Table, Prompt Box, And Custom Alert Window Examples
Creating an HTML Table
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”https://www.w3.org/1999/xhtml”>
<style>
td, th {
border: 1px solid #dddddd;
text-align:center;
padding: 12px 20px;
</style>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Table</title>
</head>
<table style=”border-collapse: collapse;”>
<tr>
<th colspan=”6″>TIMETABLE</th>
</tr>
<tr>
<th>TIME/DAY</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
</tr>
<tr>
<td>8 am</td>
<td>Science</td>
<td>Maths</td>
<td>Bahasa</td>
<td rowspan=”2″>Arts</td>
<td>PJ</td>
</tr>
<tr>
<td>9 am</td>
<td>English</td>
<td>History</td>
<td>Maths</td>
<td>Science</td>
</tr>
<tr>
<td>10 am</td>
<th colspan=”5″>LUNCH BREAK</th>
</tr>
<tr>
<td>11 am</td>
<td>Maths</td>
<td>Science</td>
<td>English</td>
<td>Bahasa</td>
<td rowspan=”2″>Project</td>
</tr>
<tr>
<td>12 am</td>
<td>History</td>
<td>Maths</td>
<td>Science</td>
<td>Maths</td>
</tr>
</table>
<body>
</body>
</html>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”https://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<script>
function myFunction() {
var txt;
var person = prompt(“Please enter your name:”, “”);
if (person == null || person == “”) {
txt = “User cancelled the prompt.”;
} else {
txt = person
document.getElementById(“demo”).value = txt
</script>
<title>Prompt Box</title>
</head>
<body>
<button onclick=”myFunction()”>Click to enter your Name</button>
<input type=”text” id=”demo”>
</body>
</html>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”https://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<style>
.alert {
text-align:center;
padding: 20px;
width:10%;
display:none;
.closebtn {
color: black;
font-weight: bold;
font-size: 12px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
padding:8px;
.closebtn:hover {
color: black;
</style>
<script>
function myFunction() {
var txt = “”;
var x = prompt(“Enter a number between 1 – 100:”, );
if (x == 50) {
txt = “Red”;
document.getElementById(“alert”).style.display = “block”;
document.getElementById(“alert”).style.backgroundColor = “red”;
document.getElementById(“color”).innerHTML = txt;
} else if(x < 50) {
txt =x;
txt = “Yellow”;
document.getElementById(“alert”).style.display = “block”;
document.getElementById(“alert”).style.backgroundColor = “Yellow”;
document.getElementById(“color”).innerHTML = txt;
else if(x>=50 && x<100) {
txt = “Purple”;
document.getElementById(“alert”).style.display = “block”;
document.getElementById(“alert”).style.backgroundColor = “Purple”;
document.getElementById(“color”).innerHTML = txt;
else {
txt = “Green”;
document.getElementById(“alert”).style.display = “block”;
document.getElementById(“alert”).style.backgroundColor = “Green”;
document.getElementById(“color”).innerHTML = txt;
</script>
<title>Untitled Document</title>
</head>
<body>
<button onclick=”myFunction()”>Let’s play with numbers</button>
<div style=”text-align:center”>
<div class=”alert” id=”alert”>
<p id=”color”></p>
<input type=”submit” class=”closebtn” onclick=”this.parentElement.style.display=’none’;” value=”Ok”>
</div></div>
</body>
</html>
Open Popup: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”https://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title> Open Popup </title>
</head>
<body>
<input type=”button” value=”Open a Popup Window” onclick=”window.open(‘popup.html’,’popUpWindow’,’height=500,width=400,
left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes’);”>
</body>
</html>
Popup.html: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”https://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Untitled Document</title>
</head>
<body>
<p>This is a pop up window</p>
<input type=”submit” onclick=”javascript:window.open(”,’_self’).close()” value=”Exit” />
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”https://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<style>
.text {
text-align:right;
font-size:36px;
margin-right:40px;
.nav {
text-align:center;
.nav a{
text-decoration:none;
border-color:#330033;
padding:10px 35px;
color: #000000;
height:10px;
border: 1px solid;
.nav a:hover {
background-color:#93F9B1;
.nav a.active {
color:#999999;
.img1
text-align:right;
margin-right:350px;
.bottom {
text-align: center;
margin-top:50px;
.firstbox {
float:left;
border: 1px solid;
background-color:#00CC00;
width: 25%;
height: 30%;
padding: 45px;
border-radius:20px;
.seconfimage {
float:left;
.seconfimage img{
border-radius:20px;
margin-left: 80px;
.secondbox
border: 1px solid;
border-color:#00CC33;
width: 25%;
float:right;
padding: 45px;
border-radius:20px;
</style>
<title>Main Page</title>
</head>
<body>
<div class=”text”>
SMART ACADEMIC Tution Centre
</div>
<div class=”nav”>
<a href=”#” class=”active”>About Us</a>
<a href=”#”>Program and Fees</a>
<a href=”#”>Our Teachers</a>
<a href=”#”>Gallery</a>
<a href=”#”>Other Activities</a>
<a href=”#”>Announcements</a>
<a href=”#”>Contact Us</a>
</div>
<div class=”img1″>
<img data-src=”image1.png” />
</div>
<div class=”bottom”>
<div class=”firstbox”>
Limited Seats for IGCSE / SPM Seminar 2017REGISTER NOW! FREE TRIAL CLASS IS AVAILABLE COME JOIN US! BRING FRIEND & REDEEM 1 MONTH CLASS FOR FREE!
</div>
<div class=”seconfimage”>
<img data-src=”image2.png” />
</div>
<div class=”secondbox”>
Revision, study and examination technique are emphasised in all our classes to ensure each individual student is roached to achieve the highest grade or score possible.
</div>
</div>
</body>
</html>
References:
Duckett, Jon, Gilles Ruppert, and Jack Moore. JavaScript & jQuery: interactive front-end web development. Wiley, 2014.
Netravali, Ravi, Ameesh Goyal, James Mickens, and Hari Balakrishnan. “Polaris: Faster Page Loads Using Fine-grained Dependency Tracking.” In NSDI, pp. 123-136. 2016.
Nguyen, Hung Viet, Christian Kästner, and Tien N. Nguyen. “Varis: IDE support for embedded client code in PHP web applications.” In Proceedings of the 37th International Conference on Software Engineering-Volume 2, pp. 693-696. IEEE Press, 2015.
Wang, Xiao Sophia, Arvind Krishnamurthy, and David Wetherall. “Speeding up Web Page Loads with Shandian.” In NSDI, pp. 109-122. 2016.