COS 125DAY 15

Agenda Assignment 6 Not corrected yet Web Server login issues Assignment 7 Posted

Due March 30 @ 9:35 AM Quiz 2 will be on March 30

Chapters 7 - 15 20 M/C and 4 Short essays

New course time line Finish Lecture/Discuss tables (with CSS)

New time line March

26 Tables part 2 Assignment Lab

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

Spanning a Cell across Columns You can make a cell span across columns <td colspan=“n”> … </td> N is number of columns to span If there is an insufficient number of cells it

will create a new column There is no CSS equivalent to colspan colspan.htm Span = 4

Span= 3Span = 2

Spanning a cell across Rows You can make a cell span across rows <td rowspan=“n”> … </td> it will NOT create a rowspan to a npo-

extstrent row N is number of rows to span There is no CSS equivalent to colspan rowspan.htm RS

3RS2 RS

3

Use both Row and Col spans

Rowspan=3Colspan=2

Rowspan=3Colspan=3

Rowspan=2 Colspan=3

col&rowspan.htm

Dividing Your Table into Column Groups Used for grouping columns for formatting using CSS styles 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>

http://perleybrook.umfk.maine.edu/samples/styletables.htm

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 (and CSS properties) can be 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

CSS Border property provides more flexibility http://www.w3schools.com/css/css_border.asp

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

CSS Border property provides more flexibility http://www.w3schools.com/css/css_border.asp

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

CSS and tables The text does adequately discuss CCS

styles for tables A more in-depth treatment of tables and

CSS 2 is available at http://www.w3.org/TR/CSS2/tables.html

Using Dreamweaver

Assignment #7

Banner.gifAbout 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 fCos125 assignment 7.doc

Final TableBanner.gif

Links

3X2

3X2

?X?

?x?