© 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook...

104
1 © 2001 D & D Enterprises HTML Tables Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

Transcript of © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook...

Page 1: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

1© 2001 D & D Enterprises

HTML TablesTables

Cross-Browser Sophisticated Page LayoutRead Textbook Chapter 9Run the Chapter Examples!!

Page 2: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

2© 2001 D & D Enterprises

About Tables The <table> tag has a huge variety of

attributes and is easily the most sophisticated HTML tag

Remember: The HTML table model is row based You create a table by defining rows, one at a

time Within each row you create table cells Each cell within a table is like a mini HTML document

and can have its own text flow, alignment, color, etc.

Page 3: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

3© 2001 D & D Enterprises

Table Display

Normally the browser immediately displays text as it is received from the server modifying the scroll bar to make additional text available as it arrives until the whole document has been transferred

Page 4: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

4© 2001 D & D Enterprises

Table Display As you have probably noticed, however, in-

line graphic images can cause the browser to delay displaying text until a graphic's size is known This is why you are encourage to use height and

width attributes! Similarly, when the browser encounters a

<table> tag, it will not display any part of the table until it receives the entire table from the server and can determine a best-fit layout for column and cell sizes

Page 5: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

5© 2001 D & D Enterprises

About Tables

The browser collects all of the table cells, adjusts their sizes so they fit together and creates a row After all of the rows are assembled the

browser collects all of them together and creates the complete table

Page 6: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

6© 2001 D & D Enterprises

About Tables Since the size of one cell or row can be

affected by other cells or rows in the table, the browser may have to go back and adjust other rows to make the table look right

Because of these dependencies, most HTML tables require two passes by the browser: One to size the individual cells and rows, and another to display the final table after making any

adjustments

Page 7: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

7© 2001 D & D Enterprises

About Tables

You may have noticed this 2 pass behavior when loading a page with large, complex tables The page display pauses while the

browser reads and processes the table, and

then the whole table appears at once

Page 8: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

8© 2001 D & D Enterprises

About Tables This two-pass behavior is a real pain,

making your documents display slowly and erratically To mitigate this, HTML 4.0 includes new

features that allow a one-pass table display, permitting browsers to display tables

row by row, as they are received by the browser

So, use the correct 4.0 <!Doctype> statement!!

Page 9: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

9© 2001 D & D Enterprises

Simple Table ReviewReview An HTML table is contained in the <table>

and </table> tags These tags occur only within the <body>

section of a document A document can contain any number of

tables, and tables can be embedded (with caution) inside other tables

Within a <table> tag pair, each row of the table is delimited by paired <tr> and </tr> tags, and each cell within a row is delimited by paired <td> and </td> tags

Table Review URL: http://204.98.17.1/learnhtml/56tables.htm

Page 10: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

10© 2001 D & D Enterprises

Simple Table ReviewReview

A tag pair for table headings<th> and </th>is essentially the same as the <td> and </td> tagsexcept that <th> formats text with emphasized and centered attributes

Page 11: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

11© 2001 D & D Enterprises

Simple Table ReviewReview By default, tables do not have any borders

or gridlines However, in most cases where you would use a

table, it is helpful to mark off the cell divisions with borders and gridlines to help the user understand the data.

To add a default border and gridlines to a table, you include the BORDER attribute in the <table> tag that initiates the table:

<table border>

Page 12: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

12© 2001 D & D Enterprises

Simple Table ReviewReview

You cannot independently control the table's border and gridlines Their width and appearance can be

expected to vary from one browser to another, much as the rendition of the <hr> horizontal rule tag varies among browsers

Page 13: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

13© 2001 D & D Enterprises

Simple Table Review Open template.html in HomeSite save it as

table1.html Add the Title text: Table Review After the opening <body> tag add the

following:<table border><tr><td>this is cell #1</td><td>this is cell #2</td></tr></table>

Page 14: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

14© 2001 D & D Enterprises

Page Layout: Tables Tables also were not designed for layout

