COS 125 DAY 14

Agenda  Assignment 6 DUE  Assignment 7 Posted Due March 9:35 AM  Quiz 2 will be on March 30 Chapters M/C and 4 Short essays  New course time line  Lecture/Discuss tables (with CSS)

New time line  March 23  Assignment 6 due  Tables part 1 26  Tables part 2 30  Assignment 7 due  Quiz 2  April 2  Forms part1  Progress report 6  Forms part 2 9  Assignment 8 due  Multimedia 13  Scripts Part 1 16  Assignment 9 due  Scripts part 2 20  PodCasting  Progress report 23  Assignment 10 due  Quiz 3 27  Capstones Presentations Due

Alternate nested List styling  Create nested list  Use classes Create class for each list type .roman li {list-style-type:upper-roman;} Assign classes to Introduction Boy's childhood Girl's childhood.roman li {list-style-type:upper-roman;}.ualpha li {list-style-type:upper-alpha;}.decimal li {list-style-type:decimal;} ol li {font-size:100%}

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  m m

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

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 pixels wide is standard for a web page  Create the ‘Skeleton’ of your page with just xHTML tags as place holder  Add to content to the cell with content

Sample Mapping BannerAd MenuTextPicture Caption Footer

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

Table Example

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}

Example of a Simple table with borders

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

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

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)}

Float Example

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

Combining tables Step 1 Step 2 Step 3

Example

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

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

Example of Spacing and backgrounds

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}

Padding and spacing Spacing Contents Padding Contents Padding Contents Padding Contents Padding Contents

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

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

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

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

Column groups

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

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

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

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

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

Using Dreamweaver

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

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