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 3rd and final Capstone progress report due April 25 1 Quiz on May 2 Capstone projects on May 6 @ 3 PM

Lecture/Discuss Tables

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

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

R1C1 R2C2

R2C1 R2C2

R1C1

R4C6

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

Sample Mapping

Banner Ad

Menu Text Picture

Caption

Footer

Creating a simple table1. Type <table> to start the table2. Add a row <tr>3. Add <td>”content”</td> to add a cell

to the current row1. Content can be any xHTML element

including another table4. Add more cells <td></td>5. Complete the row </tr>6. Repeat steps 2 through 5 to add more

rows7. Finish the table </table>

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>

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}

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

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>

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

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

<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

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

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

<table cellpadding=“10” cellspacing=“10”> In CSS

Use padding and border-spacing properties td{padding:10px;border-spacing:10px}

Padding and spacing

Spacing

ContentsPadding

Contents

ContentsPadding

Contents ContentsPadding

Contents

ContentsPadding

Contents

Spanning a Cell across Columns

You can make a cell span across columns

<td colspan=“n”> … </td> 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

<td rowspan=“n”> … </td> N is number of rows to span

RS3

RS2 RS

3

Use both Row and Col spans

Rowspan=3Colspan=2

Rowspan=3Colspan=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 <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>

Column groups

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

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

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

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

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

3X2

?X?

?x?