/Structuring-Planet-Data

To test comprehension of HTML tables and associated features.

Primary LanguageHTML

Solar System Planets Table

Objective

The primary objective of this project is to test comprehension of HTML tables and associated features, in alignment with the learning material provided in the HTML Tables module on MDN Web Docs. By completing this project, learners can reinforce their understanding of structuring HTML tables, using semantic elements, associating headers with rows/columns, and implementing basic styling.

Project Overview

This project involves creating an HTML data table to display facts and figures about the planets in our solar system. The data is sourced from the planets-data.txt file, and the table is designed to be informative and easy to follow for students studying the planets.

Table Structure

The HTML table is organized with the following structure:

  • Outer container
  • Table header with column headers
  • Table body with rows containing planet data

Steps to Complete the Table

  1. Outer Container, Table Header, and Table Body:

    • The HTML document starts with an outer container, a table header, and a table body.
    • The table header includes columns for the planet's name, mass, diameter, density, gravity, length of day, distance from the Sun, mean temperature, number of moons, and notes.

  2. Caption:

    • The table includes a caption providing information about the source of the planetary facts.

  3. Header Row:

    • The first row in the table header is dedicated to column headers.
    • The first cell of the header row is left blank and spans two columns.

  4. Content Rows:

    • Rows inside the table body represent individual planets.
    • Each row includes semantically marked headings and corresponding data cells.

  5. Association Attributes:

    • Attributes are added to ensure unambiguous association between headers and their respective rows/columns.

  6. Column Border:

    • A black border is added around the column containing planet names to enhance visibility.

CSS Styling

The minimal-table.css file provides simple styling for the table, including borders, padding, and alternating row colors for better readability.

Data Source

The data used in this project is sourced from NASA's Planetary Fact Sheet - Metric.

Additional Information

  • The README.md file provides an overview of the project.
  • The planets-data.txt file contains the raw data used to populate the table.
  • This project is completed as part of the assessment in the learning material provided in the HTML Tables module on MDN Web Docs.

Author

  • Sunil K Joseph, Asst. Professor, Dept. of Computer Science, Mar Augusthinose College, Ramapuram.

Note: This project is intended for educational purposes and serves as a template for creating informative HTML data tables.