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

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

3. CSS Can Alter the Presentation ul {list-style-image:url('arrow.gif')} Coffee Tea Coca Cola

4. Ordered Lists cat Manx Persian dog Collie Spaniel 2.cat i.Manx ii.Persian 3.dog a.Collie b.Spaniel A Nested Ordered List is short for ‘ordered list’ The type attribute arabictype="1"1, 2, 3 lower alphatype="a"a, b, c upper alphatype="A"A, B, C lower romantype="i"i, ii, iii upper romantype="I"I, II, III The start attribute changes the starting point

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

6. Definition List Example CPU Central Processing Unit ALU Arithmetic Logic Unit GHz Gigaherz CPU Central Processing Unit ALU Arithmetic Logic Unit GHz Gigahertz

7. Tables 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: … –align: "top", "bottom" –Normally follows the tag Information presented in rows and columns …

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

9. Table Example Mountain Height (ft) Everest 29,028 Questions How do we merge columns and rows? How do we widen columns? How do we make a table blend with the page?

10. Frames … –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 … –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 tag scrolling="no", "yes", "auto" indicated whether scrollbar is to exist. … –Executed if frames are not supported. Note: The frameset tag replaces the body tag

11. Frame Example Your browser does not support frames <frame name="display" src="cis199.html" marginwidth=10 marginheight=0 > <frame name="footer" src="footer.html" scrolling="no" marginheight=0 > Question: How many xhtml pages do you need?

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.