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
Web Design
Student Choice Board-1.2.5
Creating a Table
Start
Creating a Table and Adding Images using HTML
Introduction
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.
+ info
Rubric for this assignment
Start Here
Rubric for Assignment
Creating the web page code
Remember: Choose only ONE data set to use.
Favorite Animal Data
Favorite Flowers Data
Steelers Quarterbacks Data
Choice Board index
Custom Data Option
Creating The web page code
Creating the web page code
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.
Go to Directions
Video Help
Final Preview
Creating the web page code
Step 1: Create A File
1. Open a New Notepad File 2. Save the file as: table.html
+ info
Creating the web page code
Step 2: Create the HTML Web Page Structure
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.
+ info
Creating the web page code
Step 3: Add the <table> tag
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.
+ info
Creating the web page code
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.
+ info
Creating the web page code
Step 5: Adding <tr>, </tr>, <td>, and </td>
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.
You can also Press/Click on the info button below to see the code.
+ info
Creating the web page code
Step 6: Adding Borders
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>
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.
+ info
+ html colors
Press/Click here to finish
Creating the web page code
Quick Check! What have you done?
Need Help?
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.
Schedule a Zoom Meetup
example
Press/Click on the example button to see an image of what your page should look like so far.
HTML Code
Press/Click on the HTML Code button to check over the code you should have in your Notepad.
Teacher Help
Press/Click on the Teacher Help button to watch the video again.
Good job
Coding is done
Now go back to the choice board and pick the data set you want to use
Student Choice Board
Start Here
Rubric for Assignment
Creating the web page code
Remember: Choose only ONE data set to use.
Favorite Animal Data
Favorite Flowers Data
Steelers Quarterbacks Data
Choose a Topic
Custom Data Option
Data Set Option-01
Data Set
01
Steelers Quarterbacks
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.
Go to Directions
Video Help
Final Preview
Steelers Data Set Directions
Step 1: Adding the heading data.
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.
NameRank Team
See the image to your right for help. You can also press/click on the info button for help with the code.
+ info
Steelers Data Set Directions
Step 2: Adding in your row data
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.
You can also Press/Click on the info button below to see the code.
+ info
Steelers Data Set Directions
Step 3: Add Images to Your Table
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>
+ image
+ info
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.
Steelers Data Set Directions
Step 4: Add Background Color to a cell
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.
You can also Press/Click on the info button below to see the code.
+ html colors
+ info
Steelers Data Set Directions
Final Check of your work!
Need Help?
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.
Schedule a Zoom Meetup
Rubric for Assignment
example
Press/Click on the example button to see an image of what your page should look like so far.
HTML Code
Press/Click on the HTML Code button to see the final code for your web page.
Teacher Help
Press/Click on the Teacher Help button to watch the final steps on making the web page.
Good job
Table Completed!
Make sure to go back to edio to submit and reflect.
Home
Data Set Option-02
Data Set
02
Favorite Animals
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.
Video Help
Final Preview
Favorite Animal Data Set Directions
Step 1: Adding the heading data.
Add the following headings between each of the <th> </th> tags. Remember we already created these tags in the earlier steps of the assignment.
Animal NameRank Image
See the image to your right for help. You can also press/click on the info button for help with the code.
+ info
Favorite Animal Data Set Directions
Step 2: Adding in your row data
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.
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.
+ info
Favorite Animal Data Set Directions
Step 3: Add Images to Your Table
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">
+ image
+ info
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.
Favorite Animal Data Set Directions
Step 4: Add Background Color to a cell
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.
You can also Press/Click on the info button below to see the code.
+ html colors
+ info
Favorite Animal Data Set Directions
Final Check of your work!
Need Help?
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.
Schedule a Zoom Meetup
Rubric for Assignment
example
Press/Click on the example button to see an image of what your page should look like so far.
HTML Code
Press/Click on the HTML Code button to see the final code for your web page.
Teacher Help
Press/Click on the Teacher Help button to watch the video again.
Good job
Table Completed!
Make sure to go back to edio to submit and reflect.
Home
Data Set Option -03
Data Set
03
Favorite Flowers
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.
Go to Directions
Video Help
Final Preview
Favorite Animal Data Set Directions
Step 1: Adding the heading data.
Add the following headings between each of the <th> </th> tags. Remember we already created these tags in the earlier steps of the assignment.
Flower Name Rank Image
+ info
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 2: Adding in your row data
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
You can also Press/Click on the info button below to see the code.
+ info
Favorite Animal Data Set Directions
Step 3: Add Images to Your Table
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">
+ image
+ info
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.
Favorite Animal Data Set Directions
Step 4: Add Background Color to a cell
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.
You can also Press/Click on the info button below to see the code.
+ html colors
+ info
Favorite Animal Data Set Directions
Final Check of your work!
Need Help?
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.
Schedule a Zoom Meetup
Rubric for Assignment
example
Press/Click on the example button to see an image of what your page should look like so far.
HTML Code
Press/Click on the HTML Code button to see the final code for your web page.
Teacher Help
Press/Click on the Teacher Help button to watch the video again.
Good job
Table Completed!
Make sure to go back to edio to submit and reflect.