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 mm 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 contents 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 whereslowing 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 Cells 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?