Cos 125

Day 24

Agenda All students meeting

7 Pm Monday, April 19 UMS Strategic Plan

Assignment #7 Posted Due April 20 Two (one?) more to go

Quiz Four Graded 1 A, 6 B’s, 4 C’s and 3 D’s

Exam #5 is April 30 Castro Chap13, 14, 15 & 16 25 M/C questions, WebCT 50 min

Website for text book http://www.cookwood.com/html5ed/

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

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 Add to content to the cell

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>

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

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

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 <table align=“left” or “right”> Text that appears after </table> will

flow to opposite side 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”

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

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

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}

Example of Spacing and backgrounds

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

R=3C=2

R=3C=3

R=2 C=3

Dividing Your Table into Column Groups Used for grouping columns for formatting Doesn’t work in Netscape Two ways

Structural (allows border control) <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=“data” />

</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 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 hsides -> border on left and right vsides -> border above and below rhs -> right side only lhs -> left side only box -> all four sides

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