FACULTY OF COMPUTER AND MATHEMATICAL SCIENCES
INTRODUCTION TO WEB AND MOBILE
APPLICATION
(CSC264)
TUTORIAL 3
PREPARED BY:
KHAIRIL IQBAL AZWAN BIN ROSLAN
TAUFIQ
2022310117
RCS1104B
PREPARED FOR:
MADAM HANISAH
AHMAD
<!DOCTYPE html>
<style>
body{
background-color: rgb(80, 70, 137);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: hsl(170, 54%, 47%);
}
header{
background-color: hsl(0, 79%, 67%);
color: rgb(0, 0, 0);
text-align: center;
border-radius: 50px;
height: 65px;
width: 500px;
padding: 5px;
margin: 0 auto 0 auto;
}
.table {
font-family: Georgia, 'Times New Roman', Times, serif;
width: 700px;
height: 150px;
margin: 50px auto 50px auto;
border-collapse: collapse;
border: 1px solid hsla(0, 0%, 100%, 0);
}
#title {
background-color: hsla(248, 94%, 40%, 0.95);
color: ghostwhite;
}
.row {
background-color: hsla(275, 42%, 69%, 0.6);
font-weight: 900;
border-bottom: 1px solid hsl(0, 0%, 0%);
}
#link a {
text-decoration: none;
color: hsl(114, 62%, 53%);
}
#link a:hover {
color: hsl(114, 62%, 53%);
}
footer {
background-color: hsla(0, 48%, 44%, 0.9);
color: white;
height: 150px;
width: 565px;
text-align: center;
border-radius: 20px;
padding: 15px 30px 0 0;
margin: 0 auto 0 auto;
}
</style>
<body>
<header>
<h2>A basic HTML table</h2>
</header>
<main>
<table border="1" class="table">
<tr id="title">
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr class="row" align="center">
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr class="row" align="center">
<td>Centro Comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</main>
<footer>
<p>To understand the example better, we have added borders
to the table.</p>
<div id="link">For details formatting, click this website:
<a href="https://www.w3schools.com/css/default.asp?"
target="blank">w3School.com</a></div>
<br>
Good Luck!!
</footer>
</body>
</html>
