This document provides instructions for adding tables to a web page. It discusses how to create tables with multiple rows and columns using HTML tags, and how to format tables by adding colors. The document outlines tasks for learners to create their own basic tables, add colors to tables, include multiple rows and columns, and identify errors in sample code. The goal is for learners to understand how to structure information in an HTML table.
2. Starter Activity: Scrolling Marquee
Investigate how to code a html scrolling marquee
and then create one that scrolls your name across
the screen.
Adding Tables to your Web Page
3. In this lesson you will learn how add tables with
multiple rows and columns using html. You will add
two tables on your zoo homepage. One to include
animals and the other form a website menu.
Lesson
Objectives
Be able to create a table on a web page
Be able to add color to a table on a web page
Be able to add rows and columns to a table
Be able to find errors in code
Adding Tables to your Web Page
4. Adding a Table to your Web page
Tables let people present data in a column format.
They are created through the use of a
<table>...</table> tag. Each column has its own
tag: <td>...</td>. The columns are surrounded by
the <tr>...</tr> tag.
Adding Tables to your Web Page
5. Task 13: Creating a Table
Load the text editor and enter the following code:
<html>
<head>
<title> This is a page using tables </title>
</head>
<body bgcolor="ffffff" text="000000">
<h1>A Web Page Using Tables</h1>
<table border="1">
<tr>
<td>This is column one</td>
<td>This is column two</td>
<td>This is column three</td>
</tr>
</table>
</body>
</html>
Save the file as table1.html and then preview your work.
Adding Tables to your Web Page
6. Task 14: Adding Colour to a Table
Load the text editor and open your HTML document: table1.html
At the relevant points add the tags and text that appear in red.
<table border="1">
<tr>
<td bgcolor="#000000">
<font color="#ffffff">
<b>This is column one</b>
<br>
I enjoy coding in HTML code.</font>
</td>
<td bgcolor="#bee3c2"> <b>This is column two</b></td>
<td bgcolor="#ff8000">
<font color="#804000">
<b>This is column three<br>I am so creative.</b>
</font>
</td>
</tr>
Save the file as table2.html and preview your work
Adding Tables to your Web Page
7. Task 15: Multiple Rows and Columns
Load the text editor and enter the following code:
<html>
<head>
<title> Rows </title>
</head>
<body>
<h1>Here's a table with two rows</h1>
<table border="1">
<tr>
<td>column 1 row 1</td>
<td>column 2 row 1</td>
</tr>
<tr>
<td>column 1 row 2</td>
<td>column 2 row 2</td>
</tr>
</table>
</body>
</html>
Save the file as table3.html and preview your work
Adding Tables to your Web Page
8. Task 16: Zoo Homepage
1.Load the text editor and open your HTML document: zoohomepage.html
2.Create a table 4 columns and 1 row towards the top of your page – this is
going form your website menu
3.Add an appropriate table background colour (For hex codes visit:
http://www.colorpicker.com/)
4.Add the word ‘Homepage’ in the first column, ‘Animals’ in the second,
‘Park Info’ in the third, ‘Photographs’ in the fourth and ‘Contact’ in the
fifth.
5.Create a second table complete with border at the bottom of your page;
3 columns and 3 rows
6.In each cell add the name of one animal that people can see at the zoo.
(Nine animals in total)
7.Save the document and then preview your work.
Adding Tables to your Web Page
9. Plenary: Find the Errors in this Code
<table boder="1">
<tr>
<td width="50%">
Red <br>
Yellow <br>
<td>
<td>
Black <br>
Pink <br>
</td>
</tr>
<tr>
<td>
<p>What is your favourite text colour?</p>
</td>
<td>
<img scr="red.jpg" />
</td>
</tr
<table>
Adding Tables to your Web Page
There are 5 in total
10. Answers: Find the Errors in this Code
<table border="1">
<tr>
<td width="50%">
Red <br>
Yellow <br>
</td>
<td>
Black <br>
Pink <br>
</td>
</tr>
<tr>
<td>
<p>What is your favourite text colour?</p>
</td>
<td>
<img src="red.jpg" />
</td>
</tr>
</table>
Adding Tables to your Web Page
There are 5 in total
11. Keywords
Be able to create a table on a web page
Be able to add color to a table on a web page
Be able to add rows and columns to a table
Be able to find errors in code
Objectives
Marquee
Table
Rows
Columns
Cells
Adding Tables to your Web Page
