Essential Question: How can I make a web page with an HTML Table?
Mastery Objectives:
SWBAT create a web page using tables.
SWBAT format a table in HTML.
The Moylan Family is hosting their annual family reunion and they have asked you to build a web page for the event schedule! Use your knowledge of HTML to display a table to the attendees.
Below is a template for the web page you are building. Please copy and paste this into your web page.
<!DOCTYPE html>
<html>
<head>
<title>Moylan Family Reunion</title>
</head>
<body>
<header>
<h1>Moylan Family Reunion</h1>
</header>
<div class="container">
</div>
<footer>
<h3>Contact</h3>
<h3>Location</h3>
<h3>Privacy Policy</h3>
</footer>
</body>
</html>
In index.html, inside of the <div> element that has the attribute class with a value of "container", create a new <table> element.
Inside of the <table> element, add a section for table headings using <thead>.
Then, add two rows inside of it using the table row element.
Inside the first table row element, from task 2, add a table heading element.
Inside of that, include an <h1> with the following text: Family Reunion Schedule.
Inside the second table row element, from task 2, add two <th>s:
In the first, add an <h2> that says Time.
In the second, add an <h2> that says Event.
You may notice that “Family Reunion Schedule” does not stretch across the entire table. Let’s fix that!
In the opening <th> tag of this element, add colspan="2".
After the closing </thead> tag, section off the table using the table body element.
Inside of the table body you created in the previous task, create 5 rows using the table row element.
Inside each row, create two cells using the table data element.
The first table data in each row should have the attribute class with the value "left".
Inside each of the 5 <td class="left"> elements, add <h3> elements that include the times of the events:
12:00 PM
01:00 PM
02:00 PM
03:00 PM
04:00 PM
Inside each of the <td> elements that does not have a class attribute with a value of "left", add <h3> elements that include the name of events:
Welcome Reception
Storytelling & Trivia
Picnic
Family Olympics
Family Recipe Swap and Bake-Off
Format the website and add color and fonts. If you want, you can use a CSS sheet to change the background.
Add 3 images to your web page.