per se They were designed for representing tabular

data, but their layout properties are less of a "side effect" than the preceding hacks

Tables are fairly flexible but do take some effort to master, and they can complicate your HTML code

Page 15: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

15© 2001 D & D Enterprises

Page Layout: Tables

In homesite, rename template.html table_columns.html

<table cellpadding="8"> <tr> <td valign="top"> Here is one column of data -- the

way to get this is, in itself, something of a surprise. Not exactly what you would expect! </td>

<td valign="top"> So, it turns out that tables can be used

to create columnar layout as illustrated here. Note that here you need to make use of

cellpadding to keep the columns from colliding with each other. </td> </tr></table>

Page 16: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!
Page 17: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

17© 2001 D & D Enterprises

Using Tables for Advanced Page Layout

Width is a Key Attribute

Page 18: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

18© 2001 D & D Enterprises

Table Width Sometime you want to control the absolute

or relative width of the table within the browser window HTML Tables supports this functionality with the

WIDTH modifier, which you can apply to any of the <table>, <th>, or <td> tags

The parameter for the WIDTH modifier is a single numeric value, which can be either an absolute number of pixels or a percentage of the total window or table width

width.html

Page 19: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

19© 2001 D & D Enterprises

Width Setting table width is an important concept

if you consider screen size… 640 x 480? 800 x 600?

If you are creating a layout that wraps and is dependent of screen width, you can fix the width of your presentation by enclosing all of your content in a table This is a very common Web page layout

technique BUT! What width to make the table?????????

Page 20: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!
Page 21: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

21© 2001 D & D Enterprises

What Size Should I Design My Page?

So, do you develop for 640x480 or 800x600 How do you make up your mind?

http://hotwired.lycos.com/webmonkey/99/41/index3a_page3.html?tw=design

What is the "sweet spot" Non-scrolling region

Page 22: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

22© 2001 D & D Enterprises

Table Width Tutorial

Project Coolhttp://www.projectcool.com/developer/

basics/tables/03D-lookfeel-width.html

Page 23: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

23© 2001 D & D Enterprises

Width for Columns Here is a basic two-column layout using a

<TABLE> that has a single table row with three data cells: one each for the columns of text and an

intervening empty cell to more attractively separate the two columns

There is also a large cellspacing attribute value to create additional intervening space between the columns

columns.html

Page 24: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

24© 2001 D & D Enterprises

Another Width: Sideheads The text-heading features available in

HTML are the <H1> through <H6> tags These tags are always embedded in the text

flow, separating adjacent paragraphs of text Through multiple columns, you can achieve an

alternative style that places headings into a separate side column, running vertically alongside the document text

Here is a fairly fancy pair of side heads:

sides.html

Page 25: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

25© 2001 D & D Enterprises

Using Width for Your Layout

Using Tables to do Page Layout http://www.html.about.com/compute/

html/library/beginning/bl_begin011000a.htm

Page 26: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

26© 2001 D & D Enterprises

Advanced Page Layout: Tables

Tables can be good for placing images relative to each other within the browser window Occasionally you will notice that browsers don't do

exactly what you thought you told them Realize that values in HTML attributes are usually only

treated as hints to the browser, which may have several other constraints to satisfy

Additionally, graphics-intensive tables can take a considerable time to download and render There are quite a few major sites whose download

time suggests that the designers have not tested with slower modems and computers

Page 27: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

27© 2001 D & D Enterprises

Troubleshooting Advanced Layouts

Microsoft Developers Network http://msdn.microsoft.com/workshop/

design/layout/facts1.asp#IMAP

Page 28: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

28© 2001 D & D Enterprises

Table AlignmentAlignment

Text AttributesTable Attributes

Page 29: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

29© 2001 D & D Enterprises

Cell Alignment Defaults align.html

The contents of a header <th> cell are centered horizontally in the cell

The contents of a data <td> cell are aligned to the left edge of the cell If you want to change this behavior, use the ALIGN

