Adding tables to your web page

Adding Tables to your Web Page

Starter Activity: Scrolling Marquee
Investigate how to code a html scrolling marquee
and then create one that scrolls your name across
the screen.

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 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.

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.

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

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>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Save the file as table3.html and preview your work

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.

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>
There are 5 in total

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>
There are 5 in total

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Adding tables to your web page

Similar to Adding tables to your web page (20)

More from cachs_computing

More from cachs_computing (20)

Recently uploaded

Recently uploaded (20)

Adding tables to your web page