1 / 41

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

wren
Download Presentation

The Power of Tables

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. The Power of Tables They aren't just for sitting stuff on anymore . . .

  2. Tables on the Web • Used quite frequently • Two basic types • Text table • Graphic table

  3. Text Table • only text • standard typewriter characters • use fixed-width fonts (typewriter fonts) • NO proportional fonts

  4. <pre></pre> • use this tag for the text table • see example on resource page (Lab Help)

  5. Graphic Table • Can be complicated with HTML • Let's look at the basic tags

  6. Table tags <table> <tr> <td>first cell</td> <td>second cell</td> </tr> <tr> <td>third cell</td> <td>fourth cell</td> </tr> </table>

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

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

  9. 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">

  10. Table and Cell Size <table width="100%" height="100%"> Need the "..." <td width="30"> or <td width="30%"> What's the difference?

  11. 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">

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

  13. 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)

  14. Frames Looking at the Big Picture

  15. Frames • What exactly are frames? • Attitudes about frames. . . • Should you use frames?

  16. 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?

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

  18. Basic Frame Layout <html> <head> <title></title> </head> <frameset> frame definitions </frameset> </html>

  19. Frame Layout • Notice there is no <body> • Why?

  20. 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"

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

  22. Frame Source • You have to supply the source: the HTML document • Without the source, you have empty space

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

  24. Examples • View the examples on-line • http://homepages.wmich.edu/~rea/380/resources/labhelp.htm

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

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

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

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

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

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

  31. Frame Resizing • Use to freeze layout once you have it how you want it. <frame src = "document.htm" noresize>

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

  33. Frame NAMING <frame src = "document.htm" name = "frame_name"> • case sensitive • single word <a href = "document.htm" target = "frame_name">link</a>

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

  35. Magic Target Names • Special tags that can be used in place of a frame_name in a HYPERTEXT link • Case sensitive

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

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

  38. <noframes> in action <html> <head> <title></title> </head> <frameset> entire frame layout </frameset> <noframes> <body> page layout </body> </noframes> </html>

  39. 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.)

  40. Frame Extensions <frameset bordercolor = "color"> <frame bordercolor = "color"> <frameset border = "value"> <frameset rows = "30%, *" bordercolor="#ff0000" border="2">

  41. Exercise #2 • http://homepages.wmich.edu/~rea/380/exercises/ex2.jpg

More Related