attribute with the appropriate cell tag The align attribute accepts one of four values:

left, center, right, and justify The first three values are defined by the HTML standard

the justify value is supported only by Internet Explorer

Page 30: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

30© 2001 D & D Enterprises

Table Alignment It is tedious to add the align attribute to each

and every cell in your table Like the bgcolor attribute, you can use the align

attribute on individual <td> and <th> tags also on <tr> tags

to control the alignment of every cell in a table row

Rewritten previous alignment example to control the alignment at the row level:

align2.html

Page 31: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

31© 2001 D & D Enterprises

Alignment Tips Words of warning:

You cannot use the align attribute on the <table> tag to affect the alignment of every cell in the table

The <table> tag does accept the align attribute, but it uses it to control the alignment of the table with respect to the surrounding text, much the same way the <img> tag uses the align attribute

To control alignment of every cell in your table, you'll need to set the align attribute on every row or every cell in your table

Page 32: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

32© 2001 D & D Enterprises

VALIGN By default, both Netscape's and Internet Explorer's

CENTER attribute aligns contents vertically within the cell

This vertical alignment is true for both header and data cells

You can change this behavior by using the VALIGN attribute with the <td>, <th>, and <tr> tags

Even better, the VALIGN attribute works with the <table> tag, allowing you to set the vertical alignment of every cell in your table with a single attribute

The VALIGN accepts four values: top, middle, bottom, and baseline

Page 33: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

33© 2001 D & D Enterprises

Page 34: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

34© 2001 D & D Enterprises

VALIGN="baseline" valign.html

The baseline of a font is the imaginary line upon which the characters rest

If adjacent cells in a row have varying size text, the changing baseline between cells can make the table unattractive and difficult to read

If you set the cell vertical alignment to baseline, the browser will find the lowest baseline of all the cells in the row and align all the text to that baseline The result is a more readable table

Page 35: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

35© 2001 D & D Enterprises

Table Alignment Tricks Table alignment, especially horizontal

alignment, is a great way to get alternative text alignment in a document

Before the advent of HTML 4.0 and Cascading Style Sheets, it was the only way to get right-aligned text

Even now, table alignment is the most widely supported way to get certain effects

ralign.html

Page 36: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

36© 2001 D & D Enterprises

Text in Tables text.html

Since each cell within a table can be regarded as an independent formatting domain of its own, everything you already know about HTML tags that control the appearance of text in the Web browser continues to be valid ANYTHING can go in a table cell!

Page 37: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

37© 2001 D & D Enterprises

Table Alignment Attributes

The dynamic sizing of rows and columns by the browser raises some text-positioning issues that would be familiar to any spreadsheet user The HTML 3.0 specification addresses

these with the additional attributes

Page 38: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

38© 2001 D & D Enterprises

Table Alignment Attributes

The NOWRAP attribute turns off automatic text reflow within a cell

but it is a good idea to avoid using it, because it severely impairs the browser's ability to display the complete table attractively within the window limits and is deprecated

http://www.w3.org/TR/REC-html40/struct/tables.html#adef-nowrap

VALIGN controls the vertical alignment of text within a cell and can accept the values "top", "middle", "bottom", or "baseline”

align3.html

Page 39: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

39© 2001 D & D Enterprises

Table Alignment Attributes

<tr> If the NOWRAP, ALIGN, or VALIGN

modifiers are included in a <tr> tag, they will affect all the cells in that row

Page 40: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

40© 2001 D & D Enterprises

Table Alignment Attributes

<td> A NOWRAP, ALIGN, or VALIGN modifier in a

<td> tag will apply to that cell only ALIGN or VALIGN in a <td> tag will override any

ALIGN or VALIGN modifier in the enclosing <tr> tags The VALIGN="baseline" modifier makes sense

only in a <tr> tag, because it causes the text in all the row's cells to be oriented to a single baseline

the usefulness of this particular feature isn't obvious until you get into some fairly complex tables

