Create, test and validate a CSS document to describe a table with the following contents. The columns of the table must have the headings- pine, maple, oak, fir. The rows must have the labels- average height, average width, typical life span and leaf type.
<!DOCTYPE html>
<html>
<!DOCTYPE html>
<html>
<head>
<title>Tree information</title>
<style type="text/css">
table{border-width: thick;
border-color:
green;
border-bottom-style: dashed;
border-top-style: dashed;
border-right-style:dotted;
border-left-style:dotted;
}
p{ border-style:dashed;
border-width:thin;
border-color:red;
margin:0.2in;
padding:0.2in;
font-weight:lighter;
f
ont-family:fantasy;
font-size:17pt;
text-indent:2.7in
}
font{font-size:20pt;font-family:sans-serif;}
</style>
</head>
<body>
<table border="5" cellpadding="30"
cellspacing="5" align="center">
<caption> <font><strong>TREE
INFORMATION<strong></font></caption>
<tr>
<th></th>
<th>Pine</th>
<th>Maple</th>
<th>Oak</th>
<th>Fir</th>
</tr>
<tr>
<th>Average Height</th>
<td>40 to 60 ft</td>
<td>30 to 145 ft</td>
<td>60 ft</td>
<td>40 to 75 ft</td>
</tr>
<tr>
<th>Average Width</th>
<td>12 to 15 ft</td>
<td>16 to 20 ft</td>
<td>18 to 22 ft</td>
<td>20 ft</td>
</tr>
<tr>
<th>Typical Lifespan</th>
<td>100 to 1000 yrs</td>
<td>472 yrs</td>
<td>4 to 500 yrs</td>
<td>62 to 75 yrs</td>
</tr>
<tr>
<th>Leaf Type</th>
<td>scale leaves</td>
<td>needle leaves</td>
<td>broad leaves</td>
<td>transparent leaves</td>
</tr>
</table>
<p>
This is the table from which you can get informtion about
Pine, Maple, Oak and Fir trees.
</p>
</body>
</html>
Output :
No comments:
Write comments