1 / 12

Lists, Tables, and Frames

Lists How do we present bulleted and numbered lists of items? Can we control the shape of the bullets? Can we order lists in different ways? Tables How do we present tables of data in pleasing ways? Can we use tables to control the viewing experience? Frames

morwen
Download Presentation

Lists, Tables, and Frames

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. Lists How do we present bulleted and numbered lists of items? Can we control the shape of the bullets? Can we order lists in different ways? Tables How do we present tables of data in pleasing ways? Can we use tables to control the viewing experience? Frames Can we display many pages in a browser window? When would this feature be useful? Additional comments All of these constructs can be nested Lists, tables and frames can take longer to download Lists, Tables, and Frames

  2. <ul><li type="square"> cat<ul><li>Manx</li> <li>Persian</li> </ul> </li> <li>dog<ul><li>Collie</li> <li>Spaniel</li> </ul> </li> </ul> cat Manx Persian dog Collie Spaniel Unordered (Bulleted) Lists The type attribute changes the bullet format Values: type="circle", type="disk" type="square" A Nested Unordered List The tag <ul> is short for ‘unordered list’ The tag <li> is short for ‘list item’ Note: You can create stray bullets using the <li> tag Note: Make sure to wrap embedded tables in a <li> tag

  3. CSS Can Alter the Presentation <html><head> <style type="text/css"> ul {list-style-image:url('arrow.gif')} </style></head> <body> <ul><li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul></body></html>

  4. <ol type="1" start="2"> <li>cat <ol type="i"> <li>Manx</li> <li>Persian</li></ol></li> <li>dog <ol type="a"> <li>Collie</li> <li>Spaniel</li></ol></li> </ol> cat Manx Persian dog Collie Spaniel Ordered Lists The type attribute A Nested Ordered List The start attribute changes the starting point <ol> is short for ‘ordered list’

  5. Definition Lists Keywords and Definitions • A definition list is a list of terms • <dl> … </dl> • Definitions are not ordered or bulleted • Declare each term • <dt> … </dt> • Not indented and contains the term to be defined • Declare each definition • <dd> … </dd> • <dd> items do not have to have a corresponding <dt> item • Indented and contains the actual definition

  6. <dl> <dt>CPU</dt> <dd> Central Processing Unit</dd> <dt>ALU</dt> <dd> Arithmetic Logic Unit</dd> <dt>GHz</dt> <dd>Gigaherz</dd> </dl> CPU Central Processing Unit ALU Arithmetic Logic Unit GHz Gigahertz Definition List Example

  7. <table> … </table> Tables Information presented in rows and columns • Table Types • Well-defined borders like a spread sheet • They can blend into the page without borders • Attributes • border: width in pixels around the table • align: "left", "right", "center" horizontal alignment • cellspacing: space in pixels between the cell’s border • cellpadding: space in pixels between border and cells • Table caption: <caption> … </caption> • align: "top", "bottom" • Normally follows the <table> tag

  8. Table rows and columns • Table rows (<tr> … </tr>) • <tr> and <th> attributes • align: “left", "right", "center" default for cells in row • valign: "top", "bottom", "center" default for cells in row • Columns within a row (<td> … </td>) • Table headings (<th> … </th>) • Attributes for <th> and <td> • colspan: spanning multiple columns • rowspan: spanning multiple rows • align: "left", "right", "center" • Default: "center" for <th>, "left" for <td> • valign: "top", "bottom", "center" • Default: "center" • height, width

  9. Table Example Questions How do we merge columns and rows? How do we widen columns? How do we make a table blend with the page? <table border="2" cellspacing="5"> <tr><th>Mountain</th> <th>Height (ft)</th> </tr><tr> <td align="center">Everest</td> <td>29,028</td> </tr> </table>

  10. Frames Note: The frameset tag replaces the body tag • <frameset> … </frameset> • Attributes rows, cols • = "200, 300, 400" which means (2/9, 3/9, 4/9) or • = "22%, 33%, 44%" or which divides by percentage • = "33%, *" which means all remaining • <frame> … </frame> • Within frame set define each frame • Attributes: • source = web page url • name = a name of frame so other frames can change content using the target attribute of the <a> tag • scrolling="no", "yes", "auto" indicated whether scrollbar is to exist. • <noframes> … </noframes> • Executed if frames are not supported.

  11. Frame Example Question: How many xhtml pages do you need? <frameset rows="90,*,30" border=0> <noframes>Your browser does not support frames</noframes> <frameset cols="28%,*" > <frame name="topleft" src="topleft.html" scrolling="no" > <frame name="header" src="header.html" scrolling="no" > </frameset> <frameset cols="28%,*" > <frame name="menu" src="menu.html" > <frame name="display" src="cis199.html" marginwidth=10 marginheight=0 > </frameset> <frame name="footer" src="footer.html" scrolling="no" marginheight=0 > </frameset>

  12. Some Review Questions • What are the list types supported in HTML? • What are the bullet types for unordered lists? How do you change to a non-standard bullet format? • What is the difference between a frame and an iframe? What is the advantage of an iframe? Why are frames becoming less popular? • What are the attributes and tags that go with a table tag? How are they used? • What are several ways to widen the column of a table? • Give an example of when it is desirable to eliminate the border around a table.

More Related