Page 41: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

41© 2001 D & D Enterprises

Now that You Know VALIGN

The Popular left based layout Study popular.html Download bluebk.jpg Download seuss.gif Create a file called popquiz.html,

using a table, to create the following:

Page 42: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!
Page 43: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

43© 2001 D & D Enterprises

Table CaptionsCaptions

<caption>a moving standard...

Page 44: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

44© 2001 D & D Enterprises

Table Captions Many tables exist as figures within a

document and might benefit from a caption explaining the contents of the table You can add a caption to your tables using the

<caption> tag The <caption> tag can appear anywhere within

the<table> tag but should not be placed within a <tr> <td> or <th> tag

captions.html

http://www.cyberbits.com/Tables/captions.htm

Page 45: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

45© 2001 D & D Enterprises

Table Captions By default, both Netscape and Internet Explorer

center the caption above your table, wrapping the text to fit within the width of the table The similarity between the browsers ends here..

Not everyone wants the caption centered above the table

Both Internet Explorer 4.0 and Netscape 4.0 accept an align attribute for the <caption> tag that allows you to specify the caption position as either "top" or "bottom" The caption, still centered, is moved to the

appropriate position

Page 46: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

46© 2001 D & D Enterprises

IE Caption Alignment

If you want to control the alignment of the caption content, IE accepts the following values for the ALIGN attribute: "top" "bottom" "left" "right"

When the “left” or right” value is used, the caption remains at the top of the table, aligned to the requested edge of the table

If you want a right- or left-aligned table at the bottom of the table, IE accepts a separate attribute, VALIGN, that lets you control the vertical position of the caption

With valign, you can specify either "top" or "bottom" to move the caption to the right spot

Page 47: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

47© 2001 D & D Enterprises

Table Captions

Page 48: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

48© 2001 D & D Enterprises

Faking a Caption

There is nothing preventing you from creating captions without the <caption> tag You can often create better positioned

and formatted captions using conventional paragraphs before or after your table!

If you want to get really fancy, you can use nested tables to get the best effect

Page 49: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

49© 2001 D & D Enterprises

Faking a Caption Using tables to associate a caption with a

table is a great example of the layout power of tables, especially when they are nested Since a table and its caption are nothing more

than two elements that need to be placed one above the other and kept together, a simple two-row, one-column table will do the trick nicely

Turn the borders off on the containing table and use the table content alignment tricks discussed earlier to position the caption correctly

Consider this for a component of your "wow-me" table assignment...

Page 50: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

50© 2001 D & D Enterprises

Compelling Table LayoutsLayouts

Adding GraphicsUsing Colored BackgroundsNesting Tables

Page 51: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

51© 2001 D & D Enterprises

Colored Tables -- Why?

Use color to: Separate information Grab attention Go gestalt with your design and blend

graphics to a different background Color a whole table or

color individual cells

Page 52: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

52© 2001 D & D Enterprises

Color & Tables

Changing the background color of a table is easy Add the bgcolor attribute to the

<table> tag The value of the attribute can be either a

color name or a hexadecimal color value

Page 53: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

53© 2001 D & D Enterprises

Colored Table -- try this table2.html

<table border="2" bgcolor="#ff00ff" > <tr> <td>cell #1</td> <td>cell #2</td> </tr> <tr> <td>cell #3</td> <td>cell #4</td> </tr>

</table>

Note: Clickable RBG Color Charthttp://www.printable.com/clut.html

Page 54: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

54© 2001 D & D Enterprises

Colored Tables

<table border="1" bgcolor="#ffff00">

<tr> <th>&nbsp;</th> <th>oranges</th> <th>grapefruit</th></tr><tr> <th>flavor</th> <td>sweet</td> <td>tart</td></tr><tr> <th>size</th> <td>small</td> <td>large</td></tr></table>

IE vs. Netscape Netscape uses the color to paint

the background of every cell in the table

IE paints the cells, borders, and empty cells the background color

