Skip to main content

Exercise: HTML Tables and Forms

Exercise Repo

Objective#

Practice using HTML tables and forms to structure tabular content and take user input on web pages.

Exercise 1#

Steps are to be completed within the main element in your index.html file.

  1. Create a table element
  2. Create one table row element and nest it inside of your newly created table element
  3. Create six table heading elements and nest them inside of you newly created table row element
  4. You should have a table heading element for each of the following displayed columns:
    • total servings
    • serving size
    • calories per serving
    • carbs per serving
    • sugars per serving
    • sodium per serving

Exercise 2#

Steps are to be completed within the main element in your index.html file.

You will need to search the internet for the total servings, serving size, calories per serving, carbs per serving, sugars per serving, and sodium per serving for each of the following drinks:

  • Coca Cola
  • Pepsi
  • Coca Cola Zero
  • Dr. Pepper
  • Mountain Dew
  1. Create one table row element per drink and nest it inside of your newly created table element
  2. Create six table data elements and nest them inside of you newly created table row element
  3. Each table row (one per drink) should have a table data element it's actual values for each of the following displayed columns:
    • total servings
    • serving size
    • calories per serving
    • carbs per serving
    • sugars per serving
    • sodium per serving

Exercise 3#

Steps are to be completed within the main element in your index.html file, below your table.

  1. Create a form element
  2. Create a label and input element for each of the following data points:
    • total servings
    • serving size
    • calories per serving
    • carbs per serving
    • sugars per serving
    • sodium per serving
  3. Each label should have text content displaying what information the input receives, and a for attribute that matches each corresponding input element's id attribute
  4. Create a button element that has a type attribute set to submit, so that when you click the button, it triggers a form submission.