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">
<!--nested frames-->
<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