Warning: make SURE to test tables with background colors in both browsers!!

Save as: ctable.html

Page 55: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

55© 2001 D & D Enterprises

Placing an Image Behind a Table -- Browsers VaryBrowsers Vary!

You can place an image behind a table using the BACKGROUND table attribute

The attribute value is the image URL If the image is larger than the table, it is clippedclipped

to the edges of the table If the image is smaller, it is tiledtiled to fill the table

<table border="1" background="star.gif">

timage.html

Page 56: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

56© 2001 D & D Enterprises

Coloring Table Rows

The <TR> tag can have the bgcolor attribute

changes the background color for just one row within your table

Save as crow.html

<table border="1"><tr bgcolor="#ffff00"> <th>&nbsp;</th> <th>oranges</th> <th>grapefruit</th></tr><tr> <th>flavor</th> <td>sweet</td> <td>tart</td></tr><tr> <th>size</th> <td>small</td> <td>large</td></tr></table>

Page 57: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

57© 2001 D & D Enterprises

Coloring Table Cells

Ultimate Control: Color each table cell! Use the

bgcolor attribute with any or all of the <TD> and <TH> table tag

Save as: ccell.html

<table border="1"><tr> <th>&nbsp;</th> <th bgcolor="#00ffff">oranges</th> <th

bgcolor="#00ffff">grapefruit</th></tr><tr> <th bgcolor="#008000">flavor</th> <td bgcolor="orange">sweet</td> <td bgcolor="pink">tart</td></tr><tr> <th bgcolor="#008000">size</th> <td bgcolor="orange">small</td> <td bgcolor="pink">large</td></tr></table>

Page 58: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

58© 2001 D & D Enterprises

Using Color Well Use color to add to

your message, grab attention

Try not to distract or annoy….

Try this

effective.html

<table width="360” border="1"cellpadding="10” bgcolor="#ffff00">

<tr> <td align=“center”>

<b>make sure you read this notice!</b> </td>

</tr></table>

Page 59: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

59© 2001 D & D Enterprises

Table Spans

ROWSPANCOLSPAN

Page 60: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

60© 2001 D & D Enterprises

Spanning

As soon as you start building home pages and menus with tables in lieu of the older list and image-map constructs, you will begin to wish you could merge merge adjacent cellsadjacent cells either horizontally or vertically so that the amount of text in a single large cell will not dominate the appearance of the entire table

Page 61: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

61© 2001 D & D Enterprises

Spanning HTML 3.0 provides this capability in the form

of COLSPAN and ROWSPAN modifiers to the <td> tag The COLSPAN attribute takes a single numeric

parameter that specifies how many columns the cell will span horizontally, proceeding toward the right

The ROWSPAN attribute for a <td> tag works in an equivalent fashion but specifies how many vertical rows the cell will span, proceeding downward

Page 62: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

62© 2001 D & D Enterprises

Web Pub I Review Slide: COLSPAN

A cell can span and stretch across a number of columns

If you want to add a dinner plate to the table arrangement and you want it to span two columns, you'd do that by using the colspan tag

To write this in HTML, simply add another row <tr> to your table and tell the cell to span two columns by adding colspan=2 to your td cell tag

<tr><td colspan="2"></tr>

Page 63: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

63© 2001 D & D Enterprises

Web Pub I Review Slide: ROWSPAN

Finish setting the table by adding a wine glass on the left and have it span two rows using the rowspan tag

To do this just add another cell and tell it to span two rows by writing rowspan="2"

<tr rowspan="2">

Page 64: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

64© 2001 D & D Enterprises

Spanning

Proper coding of the COLSPAN and ROWSPAN attributes is a bit tricky, especially in the absence of sophisticated HTML editors that could let you design and set up the table visually and then generate the appropriate HTML tags to match

Page 65: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

65© 2001 D & D Enterprises

Spanning If you inadvertently specify column-

spanning and row-spanning cells that somehow overlap and conflict, you can get unpredictable results Any additional cells in a row or column

