In our table assessment, we provide you with some data on the planets in our solar system, and get you to structure it into an HTML table.
|Prerequisites:||Before attempting this assessment you should have already worked through all the articles in this module.|
|Objective:||To test comprehension of HTML tables and associated features.|
<style> elements inside the HTML page.
You are working at a school; currently your students are studying the planets of our solar system, and you want to provide them with an easy-to-follow set of data to look up facts and figures about the planets. An HTML data table would be ideal — you need to take the raw data you have available and turn it into a table, following the steps below.
The finished table should look like this:
You can also see the example live here (no looking at the source code — don't cheat!)
Steps to complete
The following steps describe what you need to do to complete the table example. All the data you'll need is contained in the
planets-data.txt file. If you have trouble visualising the data, look at the live example above, or try drawing a diagram.
- Open your copy of
blank-template.html, and start the table off by giving it an outer container, a table header, and a table body. You don't need a table footer for this example.
- Add the provided caption to your table.
- Add a row to the table header containing all the column headers.
- Create all the content rows inside the table body, remembering to make all the row headings into headings semantically.
- Make sure all the content is inserted into the right cells — in the raw data, each row of planet data is shown next to its associated planet.
- Add attributes to make the row and column headers unambiguously associated with the rows, columns, or rowgroups that they act as headings for.
- Add a black border just around the column that contains all the planet name row headers.
Hints and tips
- The first cell of the header row needs to be blank, and span two columns.
- The group row headings (e.g. Jovian planets) that sit to the left of the planet name row headings (e.g. Saturn) are a little tricky to sort out — you need to make sure each one spans the correct number of rows and columns.
- One way of associating headers with their rows/columns is a lot easier than the other way.
If you are following this assessment as part of an organized course, you should be able to give your work to your teacher/mentor for marking. If you are self-learning, then you can get the marking guide fairly easily by asking on the dev-mdc mailing list, or in the #mdn IRC channel on Mozilla IRC. Try the exercise first — there is nothing to be gained by cheating!