Cos 125

1. Cos 125 Day 22

2. Agenda • Assignment 6 Not corrected • Waiting for tune-ins • Assignment 7 is posted • Due April 22 @ 2PM • Left to do • 1 Assignments (8 total) • Due May 2 • 3rd 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

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

7. Creating a simple table • Type <table> to start the table • Add a row <tr> • Add <td>”content”</td> to add a cell to the current row • Content can be any xHTML element including another table • Add more cells <td></td> • Complete the row </tr> • Repeat steps 2 through 5 to add more rows • Finish the table </table>

8. Table Example <table width="100%"> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table>

9. Adding A border • Two ways to add a border • xHTML • <table border=“n”> • 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 <td> 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 • <table width=“120” or “80%”> • <td width=“20” or “10%”> • 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 • <table align=“center”> • <center><table>….</table></center>

13. Wrapping Text around a Table • xHTML • Deprecated • <table align=“left” or “right”> • Text that appears after </table> will flow to opposite side (put text in <p></p>) • 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 2 Step 3 Step 1

17. Example

18. Aligning a Cell’s Contents • Two directions Vertical and Horizontal • Default is left align in middle of cell • xHTML • <table or tr or td align=“H-direction” valign=“V-direction”> • 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 • <table or tr or td bgcolor=“color”> • <table or tr or td background=“image.url”> • 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 • <table cellpadding=“10” cellspacing=“10”> • In CSS • Use padding and border-spacing properties • td{padding:10px;border-spacing:10px}

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

23. Spanning a Cell across Columns • You can make a cell span across columns • <td colspan=“n”> … </td> • N is number of columns to span

24. Spanning a cell across Rows • You can make a cell span across rows • <td rowspan=“n”> … </td> • N is number of rows to span

25. Use both Row and Col spans

26. Dividing Your Table into Column Groups • Used for grouping columns for formatting • Two ways • Structural (allows border control) • Goes between <table> and first <tr> • <colgroup span=“3” class=“data” /> • <colgroup class=“totals” /> • Non-structural • <col span=“3” class=“data” /> • <col class=“totals” /> • You can use both together <colgroup span=“3” class=“data”> <col span=“2” /> <col class=“sum” /> </colgroup>

27. Column groups

28. Dividing the table into horizontal Sections • Again used for formatting • After <table> and before first <tr> • <thead attributes> add rows </thead> • <tbody attributes > add rows </tbody> • <tfoot attributes > add rows </tfoot> • 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 • <table frame=“location”> • 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 • <table rules=“area”> • 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 • <td nowrap=“nowrap”>text</td> • 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 Main Table created in step f

36. Final Table