that include a cell with a COLSPAN or ROWSPAN attribute may get pushed get pushed off the edgeoff the edge and disrupt the structure of the table***SO you have been warned***

Page 66: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

66© 2001 D & D Enterprises

Table Spanning Commands

Create spanning cells across: rows, columns, or both (rows and columns) Spanning attributes defined for the <td> and

<th> tags COLSPAN creates a cell that spans two or more

columns ROWSPAN creates a cell that spans two or more rows

You can use these attributes together, creating a cell that spans rows and columns simultaneously

Page 67: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

Spanning: COLSPAN

<table border="1"><tr> <th></th> <th colspan="2">Fruit</th></tr><tr> <th></th> <th>Oranges</th> <th>Grapefruit</th></tr><tr> <th>Flavor</th> <td>Sweet</td> <td>Tart</td></tr><tr> <th>Size</th> <td>Small</td> <td>Large</td></tr></table>

Notice that the first row of this table has only two cells.

The first cell is empty, lining up with the empty cell in the beginning of the second row.

The next cell has the COLSPAN attribute set to 2, causing it to span the next two cells in the next row.

You can verify this by seeing that the cell containing "Fruit" spans the two cells containing "Orange" and "Grapefruit cspan.html

Page 68: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

Spanning: ROWSPAN

We can create a similar row-spanning cell by adding an additional column to the table:

rowspan.html

<table border="1"><tr> <th></th> <th></th> <th colspan=2>Fruit</th></tr><tr> <th></th> <th></th> <th>Oranges</th> <th>Grapefruit</th></tr><tr> <th rowspan="2">Feature</th> <th>Flavor</th> <td>Sweet</td> <td>Tart</td></tr><tr> <th>Size</th> <td>Small</td> <td>Large</td></tr></table>

Page 69: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

69© 2001 D & D Enterprises

Rowspans span.html more complicated...

Rowspans create a new column (when we insert a row-spanning cell) and we have to add corresponding cells to every other row, except the rows corresponding to the spanning cell Checking the HTML, we added another blank cell to

the first two header rows, and the spanning cell to the third row

We did not add another cell to the fourth row, since its first cell is actually the spanning cell from the preceding row

The fourth row already has four cells: the first comes from the third row, and the remaining three are explicitly defined

Page 70: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

70© 2001 D & D Enterprises

Rowspans span.html more complicated...

You need to be careful when defining tables with multiple spanning rows and columns

Make sure you count columns carefully, ensuring that the right cells line up with the corresponding spanning cells

Page 71: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

71© 2001 D & D Enterprises

Span2.html The span.html table has four empty cells in

the upper left corner, corresponding to the two header rows and header columns We specified all four cells explicitly, but could have

used just one cell, spanning both rows and columns If the first cell in the first row were defined as:

<TH COLSPAN="2" ROWSPAN="2"></TH>the cell would span the first two cells of the first

two rows see

span2.html

Page 72: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

72© 2001 D & D Enterprises

HTML 4.0 Table Changes

Table Headers and FootersTable Body

Table Rows & GroupsTable Columns & Groups

Page 73: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

73© 2001 D & D Enterprises

Table Headers and Footers When tables are printed and broken across

several pages running headers and footers are very useful HTML 4.0 introduces the concept of a table header,

footer, and one or more table body sections Ideally, the browser would repeat the table header and

footer on each page when a table is printed In addition, you can use the groups attribute of the

<table> tag to change the way rules are drawn between the different sections of your table -- we have already looked at this MS IE 4.0 only RULES attribute

Page 74: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

74© 2001 D & D Enterprises

<thead>

The <thead> tag defines the table header It contains one or more <tr> tags that

define the rows in the header You can use the ALIGN and VALIGN attributes

with the <thead>tag to control the alignment of content within the header cells, much like you use these tags in the <table> tag to control cell alignment.

Page 75: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

75© 2001 D & D Enterprises

