Presentation covering web8.html and my spring schedule - topic tables

Speaker notes

Slide 1:

This is the beginning of the table explanation. It will explain web8.html and my schedule from the Spring of 2000.

Slide 2:

Tables are started with the <TABLE>. They MUST be closed as well using the </TABLE>.

Rows are started using the <TR> and when the row is complete it is closed using the </TR>.

Within rows, you can define columns using the <TD>. WHen the column is complete it is closed using the </TD>

The data is actually entered at the column level as can be seen on this slide.

Slide 3:

By inserting the BORDER attribute within the TABLE command I will see the table on the screen with a border included.


Slide 4:

Everything within the <DIV> and the </DIV> will be aligned in the center of the page. Since the table is within the DIV scope, it will be aligned in the center of the page.

The DIV command creates a division within your page. This division can be assigned attributes that will be used throughout the division.

Slide 5:

This table has a BORDER, a CAPTION that appears above the table and column headings that appear in bold because of the TH command.

Slide 6:

By adding the ALIGN=BOTTOM to the CAPTION command, we can have the caption appear below the table.

In this example, TH is used to set up headers for both columns and rows.

Slide 7:

This code illustrates BORDER and CELLPADDING using two different settings. Look at the resulting screen to see how it looks.

Slide 8:

Within rows and columns, you can use the ALIGN command with LEFT, RIGHT, CENTER, TOP, BOTTOM to create the look you want in cells.

In setting up this table, I used numbers in the cells to show the row and column. The first number is the row, the second number is the column.

Slide 9:

This shows the first part of web8.html. It does not show the first full screen - I cropped it so that I did not cut a topic.

Slide 10:

This is the second part of web8.html. Again it is not a full screen.

Slide 11:

This illustrates the variety in BORDER and CELLPADDING that can be used to achieve a look.

Slide 12:

This slide shows the results of doing alignment within the table.

Slide 13:

Looking at my schedule will illustrate how rows and cells can be combined when needed.

Slide 14:

This slide shows my schedule for the Spring of 2000. The image is showing only through 12:00

Slide 15:

This is the second part of my schedule.

In looking at both parts of this schedule, please focus on the instances where cells span multiple rows or multiple columns.

Slide 16:

COLSPAN and ROWSPAN can be used to span multiple rows or multiple columns and merge the cells into one unit.

COLSPAN=6 means that the cells going across 6 rows will be merged together as one.

ROWSPAN=2 means that the cells in two rows will be merged as one.

ROWSPAN=11 means that the cells in 11 rows will be merged as one.

Slide 17:

Notice the ROWSPAN=5 and the two ROWSPAN=2.

Slide 18:

At the bottom of the table, I merged all of the cells into one with the COLSPAN=6 and then put in the references to go to the top of this page, back to the home page and to the previous page.

Remember, the home page is always called index.html. This page is sitting in my main directory as is the home page. When I give the <A HREF="index.html"> the home page will be loaded.