The Power of Tables

The Power of Tables

They aren't just for sitting stuff on anymore . . .

Tables on the Web

Used quite frequently Two basic types

– Text table– Graphic table

Text Table

only text standard typewriter characters use fixed-width fonts (typewriter fonts) NO proportional fonts

<pre></pre>

use this tag for the text table see example on resource page (Lab

Help)

Graphic Table

Can be complicated with HTML Let's look at the basic tags

Table tags

<table>

<tr>

<td>first cell</td>

<td>second cell</td>

</tr>

<tr>

<td>third cell</td>

<td>fourth cell</td>

</tr>

</table>

More tags

<th>This is the header</th>

<caption align="top">Here is a top caption</caption>

<caption align="bottom">Here is a bottom caption</caption>

Modifying Appearance

<table border = "size">increase size of table border

<table cellpadding = "size">increase gap between cell text and border

<table cellspacing = "size">increase the size of the border around

individual cells

Table Alignment

<table align = "alignment">LEFT or RIGHT

Also can use <center></center> to align table on page

Align text within cells with align tag<td align= "alignment">

Table and Cell Size

<table width="100%" height="100%">Need the "..."

<td width="30"> or <td width="30%">What's the difference?

More Properties

All table tags can take the take the bgcolor attribute. . .

Spanning Cells - check the table examples

<td colspan="2">

<td rowspan="2">

<td colspan="2" rowspan="2">

Page Layout with Tables

Work from outer to inner, left to right Nested tables Gutter Work through Gargoyle example to get

the hang of this See Gargoyle on Resource site

Explorer extensions

<table bordercolor="color"> Frames and Rules

– frame: which sides of table will have borders

– rule: specify the table grid (all, cols, rows, none)

Frames

Looking at the Big Picture

Frames

What exactly are frames? Attitudes about frames. . . Should you use frames?

Planning for Frames

What information should be displayed in each frame?

How do you want the frames organized? What sizes?

Which frames will be static? Which frames will respond to hyperlinks? What is the main Web site layout? What about resizing and the possibility of

changing the layout?

Frames are just that. . .

Frames are HTML documents that pull other HTML documents together and present them in one place. . .

Basic Frame Layout

<html>

<head>

<title></title>

</head>

<frameset>

frame definitions

</frameset>

</html>

Frame Layout

Notice there is no <body> Why?

Columns and Rows

you can use either cols or rows in each <frameset> but not both

<frameset rows = "row height, row height, row height">

<frameset cols = "column width, column width, column width"

Columns and Rows

You can use:– pixels– percentage– *– You can combine all three– Should always use an "*"

• accounts for browser display widths: 640 x 480, 800 x 600, etc.

Frame Source

You have to supply the source: the HTML document

Without the source, you have empty space

Example Columns

<html><head><title>Sample Frame Columns</title></head>

<frameset cols= "160,25%, *"><frame src = "warbird.htm"><frame src = “DrAl.htm"><frame src = "clearframe.htm"></frameset>

</html>

Examples

View the examples on-line http://homepages.wmich.edu/~rea/380/r

esources/labhelp.htm

Nesting Frames

If you want both rows and columns or multiples of either, you must NEST your FRAMES

When you NEST frames, your FRAMESET proportions adjust accordingly

FRAMESET in Nested

<frameset rows = "30%, *">

<frame src = "header.htm">



<frameset cols="30%, *">

<frame src = "toc.htm">

<frame src = "body.htm">

</frameset>

</frameset>

Controlling Frame Appearance

Frame Scroll Bars Size of margin between source

document and frame border Whether or not the user is allowed to

change frame width and height

Frame Scrolling

<frame src = "document" scrolling = "value">

value = yes or no Only set to "no" if you are sure all of page will display. Check different screen resolutions.

Frame Margins

<frame src = "document.htm" marginheight = "value" marginwidth = "value">

Browser automatically determines the spacing, but sometimes the space between the border and the content is too large or small. . .

More on Margins

MARGINHEIGHT = space in pixels that appears above and below the content of the page in the frame

MARGINWIDTH = space in pixels that appears the page's left and right

Don't have to specify both. Can use one and the browser will assume the same for the other

inline image = 0 to 1 text = 5 to 10

Frame Resizing

Use to freeze layout once you have it how you want it.

<frame src = "document.htm" noresize>

Combining Frames and Hyperlinks By default, clicking a hyperlink within a

frame loads the HTML document into the same frame. . .

You need to give each frame a name and then TARGET that frame in the HYPERLINK

Frame NAMING

<frame src = "document.htm" name = "frame_name">

case sensitive single word

<a href = "document.htm" target = "frame_name">link</a>

<BASE>

If you want to use the same target for all links in a page

<head><base target = "frame_name">

</head> Other target tags in the page will

supercede the <base>

Magic Target Names

Special tags that can be used in place of a frame_name in a HYPERTEXT link

Case sensitive

Magic Target Names (cont.)

_blank = loads the document into a new browser window

_self = loads the document into the same frame or window that contains the hyperlink tag

_parent = in nested frames, loads the document into the frame that contains the frame with the hyperlink tag

_top = loads the document into the full display area, replacing the current frame layout

<noframes>

Need to use the <noframes> to be viewable by browsers that cannot read frames

<noframes> in action

<html><head><title></title></head><frameset>

entire frame layout</frameset><noframes><body>

page layout</body></noframes></html>

Frame Tips

Create framed and non-framed versions of your Website to accommodate all browsers

Do not turn off scroll unless you are sure all content can be visible given screen resolutions

Assign names to ALL of your frames Use the <base> tag whenever possible Never display external pages within your frames

(If you didn't design it and you don't have control over it, don't use it in your frames.)

Frame Extensions

<frameset bordercolor = "color">

<frame bordercolor = "color">

<frameset border = "value">

<frameset rows = "30%, *" bordercolor="#ff0000" border="2">

Exercise #2

http://homepages.wmich.edu/~rea/380/exercises/ex2.jpg

Documents

The Power of Tables