<tfoot>

The <tfoot> tag works just like the <thead>, except that it defines the table footer instead of the header The <tr> tags inside the <tfoot> tag

defines the number of rows that make up the table footer

Page 76: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

76© 2001 D & D Enterprises

<tbody>

Any rows not in the header or the footer are considered part of the table body You can create multiple sections within

your table body by using the <tbody> tag

Again, you can use the ALIGN and VALIGN tags to control the alignment of the cells within these body sections

Page 77: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

77© 2001 D & D Enterprises

Table Row Groups (4.0) Tables may now be grouped into rows consisting of

one table head <thead>, one table foot <tfoot> and one or more table body <tbody> sections Each group must contain at least one row The THEAD and TFOOT should contain information

about the table's columns Their start tags are required, but their end tags may be

omitted In order for browsers to render the foot of the

table before the body, the TFOOT element should appear before the TBODY element in the table

Page 78: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

78© 2001 D & D Enterprises

Row Groups (IE OnlyIE Only)<table rules="groups"><thead>...header rows go here<tbody>...rows in the first section go here<tbody>...rows in the second section go here<tbody>...rows in the third section go here<tfoot> ...footer rows go here</table>

theadfoot.html & theadfoot2.html

Page 79: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

79© 2001 D & D Enterprises

Table Column Groups

Remember we said that the HTML table model is row-oriented: You create a table as a series of rows,

each of which contains a series of cells. This makes it easy to create row

groups, since you can easily group adjacent <tr> tags to create a group.

Page 80: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

80© 2001 D & D Enterprises

Table Column Groups Column grouping is more difficult, since

the corresponding cells that make up a column are spread throughout all the rows in the table

In order to create column groups, you must use special tags to define those groups before you define the rows and cells of your table

You do this with the <colgroup> tag

Page 81: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

81© 2001 D & D Enterprises

<colgroup> The <colgroup> tag appears inside the

<table> tag It accepts four attributes:

"align", "valign", "width" and "span" ALIGN and VALIGN are used to specify the content

alignment of the cells in this column group, much like they are used to control general cell alignment when used in other table tags

The WIDTH attribute specifies the width of the cells, either as a percentage of the table or as an absolute number of pixels

Page 82: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

82© 2001 D & D Enterprises

<colgroup> cols.html By default, the

<colgroup> tag defines a column group containing just one column

The first tag affects the first column of the table, the second controls the second column, and so forth.

If you wanted all the cells in the first column of your table to be aligned to the right you would use code like this:

<table><colgroup

align="right"></colgroup> ...table rows go here</table>

The above is the same as adding ALIGN=“right” to the first cell of every row in your table

Page 83: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

83© 2001 D & D Enterprises

<colgroup> SPAN Column groups can

contain more than one column

You indicate this with the SPAN attribute

If you wanted the first three columns to be right aligned, you simply add span=“3” to the <COLGROUP> tag

You can create multiple column groups by using several <colgroup> tags

<table><colgroup

align="right" span="3">

</colgroup><colgroup span="4"

width="50"></colgroup>...table rows go here</table>

Page 84: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

84© 2001 D & D Enterprises

Individual Columns <col> You can use the <colgroup> tag

to handle a range of similar columns

If some columns within the group have to be handled differently you use the <col> tag

The <col> tag lets you control individual columns in a column group

If you have four columns you want to have grouped with a rule around them but the individual columns require different widths and alignment use the <colgroup> tag to group them, and the <col> tag to handle each column

<table rules="groups"><colgroup><col align="left" width="20"><col align="right"

width="10"><col width="35"><col width="35"></colgroup>...other colgroups go here,

followed by table rows

</table>

Page 85: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

85© 2001 D & D Enterprises

More on Columns

Tables, as you may have noticed are both complex and tricky. The cool thing about HTML is that there

are always multiple way to achieve the same results.

Type in the code on the next page to see a non-background way to achieve the popular left navigation scheme

Page 86: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

