09: My Schedule
Learning Target
-
- Use table, tr, td, thead and tbody tags to create tables in webpages
- Organize information in a tabular format
Resources
HTML Table Tutorials:
Instructions
Step 1:
Create a new webpage called schedule.html.
Step 2:
Add a heading to your page and also two tables (Red Day and Blue Day). Your tables should display your schedule for each day. For example:
You can make a cell span many columns by adding the attribute colspan. For example:
NOTE: To check that your table is structured correctly, you can turn on the default HTML borders.
Step 4:
Add custom borders to your table to make it look better. For example:
This code adds a border to the table using inline styles:
Adding styled borders to all the individual cells using this method requires a style for each cell:
This can get really, really time consuming since changes or corrections require lots of copy-paste.
THERE IS A MUCH FASTER WAY!
We can use an embedded or internal style sheet to change the appearance of many things at once!First, we add a <style> tag inside the <head> of our document:
Then, we create a CSS ruleset.
Use TD for the selector and add a rule for the border:
Anything that uses the TD tag will now have this border (unless there is an inline style within the tag).
Challenges:
-
- Add additional styles to your page to make it unique to you.
- Add images to your page that represent your classes or school-related activities.
- Link the names of your classes to their online webpage page (e.g. Google Classroom, Canvas, Moodle, etc).