1. Cos 125 Day 24

2. Agenda All students meeting 7 Pm Monday, April 19 UMS Strategic Plan Assignment #7 Posted Due April 20 Two (one?) more to go Quiz Four Graded 1 A, 6 B’s, 4 C’s and 3 D’s Exam #5 is April 30 Castro Chap13, 14, 15 & 16 25 M/C questions, WebCT 50 min Website for text book http://www.cookwood.com/html5ed/ 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

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 Add to content to the cell

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

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

8. Example of a Simple table with borders

9. 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 The width of the widest cell in a column determines the width of the column

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

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

12. Float Example

13. Combining Tables Create the inner table and/or contents of cells first Create the outer table and put a “placeholder” where ever 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

14. Example

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

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

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

18. Example of Spacing and backgrounds

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

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

21. Use both Row and Col spans R=3 C=2 R=3 C=3 R=2 C=3

22. Dividing Your Table into Column Groups Used for grouping columns for formatting Doesn’t work in Netscape Two ways Structural (allows border control) Non-structural You can use both together

23. Column groups

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

25. Choosing Which 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 hsides -> border on left and right vsides -> border above and below rhs -> right side only lhs -> left side only box -> all four sides

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

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

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

30. Using Dreamweaver