Computing The Teacher

HTML (2)

HyperText Markup Language

Computing The Teacher

Tables

• The layout of a web page is created by using a table <table>

• A table has a number of rows <tr>

• ..and each row has a number of cells <td>

Computing The Teacher

Table Example

Hello

People

Smee<table>

<tr><td>Hello</td><td></td>

</tr><tr>

<td></td><td>People</td>

</tr><tr>

<td>Smee</td><td></td>

</tr></table>

HTML code for this table would be…

Computing The Teacher

Table Example 2

Hello World

One Two Three

<table> <tr> <td colspan=“3” align=“center”>Hello World</td> </tr> <tr> <td>One</td> <td>Two</td> <td>Three</td> </tr></table>

A cell may span across several columns…

Computing The Teacher

HTML Challenge 1

• Try to output this table on a web page…

Hello World !!!

Tom Dick Harry

See you soon!

Computing The Teacher

Table Example 3

• Sometimes cells may span several rows…

Cell spans 3 rows

One

Two

Three

<table> <tr> <td rowspan=“3”>Cell spans 3 rows</td> <td>One</td> </tr> <tr> <td>Two</td> </tr> <tr> <td>Three</td> </tr></table>

Use the rowspan attribute…

Computing The Teacher

HTML Challenge 2

• Display this table on a web page:

First Page

Side

1 2 3

4 Five

Bottom