CREATING LINKS

TABLE• Tables allow you to organize and

arrange data into columns and rows. Tables also allow you to divide your page into section where you can place headers, footers and navigation links. Almost all Web sites are laid out using tables.

TABLE• A table is made up of rows and

columns. You can place different elements in each cell like text, images and hyperlinks.

Creating a TableTables arrange and organize content into columns and rows. Basically, they can be made via the following container tags: • <table></table>- tag that creates the table,

instructs the browser that a table is being made.

• <tr></tr> - tag that sets off each row in a table.

• <td></td> - tag that sets off each cell (column) in a row.

Creating a TableTo set the width of your table, you can use the width attribute for the <table> tag.

For example, you can set the width like: <table width=“75%”>, this will instruct the browser to set the table width to 75% percent of the screen.You can also set the width through pixel, like <table width=“1000”>

Attributes for <table></table>TagsAttribute Name Definition

align Indicates the horizontal alignment of the table (left, right, center)Ex. <table align=“center”></table>

background Indicates the background image of the tableEx. <table background=“redflower.jpg”></table>

bgcolor Indicates the background color of the tableEx. <table bgcolor=“red”></table>

Attributes for <table></table>TagsAttribute Name Definition

border Indicates the thickness of the border in pixels Ex. <table border=“2”></table>

bordercolor Indicates the color of the borderEx. <table bordercolor=“red”></table>

width Indicates the width of the table in pixels or percent of the width displayed by the web browser.Ex. <table width=“800”></table>

Attributes for <table></table>TagsAttribute Name Definition

cellpadding Indicates the distance (in pixels) between the contents of the cells and the border around it. Ex. <table cellpadding=“2”></table>

cellspacing Indicates the distance between the cells in pixelsEx. <table cellspacing=“2”></table>

height Indicates the height of the table in pixels or percent of the height displayed by the web browser.Ex. <table height=“800”></table>

Example of Table tag code

Modifying Table Rows <tr></tr>Specifically, rows appearance can be changed as well and can be done through their attributes. By default, the contents of table rows are aligned vertically.

Attribute Name Definition

align Indicates the horizontal alignment of the contents of the row. (left, center, right) Ex. <tr align=“center”></tr>

valign Indicates the vertical alignment of the contents of the row. (top, middle, bottom) Ex. <tr valign=“middle”></tr>

height

bgcolor

Indicates the height of the row in pixels Ex. <tr height=“200”></tr>

Indicates the background color of the row. Ex. <tr bgcolor=“red”></tr>

Modifying Table Data <td></td>The appearance of <td></td> data on each cell can be changed through their attributes

Attribute Name Definition

align Indicates the horizontal alignment of the contents of the cell (left, center, right) Ex. <td align=“center”></td>

valign Indicates the vertical alignment of the contents of the cell. (top, middle, bottom) Ex. <td valign=“middle”></td>

height

bgcolor

Indicates the height of the cell in pixels Ex. <td height=“200”></td>

Indicates the background color of the cell. Ex. <td bgcolor=“red”></td>

Modifying Table Data <td></td>The appearance of <td></td> data on each cell can be changed through their attributes

Attribute Name Definition

width Indicates the width of the table in pixels or percent of the width of the table Ex. <td width=“300”></td>

nowrap Inhibit word wrapping in the cellEx. <td nowrap></td>

colspan

rowspan

Merges multiple cellsEx. <td colspan=“2”></td>

Merges multiple rowsEx. <td rowspan=“2”></td>

Activity: Write the codes for the following outputs.

Example <tr>and <td> tag attributes

Assignment Activity: To be posted in the FB group page.

Output Code

1. Asia a. Philippines

• Manila• Quezon• Rizal

b. Thailand• Bangkok• Phuket

2. Europe a. Italy

• Rome• Venice

b. United Kingdom• London• Nottingham

Transitional Page

Backdrops:- These are full sized backdrops, just scale them up!- Can be Copy-Pasted out of Templates for use anywhere!

www.animationfactory.com