Create an external style sheet and link it to an html file.
Use css to style the page and table. I don't want it to look like the default
browser styling on anything. Use your own css, don't use the defaults from a
css framework like bootstrap.
Add some appropriate headlines, titles, and any other content you think is
appropriate to the document.
Get data from here: http://pds.jpl.nasa.gov/planets/special/planets.htm
Use any 4 of the full planets (not pluto or small bodies).
Combine the data from any 4 planet pages into a single html page with one
single table. I do not want separate tables/pages.
Data attributes or the planet names can be on either horizontal or vertical axis. However you want to format it.
Use first seven data fields: Mass, Diameter, Mean density, Escape velocity, Avg Dist from sun, Rotation period, Revolution period.
// File 1: Planet.html
<!DOCTYPE html>
<html>
<head>
<title>Information about important planets of the
universe</title>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
<body>
<table style="width:100%">
<tr>
<th> </th>
<th>Mercury</th>
<th>Venus</th>
<th>Earth</th>
<th>Jupiter</th>
</tr>
<tr>
<th>Mass(kg)</th>
<td>3.3 x 1023</td>
<td>4.87 x 10<sup>24</sup>
<td>5.98 x 10<sup>24</sup>
<td>1.90 x 10<sup>27</sup>
</tr>
<tr>
<th>Diameter(km)</th>
<td>4879.4</td>
<td>12104</td>
<td>12765</td>
<td>142,800</td>
</tr>
<tr>
<th>Mean
Density(kg/m<sup>3</sup>)</th>
<td>5420</td>
<td>5250</td>
<td>5520</td>
<td>1314</td>
</tr>
<tr>
<th>Escape Velocity(m/s)</th>
<td>4300</td>
<td>10400</td>
<td>11200</td>
<td>59500</td>
</tr>
<tr>
<th>Avg Dist from Sun(AU)</th>
<td>0.387</td>
<td>0.723</td>
<td>1</td>
<td>5.203</td>
</tr>
<tr>
<th>Rotation Period</th>
<td>58.65</td>
<td>243.02</td>
<td>1</td>
<td>0.41</td>
</tr>
<tr>
<th>Revolution Period</th>
<td>87.97</td>
<td>224.7</td>
<td>365.26</td>
<td>11.86</td>
</tr>
</table>
</body>
</html>
File2: mystyle.css
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
background-color: white;
}
Get Answers For Free
Most questions answered within 1 hours.