© 2002 d & d enterprises 1 tables html tables. © 2002 d & d enterprises 2 about tables in...

1 © 2002 D & D Enterprises

HTML TablesTables

Tables are

just

More

Fun

2 © 2002 D & D Enterprises

About Tables

In the simplest sense, HTML tables are comparable to the tables in Microsoft Word

You can designate a portion of the document to be a grid of cells with an arbitrary number of columns and rows

The contents of each cell can be any combination of text and graphic elements

You can format the text within each cell in many different ways, independent of other cells in the same table, almost as if each cell were a little word processing document in its own right

3 © 2002 D & D Enterprises

About Tables

HTML tables have some interesting features not typically found in word processors, such as

machine independencedynamic sizing, and the ability to nest one table inside another

4 © 2002 D & D Enterprises

Tables

For ultimate control over the web page layout you need to learn how to make tables using HTML

Tables allow flexibility to line up graphics and textThis helps organize content on your web pages

Tables operate as spreadsheets or charts similar Microsoft's Excel

Instead of simply putting data in rows and columns you can create complex layout designs by adding images and color to different cells

5 © 2002 D & D Enterprises

Tables

There are three basic units that make up a table the table tag, table row, and a cell tag

Table tag: <table> begins the table and </table> ends it

The table tag tells the browser you're creating a table

Row tag: <tr> indicates the start or a row and </tr> indicates the end of a rowCell tag: <td> designates an individual cell and </td> ends the cell

6 © 2002 D & D Enterprises

Set the Table

<table border="1"> <tr> <td>knife</td> <td>fork</td> </tr> <tr> <td>spoon</td> <td>cup</td> </tr> </table>

7 © 2002 D & D Enterprises

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"> plate </td></tr>

8 © 2002 D & D Enterprises

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 first and tell it to span two rows by writing rowspan="2"

<td rowspan="2"> wine<br>glass</td>

9 © 2002 D & D Enterprises

Rowspan vs. Colspan

Just remember if you want a cell to stretch horizontally use colspanTo stretch it vertically, use rowspan

10 © 2002 D & D Enterprises

Cellpadding and Cellspacing

Cellspacing can make the border around your cells thickerIf you'd like to push your text or graphic away from the edge of your cell you can use the cell padding attribute to your table tag

To make your padding or spacing fatter simply specify the number of pixels wide you want it to be

11 © 2002 D & D Enterprises

About Tables

The <TABLE> tag has a huge variety of attributesRemember: The HTML table model is row based

You create a table by defining rows, one at a timeWithin each row you create table cellsEach cell within a table is like a mini HTML document and can have its own text flow, alignment, color, etc.

12 © 2002 D & D Enterprises

Tables!

The core tag associated with any table is the <table> tag

This <table> tag doesn't create a table in and of itself<table> encapsulates all the other tags that specify the layout and content of the tableEvery <table> tag has a required end tag, </table>, which tells the browser that your table is finished.

13 © 2002 D & D Enterprises

About Tables

Tables are composed row by rowIndicate a new row with <tr>

Think of the <tr> tag as a line break signaling that the following data starts a new table row

<td> creates a cell and is shown in the standard body text formatBut each cell within a table is a like a miniature HTML document, with its own text flow, alignment, and other display options.

14 © 2002 D & D Enterprises

Tables

<table> … </table> tag has three basic markup tags

<th> for table heading<tr> for table row <td> for table data the information in a cell

Note: cells do not have to contain data! You can use a space, a <br> or a &nbsp;

Tables -- Type This HTML:<table>

<tr><td>one</td> <td>two</td> <td>three</td>

</tr>

<tr><td>four</td> <td>five</td> <td>six</td>

</tr>

</table>

Save as table.html and load into Netscape

16 © 2002 D & D Enterprises

Tables

The HTML Table model (even the Simple Table Model) is easily the most complex markup structure in HTML

17 © 2002 D & D Enterprises

Table Display

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

18 © 2002 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

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

19 © 2002 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

20 © 2002 D & D Enterprises

About Tables

Since the size of one cell or row may 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.

21 © 2002 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

22 © 2002 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 one-pass table display, permitting browsers to display tables row by row, as they are received by the browser

23 © 2002 D & D Enterprises

HTML Tables

So a table is contained in the <table> and </table> tagsThese tags should occur only within the <body> section of a documentA document can contain any number of tables, and tables can be embedded (with caution) inside other tablesWithin 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

24 © 2002 D & D Enterprises

Table Headings

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

25 © 2002 D & D Enterprises

Simple Table Review

As you have seen, by default tables do not have any borders or gridlines

In the absence of such markings, the user will see an orderly arrangement of text, but may not have a clear idea where the table starts and ends and the text in the body of the document continuesThere are numerous situations where borderless tables are entirely appropriate, such as the presentation of a compact list of hyperlinks or of a traditionally multicolumn document (such as a newsletter or brochure)

26 © 2002 D & D Enterprises

Adding a Table Border

By default, tables do not have any borders or gridlinesHowever, 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>

