Want to create interactive content? It’s easy in Genially!
Clawson-Creating a Table using HTML
HS: High School
Created on February 8, 2024
Start designing with a free template
Discover more than 1500 professional designs like these:
Transcript
Start
Creating a Table
Web Design
Student Choice Board-1.2.5
Creating a Table and Adding Images using HTML
+ info
You will be using this Presentation to create a table in your web page. On the next page, you will see the assignment rubric. After that page, check out the Choice Board with 4 different data option sets to create your table. Three of those options have provided data for you to add in as you work through the directions. One option allows you to pick the data of your choosing while you create the web page. Press/click on the info button to learn more about the goal of this assignment.
Introduction
Rubric for this assignment
Remember: Choose only ONE data set to use.
Start Here
Creating the web page code
Custom Data Option
Favorite Flowers Data
Rubric for Assignment
Steelers Quarterbacks Data
Favorite Animal Data
Choice Board index
Creating The web page code
Final Preview
Video Help
Go to Directions
This is the beginning part of our assignment; creating the code Follow the step-by-step directions to help you create table. A video has been provided to help you if you should get stuck. Images of each step have also been provided.
Creating the web page code
+ info
1. Open a New Notepad File 2. Save the file as: table.html
Creating the web page code
Step 1: Create A File
1. In your new Notepad file, type the HTML Skeleton structure.
- See the image on the right for help or press/click on the info button for the code.
Creating the web page code
Step 2: Create the HTML Web Page Structure
+ info
1. Place your cursor by the Opening Body tag <body> and press the Enter key two times 2. Add the Opening <table> tag underneath the body tag, hit Enter and add the Closing </table> tag.
Creating the web page code
Step 3: Add the <table> tag
+ info
Step 4: Add the Table Headings
1. Place your cursor next to the <table> tag and press enter 2 times 2. Type the <tr> and <th> tags to create your header row. See the image to your right for help. You can also press/click on the info button for help with the code.
Creating the web page code
+ info
You can also Press/Click on the info button below to see the code.
1.Click to the right of the </tr> tag and press enter 2 times. 2. Add the code needed to add three rows to the table.
Creating the web page code
Step 5: Adding <tr>, </tr>, <td>, and </td>
+ info
+ html colors
You can also Press/Click on the info button below to see the code and press/click on the html colors button to see a list of color options.
1. Place your cursor to the right of the <head> Opening Tag and Press Enter Twice. 2. Type the following code to add borders to the table: <style> table, tr, th, td { border: 2px solid black; padding: 3px; } </style>
Creating the web page code
Step 6: Adding Borders
+ info
Press/Click here to finish
Need Help?
Press/Click on the Teacher Help button to watch the video again.
Press/Click on the HTML Code button to check over the code you should have in your Notepad.
Schedule a Zoom Meetup
HTML Code
example
Teacher Help
Creating the web page code
Press/Click on the example button to see an image of what your page should look like so far.
Take a moment to sit back and relax. Then double check your work so far. Use the links below, descriptions are provided after reach button.
Quick Check! What have you done?
Good job
Student Choice Board
Now go back to the choice board and pick the data set you want to use
Coding is done
Remember: Choose only ONE data set to use.
Start Here
Creating the web page code
Custom Data Option
Favorite Flowers Data
Rubric for Assignment
Steelers Quarterbacks Data
Favorite Animal Data
Choose a Topic
Data Set Option-01
Final Preview
Video Help
Go to Directions
You have chosen to use the Steelers Data Set. Follow the directions to add this data information to your table. You have already created the code structure for your web page. Now you are going to add in all the data that goes with this data set. Follow the directions and use the pictures for help. A video has been provided to help you if you should get stuck. Images have also been provided.
Data Set
Steelers Quarterbacks
01
NameRank Team
1. Add the following headings between each of the <th> </th> tags. Remember we already created these tags in the earlier steps of the assignment.
See the image to your right for help. You can also press/click on the info button for help with the code.
Steelers Data Set Directions
Step 1: Adding the heading data.
+ info
You can also Press/Click on the info button below to see the code.
1. Add the following quarterbacks, to the first <td> </td> in each set of <tr> elements.
- Remember to erase the # (hashtag) before typing this information into your web page.
Steelers Data Set Directions
Step 2: Adding in your row data
+ info
+ image
You can also Press/Click on the info button below to see the code and copy and paste the image links to your page. Press/Click the image button to see how your web page should look.
1. Add the following image tags between the <td> tags that are currently blank.
- <img src = "https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Tampa_Bay_Buccaneers_wordmark.svg/640px-Tampa_Bay_Buccaneers_wordmark.svg.png" width = "140" height = "70"> </td>
- <img src = "https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Green_Bay_Packers_wordmark.svg/640px-Green_Bay_Packers_wordmark.svg.png" width = "140" height = "70"> </td>
- <img src = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Buffalo_Bills_wordmark.svg/640px-Buffalo_Bills_wordmark.svg.png" width = "140" height = "70"> </td>
Steelers Data Set Directions
Step 3: Add Images to Your Table
+ info
+ html colors
You can also Press/Click on the info button below to see the code.
1. Replace each lin of code with the Quarterback name with the html line below to add a color shading to the cell. <td style="background-color: yellow">Tom Brady</style></td> <td style="background-color: lime">Aaron Rodgers</style></td> <td style="background-color: lightblue">Josh Allen</style></td> See the image to the right for help typing the code.
Steelers Data Set Directions
Step 4: Add Background Color to a cell
+ info
Rubric for Assignment
Need Help?
Press/Click on the Teacher Help button to watch the final steps on making the web page.
Press/Click on the HTML Code button to see the final code for your web page.
Schedule a Zoom Meetup
HTML Code
example
Teacher Help
Steelers Data Set Directions
Press/Click on the example button to see an image of what your page should look like so far.
Take a moment to sit back and relax. Then double check your work so far. Use the links below, descriptions are provided after reach button.
Final Check of your work!
Good job
Home
Make sure to go back to edio to submit and reflect.
Table Completed!
Data Set
Final Preview
Video Help
Go to Directions
You have chosen to use the Favorite Animals Data Set. Follow the directions to add this data information to your table. You have already created the code structure for your web page. Now you are going to add in all the data that goes with this data set. Follow the directions and use the pictures for help. A video has been provided to help you if you should get stuck. Images have also been provided.
Favorite Animals
02
Data Set Option-02
Animal NameRank Image
Add the following headings between each of the <th> </th> tags. Remember we already created these tags in the earlier steps of the assignment.
See the image to your right for help. You can also press/click on the info button for help with the code.
Favorite Animal Data Set Directions
Step 1: Adding the heading data.
+ info
Keep in mind that the last <td> </td> will be blank for now.
You can also Press/Click on the info button below to see the code.
1. Add the following Animals, to the first <td> </td> in each set of <tr> elements.
- Remember to erase the # (hashtag) before typing this information into your web page.
Favorite Animal Data Set Directions
Step 2: Adding in your row data
+ info
+ image
You can also Press/Click on the info button below to see the code and copy and paste the image links to your page. Press/Click the image button to see how your web page should look.
1. Add the following image tags between the <td> tags that are currently blank.
- <img src= "https://upload.wikimedia.org/wikipedia/commons/b/be/Pygoscelis_papua.jpg" width="200" height ="200">
- <img src= "https://upload.wikimedia.org/wikipedia/commons/3/3a/Girafee_ue.jpg" width="200" height="200">
- <img src= "https://upload.wikimedia.org/wikipedia/commons/3/30/Spotted_Hyaenas_%28Crocuta_crocuta%29_adult_and_cubs_..._%2832883548180%29.jpg" width="200" height="200">
Favorite Animal Data Set Directions
Step 3: Add Images to Your Table
+ info
+ html colors
You can also Press/Click on the info button below to see the code.
1. Replace each lin of code with the Animal name with the html line below to add a color shading to the cell. <td style="background-color: lightblue">Penguins</style></td> <td style="background-color: lime">Giraffes</style></td> <td style="background-color: beige">Hyenas</style></td> See the image to the right for help typing the code.
Favorite Animal Data Set Directions
Step 4: Add Background Color to a cell
+ info
Rubric for Assignment
Need Help?
Press/Click on the Teacher Help button to watch the video again.
Press/Click on the HTML Code button to see the final code for your web page.
Schedule a Zoom Meetup
HTML Code
example
Teacher Help
Favorite Animal Data Set Directions
Press/Click on the example button to see an image of what your page should look like so far.
Take a moment to sit back and relax. Then double check your work so far. Use the links below, descriptions are provided after reach button.
Final Check of your work!
Good job
Home
Make sure to go back to edio to submit and reflect.
Table Completed!
Data Set
Final Preview
Video Help
Go to Directions
You have chosen to use the Favorite Flowers Data Set. Follow the directions to add this data information to your table. You have already created the code structure for your web page. Now you are going to add in all the data that goes with this data set. Follow the directions and use the pictures for help.A video has been provided to help you if you should get stuck. Images have also been provided. A video has been provided to help you if you should get stuck. Images have also been provided.
Favorite Flowers
03
Data Set Option -03
Flower Name Rank Image
Add the following headings between each of the <th> </th> tags. Remember we already created these tags in the earlier steps of the assignment.
See the image to your right for help. You can also press/click on the info button for help with the code.
Favorite Animal Data Set Directions
Step 1: Adding the heading data.
+ info
You can also Press/Click on the info button below to see the code.
1. Add the following flowers, to the first <td> </td> in each set of <tr> elements. Remember to erase the # (hashtag) before typing this information into your web page. Flower Name Tulip Orchid Lily 2. Now add the following ranks, to the second <td> </td> in each set of <tr> elements. Rank 1 2 3
Favorite Animal Data Set Directions
Step 2: Adding in your row data
+ info
+ image
You can also Press/Click on the info button below to see the code and copy and paste the image links to your page. Press/Click the image button to see how your web page should look.
1. Add the following image tags between the <td> tags that are currently blank.
- <image src="https://upload.wikimedia.org/wikipedia/commons/d/de/Tulip_Helmar.jpg" width="200" height "200">
- <image src="https://upload.wikimedia.org/wikipedia/commons/9/90/Phalaenopsis_%28aka%29.jpg" width="200" height "200">
- <image src="https://upload.wikimedia.org/wikipedia/commons/d/dd/White_Lily_flower.jpg" width="200" height "200">
Favorite Animal Data Set Directions
Step 3: Add Images to Your Table
+ info
+ html colors
You can also Press/Click on the info button below to see the code.
1. Replace each lin of code with the Flower name with the html line below to add a color shading to the cell. <td style="background-color: Lightpink">Tulip</style></td> <td style="background-color: ivory">Orchid</style></td> <td style="background-color: deepskyblue">Lily</style></td> See the image to the right for help typing the code.
Favorite Animal Data Set Directions
Step 4: Add Background Color to a cell
+ info
Rubric for Assignment
Need Help?
Press/Click on the Teacher Help button to watch the video again.
Press/Click on the HTML Code button to see the final code for your web page.
Schedule a Zoom Meetup
HTML Code
example
Teacher Help
Favorite Animal Data Set Directions
Press/Click on the example button to see an image of what your page should look like so far.
Take a moment to sit back and relax. Then double check your work so far. Use the links below, descriptions are provided after reach button.
Final Check of your work!
Good job
Make sure to go back to edio to submit and reflect.
Table Completed!