https://github.com/truecodersio/html_tables_forms_exercise
https://github.com/truecodersio/html_tables_forms_exercise
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/truecodersio/html_tables_forms_exercise
- Owner: truecodersio
- Created: 2022-05-04T16:46:01.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-08-28T20:36:26.000Z (almost 3 years ago)
- Last Synced: 2025-02-17T14:31:52.300Z (over 1 year ago)
- Language: HTML
- Size: 1000 Bytes
- Stars: 0
- Watchers: 2
- Forks: 170
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
---
title: "Exercise: HTML Tables and Forms"
slug: "/html-tables-forms-exercise"
---
[Exercise Repo](https://github.com/Bryantellius/HTML_Tables_Forms_Exercise)
## 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.