86© 2001 D & D Enterprises

Save template.html as leftnav.html

Page 87: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

87© 2001 D & D Enterprises

Table Reference Site

c|net builders.com advanced table tips:http://builder.cnet.com/Authoring/AdvHtml/

ss01.html Spend some time at home getting

familiar with table layout options!

Page 88: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

88© 2001 D & D Enterprises

Complex Table TricksTable Tricks

NestingIncluding Graphics

Page 89: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

89© 2001 D & D Enterprises

Nesting Tables for Effect For a more complex table layout

you can use different colors and shapes Sample will have three tables

top table technoweenie logo graphic to create overlapping squares divide table into

3 columns NOTE: cellpadding and cellspacing must be ”0”

so there is no gap between color spaces Tables with no content can use <br>

Page 90: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

90© 2001 D & D Enterprises

Loads in 3.7 seconds with a 28.8 modem

http://www.internetsd.com/courses/html/ntable.html

http://www.internetsd.com/courses/html/ntable2.html

this one has borders turned on

Page 91: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

91© 2001 D & D Enterprises

Nested Tables

The larger the table the longer it takes to load Your page won’t show until the final

closing </table> tag is read by the browser

So, try to break tables up into sections Make the first table small so it loads

quickly and the user will have something to see while the rest of the page loads

Page 92: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

92© 2001 D & D Enterprises

Nested Tables Nest a complete table within a table Hint: use comments to help yourself keep

track!http://www.internetsd

.com/courses/html2/nested.html http://www.internetsd.com/courses/html2/

commented_tables.html

Not commented: http://downtime.com/new/custquot.htm http://libweb.uoregon.edu/janus.html

Page 93: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

93© 2001 D & D Enterprises

Nested Tables

http://campus.fortunecity.com/computing/100/600530.html

http://libweb.uoregon.edu/janus.html

Page 94: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

94© 2001 D & D Enterprises

Nest Tables

When creating a nested table, you should first create the outer table and then go back and create the inner table(s) When inserting the inner table, you

create a completely new table afterafter the opening <td> tag

The inner table must be closed before the closing </td> tag of the outer table

Page 95: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

95© 2001 D & D Enterprises

Nest Tables

http://libweb.uoregon.edu/janus.html See nested_three.html See colored_nested.html

This is the tip your textbook author is talking about to learn to deconstruct tables!

Page 96: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

96© 2001 D & D Enterprises

Tables & Graphics Designers sometimes use workarounds

when displaying big images They cut up the big image and put them in

tables, giving the illusion that the image is loading faster than one huge graphic

Programs such as Macromedia's Fireworks automate this imageslicing but you can do it on a budget!

More info: http://dreamink.com/speed5.shtml

Example: http://www.nu.edu/

Page 97: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

97© 2001 D & D Enterprises

More?

Tables Tutorial http://www.pagetutor.com/pagetutor/

tables/index.html

Page 98: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

98© 2001 D & D Enterprises

Wow Me Tables Design Ideas for HTML Tables

This is what tables were MEANT to do!!

http://www.botany.hawaii.edu/tables/default.htm Scholarly tables discussion

http://www.sunworld.com/sunworldonline/swol-05-2000/swol-05-webmaster.html

Page 99: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

99© 2001 D & D Enterprises

Homework Assignment #1Homework Assignment #1

Table Skills3 Parts

Page 100: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

100© 2001 D & D Enterprises

PART 1: Create this table

Page 101: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

101© 2001 D & D Enterprises

Part 2: ALSO Create This Table (HARD!!)

Page 102: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

102© 2001 D & D Enterprises

Part 3: Open Table Assignment

For the LAST part of your three part tables assignment, create a table that will wow me…!!!

Page 103: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

103© 2001 D & D Enterprises

Real Life

Building a Flexible Page Layout Using Tables http://www.jshook.com/flexible_pages/

Page 104: © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

104© 2001 D & D Enterprises

Next

Forms!