1. Cos 125 Day 22

2. Agenda Assignment 6 Not corrected Waiting for tune-ins Assignment 7 is posted Assignment 7 Due April 22 @ 2PM Left to do 1 Assignments (8 total) Due May 2 3 rd and final Capstone progress report due April 25 1 Quiz on May 2 Capstone projects on May 6 @ 3 PM Lecture/Discuss Tables

3. Learning Objectives Understand how to create a table Apply Border, width, background cellpadding, cellspacing, rowspan and colspan to a table Create Vertical and Horizontal sections within a table Understand how to write tables that display quickly in the browser http://perleybrook.umfk.maine.edu/samples/styletables.htm

4. Tables Before CSS, most webpage layout was done with tables Easy to create “liquid” designs with tables using percentages for table parameters Tables have two basic structural elements Rows Columns Intersection of rows and columns create “cells” that can hold content R1C1R2C2 R2C1R2C2 R1 C1 R4 C6

5. Mapping out your page Design on a piece of Paper (graph paper) Figure out how Rows and Columns you will need You can put a table within a table (nesting) Figure out dimensions 600 pixels wide is standard for a web page Create the ‘Skeleton’ of your page with just xHTML tags @nbsp; Add to content to the cell

6. Sample Mapping BannerAd MenuTextPicture Caption Footer

7. Creating a simple table 1.Type to start the table 2.Add a row 3.Add ”content” to add a cell to the current row 1.Content can be any xHTML element including another table 4.Add more cells 5.Complete the row 6.Repeat steps 2 through 5 to add more rows 7.Finish the table

8. Table Example

9. Adding A border Two ways to add a border xHTML N is size in pixels Applies to table and each cell CSS (overrides xHTML) table{border-style:solid} table{border: solid red 2px} Applies to table and not cells To do cells you have to create style rule for element td{border-style:solid}

10. Example of a Simple table with borders

11. Setting the Width By default, a browser determines the width of the cells by the content’s width, up to the width of the browser It better to set the width yourself (two ways) xHTML CSS table{width:80%} td{width:10%} Using percentages allows the table to adjust to browser (or parent) changes in width (liquid layout) The width of the widest cell in a column determines the width of the column

12. Centering a Table on the Page Again there are two ways CSS Table{width:400px;margin-right:auto;margin- left:auto} xHTML ….

13. Wrapping Text around a Table xHTML Deprecated Text that appears after will flow to opposite side (put text in ) CSS table{width:200px; float:right (or left)}

14. Float Example

15. Combining Tables Create the inner table and/or contents of cells first Create the outer table and put a “placeholder” wherever you want the inner table to be Test both tables Replace the place holder with the code for the inner table by cut and paste The more complicated your table nesting, the harder it will be for the browser to figure out “what goes where”…slowing down the page load Easier to create multiple tables on top of each other

16. Combining tables Step 1 Step 2 Step 3

17. Example

18. Aligning a Cell’s Contents Two directions Vertical and Horizontal Default is left align in middle of cell xHTML H-direction can be left, right or center V-direction can be top, middle, bottom or baseline CSS selector{text-align:hvalue;veritical-align:postion} Selector can table, tr, td hvalue can be left, right, center or justify position can be top, middle, bottom or baseline

19. Changing the background xHTML CSS Selector{background: values} Same as discussed in chapter 11

20. Example of Spacing and backgrounds

21. Controlling spacing Two xHTML attributes for cell spacing Cell Padding is inside the cell and keeps the contents away from the edge of the cell Cell spacing is outside the cells and keeps the edges of respective cells apart In CSS Use padding and border-spacing properties td{padding:10px;border-spacing:10px}

22. Padding and spacing Spacing Contents Padding Contents Padding Contents Padding Contents Padding Contents

23. Spanning a Cell across Columns You can make a cell span across columns … N is number of columns to span Span = 4 Span= 3 Span = 2

24. Spanning a cell across Rows You can make a cell span across rows … N is number of rows to span RS 3 RS 2 RS 3

25. Use both Row and Col spans Rowspan=3 Colspan=2 Rowspan=3 Colspan=3 Rowspan=2 Colspan=3

26. Dividing Your Table into Column Groups Used for grouping columns for formatting Two ways Structural (allows border control) Goes between and first Non-structural You can use both together

27. Column groups

28. Dividing the table into horizontal Sections Again used for formatting After and before first add rows You can only have one head and one foot Attributes can any of the attributes we have already discussed

29. Choosing Which External Borders to display You can choose what external sides to display Location can be void -> no borders above -> one border above table below -> one border below table vsides -> border on left and right hsides -> border above and below rhs -> right side only lhs -> left side only box -> all four sides

30. Choosing Which Internal Borders to display You can also choose which internal borders to display Area can be none -> no internal borders rows -> lines between rows cols -> lines between cols groups -> lines between colgroups and thead, tbody and tfoot all -> lines between each row and column

32. Controlling Line Breaks in a Cell To keep text on a single line text Browser will make that cell as wide as it needs to be to display text on one line Overrides any width attributes or properties set

33. Speeding up Table Display Keep tables small Specify width of table in pixels Specify width of cells in pixels or percentages Divide table into column groups Add table-layout:fixed to table element style rule Only looks at first row to determine width of columns Can cause some cells to be too small

34. Using Dreamweaver

35. Assignment #7 Banner.gif About Fort Kent (3X2 table in step g Part I) Mission Statement (3X2 table in step g part II) History of UMFK (?x? table in step g part III) About Fort Kent (?x? table in step g part IV) Links (created in step h) Main Table created in step f

36. Final Table Banner.gif Links 3X2 ?X? ?x?