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...
In this lesson you will learn how add tables with
multiple rows and columns using html. You will add
two tables on your zo...
Adding a Table to your Web page
Tables let people present data in a column format.
They are created through the use of a
<...
Task 13: Creating a Table
Load the text editor and enter the following code:
<html>
<head>
<title> This is a page using ta...
Task 14: Adding Colour to a Table
Load the text editor and open your HTML document: table1.html
At the relevant points add...
Task 15: Multiple Rows and Columns
Load the text editor and enter the following code:
<html>
<head>
<title> Rows </title>
...
Task 16: Zoo Homepage
1.Load the text editor and open your HTML document: zoohomepage.html
2.Create a table 4 columns and ...
Plenary: Find the Errors in this Code
<table boder="1">
<tr>
<td width="50%">
Red <br>
Yellow <br>
<td>
<td>
Black <br>
Pi...
Answers: Find the Errors in this Code
<table border="1">
<tr>
<td width="50%">
Red <br>
Yellow <br>
</td>
<td>
Black <br>
...
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 a...
Upcoming SlideShare
Loading in …5
×

Adding tables to your web page

1,803 views

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,803
On SlideShare
0
From Embeds
0
Number of Embeds
1,492
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Adding tables to your web page

  1. 1. Adding Tables to your Web Page
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×