Create, test and validate a CSS document that defines a table that has two levels of column labels an overall label meal and three secondary labels- breakfast, lunch, dinner. There must be two levels of row levels an overall label food and four secondary labels- bread, main course, vegetables and desert. The cells of the table must contain a number of groups for each of the food categories.
<!DOCTYPE html>
<html>
<head>
<title>food chart</title>
<style type="text/css">
table{border-width: Medium;
border-color: green;
border-bottom-style: double;
border-top-style: double;
border-right-style:dotted;
border-left-style:dotted;
}
p{border-style:double;
border-width:thick;
border-color:blue;
margin:0.3in;
padding:0.1in;
font-weight:lighter;
f ont-family:fantasy;
font-size:16pt;
text-indent:5.9in
}
font{font-weight:bolder;font-size:20pt;font-family:monospace;}
</style>
</head>
<body>
<table border="5" cellpadding="30" cellspacing="10" align="center">
<caption><font>Daily Nutrition</font></caption>
<tr>
<th colspan="6">MEALS</th>
</tr>
<tr>
<th colspan="2"></th>
<th>Breakfast</th>
<th>Lunch</th>
<th>Dinner</th>
</tr>
<tr>
<th rowspan="4">FOOD</th>
<th>Bread</th>
<td>3 slices</td>
<td>2 slices</td>
<td>1 slices</td>
</tr>
<tr>
<th>Main Course</th>
<td>1 chapati</td>
<td>curd rice: 50gms</td>
<td>white rice: 25gms</td>
</tr>
<tr>
<th>Vegetable</th>
<td>2 cucumber slices</td>
<td>salad: 100gms</td>
<td>salad: 50gms</td>
</tr>
<tr>
<th>Desert</th>
<td>rasmalai</td>
<td>payasa:300ml</td>
<td>basundi:10gms</td>
</tr>
</table>
<p>
HEALTH IS WEALTH.
</P>
</body>
</html>
Output:
<!DOCTYPE html>
<html>
<head>
<title>food chart</title>
<style type="text/css">
table{border-width: Medium;
border-color: green;
border-bottom-style: double;
border-top-style: double;
border-right-style:dotted;
border-left-style:dotted;
}
p{border-style:double;
border-width:thick;
border-color:blue;
margin:0.3in;
padding:0.1in;
font-weight:lighter;
f ont-family:fantasy;
font-size:16pt;
text-indent:5.9in
}
font{font-weight:bolder;font-size:20pt;font-family:monospace;}
</style>
</head>
<body>
<table border="5" cellpadding="30" cellspacing="10" align="center">
<caption><font>Daily Nutrition</font></caption>
<tr>
<th colspan="6">MEALS</th>
</tr>
<tr>
<th colspan="2"></th>
<th>Breakfast</th>
<th>Lunch</th>
<th>Dinner</th>
</tr>
<tr>
<th rowspan="4">FOOD</th>
<th>Bread</th>
<td>3 slices</td>
<td>2 slices</td>
<td>1 slices</td>
</tr>
<tr>
<th>Main Course</th>
<td>1 chapati</td>
<td>curd rice: 50gms</td>
<td>white rice: 25gms</td>
</tr>
<tr>
<th>Vegetable</th>
<td>2 cucumber slices</td>
<td>salad: 100gms</td>
<td>salad: 50gms</td>
</tr>
<tr>
<th>Desert</th>
<td>rasmalai</td>
<td>payasa:300ml</td>
<td>basundi:10gms</td>
</tr>
</table>
<p>
HEALTH IS WEALTH.
</P>
</body>
</html>
Output:
No comments:
Write comments