{"id":18572725,"url":"https://github.com/truecodersio/html_tables_forms_exercise","last_synced_at":"2025-07-08T07:05:11.674Z","repository":{"id":64181813,"uuid":"488669084","full_name":"truecodersio/HTML_Tables_Forms_Exercise","owner":"truecodersio","description":null,"archived":false,"fork":false,"pushed_at":"2023-08-28T20:36:26.000Z","size":1,"stargazers_count":0,"open_issues_count":2,"forks_count":170,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-17T14:31:52.300Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/truecodersio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-05-04T16:46:01.000Z","updated_at":"2022-09-30T21:38:47.000Z","dependencies_parsed_at":"2023-01-15T03:00:48.780Z","dependency_job_id":null,"html_url":"https://github.com/truecodersio/HTML_Tables_Forms_Exercise","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"benrbryant/Exercise_Template","purl":"pkg:github/truecodersio/HTML_Tables_Forms_Exercise","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/truecodersio%2FHTML_Tables_Forms_Exercise","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/truecodersio%2FHTML_Tables_Forms_Exercise/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/truecodersio%2FHTML_Tables_Forms_Exercise/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/truecodersio%2FHTML_Tables_Forms_Exercise/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/truecodersio","download_url":"https://codeload.github.com/truecodersio/HTML_Tables_Forms_Exercise/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/truecodersio%2FHTML_Tables_Forms_Exercise/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264218406,"owners_count":23574863,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-06T23:07:03.563Z","updated_at":"2025-07-08T07:05:11.622Z","avatar_url":"https://github.com/truecodersio.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"---\ntitle: \"Exercise: HTML Tables and Forms\"\nslug: \"/html-tables-forms-exercise\"\n---\n\n[Exercise Repo](https://github.com/Bryantellius/HTML_Tables_Forms_Exercise)\n\n## Objective\n\nPractice using HTML tables and forms to structure tabular content and take user input on web pages.\n\n## Exercise 1\n\nSteps are to be completed within the main element in your `index.html` file.\n\n1. Create a **table** element\n2. Create one **table row** element and nest it inside of your newly created **table** element\n3. Create six **table heading** elements and nest them inside of you newly created **table row** element\n4. You should have a **table heading** element for each of the following _displayed_ columns:\n   - total servings\n   - serving size\n   - calories per serving\n   - carbs per serving\n   - sugars per serving\n   - sodium per serving\n\n## Exercise 2\n\nSteps are to be completed within the main element in your `index.html` file.\n\nYou 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:\n\n- Coca Cola\n- Pepsi\n- Coca Cola Zero\n- Dr. Pepper\n- Mountain Dew\n\n1. Create one **table row** element per drink and nest it inside of your newly created **table** element\n2. Create six **table data** elements and nest them inside of you newly created **table row** element\n3. Each **table row** (one per drink) should have a **table data** element it's actual values for each of the following _displayed_ columns:\n   - total servings\n   - serving size\n   - calories per serving\n   - carbs per serving\n   - sugars per serving\n   - sodium per serving\n\n## Exercise 3\n\nSteps are to be completed within the main element in your `index.html` file, _below your table_.\n\n1. Create a **form** element\n2. Create a **label** and **input** element for each of the following data points:\n   - total servings\n   - serving size\n   - calories per serving\n   - carbs per serving\n   - sugars per serving\n   - sodium per serving\n3. 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\n4. Create a **button** element that has a `type` attribute set to `submit`, so that when you click the button, it triggers a form submission.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftruecodersio%2Fhtml_tables_forms_exercise","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftruecodersio%2Fhtml_tables_forms_exercise","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftruecodersio%2Fhtml_tables_forms_exercise/lists"}