creating table 2

COLORS AND LAYOUTwww.netlearn.com.ph

ORGANIZING WEBSITES

CREATING TABLE

• When you're planning a Web site, it's

important to establish the goal of the

site first.

Make sure you know who your audience is.

Make sure the goal is specific and

quantitative.

Keep your goal simple—about one

sentence long.

PLANNING YOUR SITEwww.netlearn.com.ph

PLANNING YOUR SITE

The goal of my website is…

www.netlearn.com.ph

Once your site's goal is defined, sketch

out the structure of your site

beforehand.

Use a pencil and paper to draw boxes

for pages and arrows for links.

Remember to keep your goal in mind

as you do this.


After you've sketched a map of your site, it's time to start

sketching a common layout for each of your pages.

You could start designing the page layout using SharePoint

Designer, but we recommend keeping it on paper at this point.

Pencil and paper can be easier to change, as noted before.


Here are some of the things to consider as

you sketch the layout:

• Should each page have a common header

and footer?

• Should the site have a consistent method of

navigation?

• Are there any marketing requirements for

the site? Legal requirements?


Using your sketches as a model, you'll

eventually use SharePoint Designer to

design Web pages in HTML. You might

use a table for the skeletal structure, or

layout, of the page.

Once the layout is defined, you can fill it

with content. For example, you'll want

to add text, hyperlinks, pictures, and

interactive buttons.


Red Excitement, energy, passion, desire, speed, strength, power, heat, love, aggression, danger, fire, blood, war, violence, aggression, all things intense and passionate. Orange Energy, balance, warmth, enthusiasm, vibrant, expansive, flamboyant, demanding of attention. Yellow Joy, happiness, optimism, idealism, imagination, hope, sunshine, summer, gold, philosophy, dishonesty, cowardice, betrayal, jealousy, covetousness, deceit, illness, hazard.Green Nature, environment, healthy, good luck, renewal, youth, vigor, spring, generosity, fertility, jealousy, inexperience, envy, misfortune. Blue Peace, tranquility, calm, stability, harmony, unity, trust, truth, confidence, conservatism, security, cleanliness, order, loyalty, sky, water, cold, technology, depression, appetite suppressant.Purple Royalty, spirituality, nobility, spirituality, ceremony, mysterious, transformation, wisdom, enlightenment, cruelty, arrogance, mourning.


www.netlearn.com.ph

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 Table

Tables 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 Table

To 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 table

Ex. <table background=“redflower.jpg”></table>

bgcolor Indicates the background color of the table

Ex. <table bgcolor=“red”></table>

Attributes for


border Indicates the thickness of the border in pixels

Ex. <table border=“2”></table>

bordercolor Indicates the color of the border

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


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 pixels

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


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


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 cell

Ex. <td nowrap></td>

colspan

rowspan

Merges multiple cells

Ex. <td colspan=“2”></td>

Merges multiple rows

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

http://www.animationfactory.com/

creating table 2

Education