Style Table Tag
Style Table Tag
Activity 1 (write html and css code to develop below image page)
<!DOCTYPE html>
<html>
<head>
<title>Activity 1</title>
<style type="text/css">
table{
border: 2px solid rgb(226,216,209);
font-family: "calibri";
border-collapse: collapse;
margin-top: 30px;
margin-left: 280px;
}
td,th{
border-left: 2px solid rgb(226,216,209);
border-right: 2px solid rgb(226,216,209);
padding: 6px;
}
th{
height: 30px;
}
table tr:nth-child(even){
background-color: rgb(253,233,217);
}
.ab1{
font-family: arial;
font-weight:bold;
font-size: 20px;
color: white;
background-color: rgb(247,150,70);
letter-spacing: 8px;
}
.abc{
width: 300px;
}
.abc1{
text-align: right;
width: 150px;
}
.ab2{
border-top: 2px solid rgb(246,194,153);
border-bottom: 2px solid rgb(246,194,153);
}
</style>
</head>
<body>
<table>
<tr>
<td style="padding: 4px;" class="ab1" colspan="4"><center>Employee Timecard</center></td>
</tr>
<tr style="font-size: 18px;">
<th>Day</th>
<th>Regular</th>
<th>Overtime</th>
<th>Total</th>
</tr>
<tr class="ab2">
<td class="abc">Monday</td>
<td class="abc1">8</td>
<td class="abc1">0</td>
<td class="abc1">8</td>
</tr>
<tr class="ab2">
<td>Tuesday</td>
<td class="abc1">8</td>
<td class="abc1">2.5</td>
<td class="abc1">10.5</td>
</tr>
<tr class="ab2">
<td>Wednesday</td>
<td class="abc1">8</td>
<td class="abc1">0</td>
<td class="abc1">8</td>
</tr>
<tr class="ab2">
<td>Thursday</td>
<td class="abc1">8</td>
<td class="abc1">0</td>
<td class="abc1">8</td>
</tr class="ab2">
<tr>
<td>Friday</td>
<td class="abc1">8</td>
<td class="abc1">0</td>
<td class="abc1">8</td>
</tr class="ab2">
<tr class="ab2">
<td>Saturday</td>
<td class="abc1">0</td>
<td class="abc1">5</td>
<td class="abc1">5</td>
</tr>
<tr class="ab2">
<td>Sunday</td>
<td class="abc1">0</td>
<td class="abc1">1</td>
<td class="abc1">1</td>
</tr>
<tr style="background-color: rgb(104,120,134); color: white; font-weight: bold; font-size: 16px;">
<td><center>Total weekly hours:</center></td>
<td class="abc1">40</td>
<td class="abc1">8.5</td>
<td class="abc1">48.5</td>
</tr>
</table>
</body>
</html>
Activity 2 (write html and css code to develop below image page)
<!DOCTYPE html>
<html>
<head>
<title>Activity 2</title>
<style type="text/css">
table{
border: 2px solid rgb(127,89,127);
font-family: "times new roman";
border-collapse: collapse;
margin-top: 30px;
margin-left: 340px;
}
td,th{
padding: 8px;
width: 140px;
text-align: center;
padding: 12px;
}
th{
border: 1px dashed rgb(127,89,127);
height: 30px;
font-size: 20px;
font-weight:bold;
color: black;
background-color: rgb(255,98,98);
}
td{
border: 2px dashed rgb(127,89,127);
color: darkblue;
}
.abc{
background-color: rgb(255,191,191);
}
</style>
</head>
<body>
<table>
<tr>
<th>Product ID</th>
<th>Product Name</th>
<th>Product<br>Quality</th>
<th>Product<br>Quantity</th>
</tr>
<tr>
<td>1</td>
<td>Wheat</td>
<td>Good</td>
<td>200 Bags</td>
</tr>
<tr>
<td>2</td>
<td>Rice</td>
<td>Good</td>
<td>250 Bags</td>
</tr>
<tr>
<td>3</td>
<td>Sugar</td>
<td>Good</td>
<td>200 Bags</td>
</tr>
<tr class="abc">
<td>3</td>
<td>Sugar</td>
<td>Good</td>
<td>200 Bags</td>
</tr>
<tr>
<td>3</td>
<td>Sugar</td>
<td>Good</td>
<td>200 Bags</td>
</tr>
<tr class="abc">
<td>3</td>
<td>Sugar</td>
<td>Good</td>
<td>200 Bags</td>
</tr>
<tr>
<td>3</td>
<td>Sugar</td>
<td>Good</td>
<td>200 Bags</td>
</tr>
<tr class="abc">
<td>3</td>
<td>Sugar</td>
<td>Good</td>
<td>200 Bags</td>
</tr>
<tr>
<td>3</td>
<td>Sugar</td>
<td>Good</td>
<td>200 Bags</td>
</tr>
</table>
</body>
</html>
Hello, my name is Muhammad Bin Jameel.
No comments:
Post a Comment