1 / 36

Cos 125

Cos 125. Day 22. 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 3 rd and final Capstone progress report due April 25

betsy
Download Presentation

Cos 125

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

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

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

  33. Using Dreamweaver

  34. Assignment #7 Main Table created in step f

  35. Final Table

More Related