Add a Table BORDER<table border>

<tr><td>one</td> <td>two</td> <td>three</td>

</tr>

<tr><td>four</td> <td>five</td> <td>six</td>

</tr>

</table>

Save as table.html and load into Netscape

28 © 2002 D & D Enterprises

HTML Tables

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

29 © 2002 D & D Enterprises

Simple Table Review

Create a New File and save it as table1.htmltable1.html

<table border><tr><td>This is cell #1</td><td>This is cell #2</td></tr></table>

30 © 2002 D & D Enterprises

Now modify to table2.html

Download hat.gif to your floppyhttp://www.internetsd.com/courses/html1/hat.gif

Save table1.html as table2.html -- make it look like the following slide:

<table border="0"><tr><td><img src="hat.gif"></td><td>You know, Diane Cunningham is a real technoweenie. She would really

love to put this graphic on her web page. This is a file downloaded from a site called arttoday.com so it is, I believe copyright free! When it was downloaded, it was a .wmf (windows metafile) and was converted from .wmf to a .gif and a .jpg so we can look at image conversions later in this class. I know that this is a lot of text to type in, but hang on, there is a point I wanted to make here...</td>

</tr></table>

table2.html

32 © 2002 D & D Enterprises

<TABLE> Tip

TIP: When you have images in tables, make sure the closing </td> is flushed up against the <img src> tag!!

Having a space or line break can cause some browsers to read the HTML wrong and table cell won’t fit around the graphic

Now save as table3.html

<table width="500" border="0"><tr><td valign="top"><img src="hat.gif"></td><td valign="top">You know, Diane Cunningham is a real technoweenie.

She would really love to put this graphic on her web page. This is a file downloaded from a site called arttoday.com so it is, I believe copyright free! When it was downloaded, it was a .wmf (windows metafile) and was converted from .wmf to a .gif and a .jpg so we can look at image conversions later in this class. I know that this is a lot of text to type in, but hang on, there is a point I wanted to make here...</td>

</tr></table>

34 © 2002 D & D Enterprises

Tables for Layout

Tables don't seem at that exciting, but they are a very important tool for page layout.

The key to using a table for layout is to use the table with the width attribute

The width attribute can be specified in pixels or as a percentageIf your layout goal was to create a 400 pixel column of text with a buffer of 50 pixels on the left and 100 pixels on the right, you couldn't do it without tables!

See http://www.internetsd.com/courses/html1/tlayout.html

© 2002 D & D Enterprises35

Table Headers, Borders Headers, Borders and Rules Rules

<th><table border>

<table rules="rows"> Rules are HTML 4.0

Table Headers th.html

<table border="1"> <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>

37 © 2002 D & D Enterprises

More About Tables --Borders

Copy the table code on the previous slide and change border width four times<table border="2"> then try<table border="5"> then try<table border="10"> then try<table border="20"> finally try

See: tborders.html

38 © 2002 D & D Enterprises

Tables -- Rule Attributes IE 4.x only:IE 4.x only: HTML 4.0

Now try these modifications:

<table width="170" border="1" rules="rows"><table width="170" border="1" rules="cols"><table width="170" border="1" rules="none"><table width="170" border="1" rules="all">

rules.html

39 © 2002 D & D Enterprises

Tables -- Frame Attributes IE 4.x only:IE 4.x only: HTML 4.0

You can set frame attributes by cell:“box” draws a box (default behavior)“void” removed table border entirely“above”, “below” “lhs” and “rhs” draw a border on top, bottom, left or right respectively “hsides” and “vsides” draws top and bottom (horizontal) or left and right (vertical) borders

frames.html

© 2002 D & D Enterprises40

Table SpacingSpacing

CELLPADDINGCELLSPACING

41 © 2002 D & D Enterprises

Cell Padding and Spacing

By default, browsers pack things into tables as closely as possible

For greater control over table borders and gridlines, the HTML 3.0 specification of the <table> tag adds the cellspacing and cellpadding attributes

These table attributes control spacingcellpadding (space between a cell and its contents)

cellspacingcellspacing (space between cells)padspace.html

Cell Padding -- try this

<table border="1" cellpadding="10“><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>

Cell Spacing -- try this

<table border="1" cellspacing="10“> <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>

44 © 2002 D & D Enterprises

More Table Fun

Go check out the source codes from:

http://www.internetsd.com/courses/html1/tables.html

alignmentheadersspacescaptions

45 © 2002 D & D Enterprises

Table Row and Column Span

Go check out the source codes from:http://www.internetsd.com/courses/html1/table2.html

and from http://www.internetsd.com/courses/html1/table3.html ROWSPANCOLSPAN

46 © 2002 D & D Enterprises

More on Tables

Make SURE to read Chapter 10 in your textbook and run all of the sample exercises!Advanced table layout is covered in Web Pub II!If you want a preview, check out:

http://beta.peachpit.com/vqs/K5950/ excerpt.html

47 © 2002 D & D Enterprises

Next...

Navigation II and Clickable Image Maps