1. Lesson 7 - Structured Block Elements Lists

2. Unordered Lists list item. list item

3. Summary for ul element Note: Appearance of bullets is big time browser dependent.

4. Unordered Lists can be nested. Simply put the "inner" list inside a li container of the "outer" list. Browsers automatically change the bullets for inner list for contrast with the outer list.

6. Ordered Lists list item. list item The default numbering is positive integers.

7. Summary for ol element Note: Also uses li containers for the list items Examples uses of ol attributes; List ordering: (d, e, f, g,...) List ordering: (X, XI, XII, XIII, XIV,...)

8. Ordered Lists can be nested -- same tactic as before. Use the type attribute to choose the numbering scheme for each list.

10. HTML TABLES The table-creating elements: table -- container for row/column creating elements tr -- container which creates a table row td -- container for table data (creates a column) The rendition

11. Cells automatically expand to accommodate cell contents Cells are drawn as small as possible to accommodate cell contents See source file table2.html (Figure 7.5)

12. Summary of the table element These settings control properties of the whole table

13. An example using some attributes of the table element

14. cellpadding -- padding on inside of cells cellspacing -- space between cells

15. Attributes of the tr element Control properties of a whole row Limited control -- align, valign, bgcolor More control at the td level -- properties of individual cells These attributes are explained in that context. Style rules give more control Global rule for tr -- affects all table rows in document tr{ style declarations } Style class for tr -- call class on individual rows tr.x{ style declarations }

16. See source file table5.html (Figure 7.8) Formatting for individual cells Can use th (table header) element instead of td Automatically centers and boldfaces cell content

17. Summary of td element (also for th ) Control appearance of individual table cells Styles also very useful for individual table cells td.x{ style declarations }

18. Default alignment inside cells: align="left" valign="middle"

19. Spanning rows ( rowspan ) and columns ( colspan ) rowspan -- always spans downward colspan -- always spans to the right

20. Example: Table for display of structured data.

21. Example: Table for page layout Use borderless table which covers whole browser window. Simple example: 1-row, 3-column layout

22. Problem with newspaper example: Table covers 100% of browser window Make window wider, columns expand accordingly Can distort intended look of page Solution - Make page layout a fixed width in pixels About a 600 pixel wide layout was the standard on old 640x480 pixel monitors (mid 1990’s) About a 750 pixel wide layout was the standard on old 800x600 pixel monitors (early 2000’s) Now about a 900 to 1000 pixel wide layout is the standard since most monitors are at least 1024x760 or 1280x960

23. Example with header stripe and left nav bar: Header covers 100% of browser window Nav stripe fixed at 200 pixels Width of content fixed at 900 pixels Stacked 1x2 Tables Implementation: See source file moe.html

24. A more elaborate example: (one table) Whole page fixed width Header and footer stripes Left and right nav bars Picture of page on next slide.

25. See source file sports1.html

26. How the spanning action was developed: Start with 4x3 table (required # of rows and columns) 1. Set the spans 2. Remove the un-needed table cells 3. Resize the table cells

27. A typical page layout

28. Another typical page layout

29. Yet another typical page layout

30. A page using a layout similar to the one on the previous slide.

31. See source file sports2.html

32. There is a distinct disadvantage to using one table to layout a whole page as opposed to separate tables for the header and the rest of the page. If the page has heavy overhead and it is all in one table, then the browser can’t render the page until it has figured out everything about the layout table. However, if the header is in a separate table, then at least the browser can render that quickly giving the viewer something to look at while the main layout table with the heavy content finishes rendering. Many sites actually use one table for the header, one for the main content, and a third for the footer. Tables stack seamlessly!