Exercise: HTML Tables and Forms
#
ObjectivePractice using HTML tables and forms to structure tabular content and take user input on web pages.
#
Exercise 1Steps are to be completed within the main element in your index.html
file.
- Create a table element
- Create one table row element and nest it inside of your newly created table element
- Create six table heading elements and nest them inside of you newly created table row element
- 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 2Steps 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
- Create one table row element per drink and nest it inside of your newly created table element
- Create six table data elements and nest them inside of you newly created table row element
- 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 3Steps are to be completed within the main element in your index.html
file, below your table.
- Create a form element
- 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
- Each label should have text content displaying what information the input receives, and a
for
attribute that matches each corresponding input element'sid
attribute - Create a button element that has a
type
attribute set tosubmit
, so that when you click the button, it triggers a form submission.