Return to Main Homework Page
Back to Tables Homework Page

This is an example of a simple table with border="3", cellspacing="10" and cellpadding="3". The td tags have color, width and alignment.

Table 1

Row 1/Col 1 Row 1/Col 2 Row 1/Col 3
Row 2/Col 1 Row 2/Col 2 Row 2/Col 3
Row 3/Col 1 Row 3/Col 2 Row 3/Col 3

 

This is an example of a simple table with the attributes border, cellspacing and cellpadding all ="0". The td tags have fonts tags, graphics and links.

Notice in the code how I put the size of the graphic in the img tag AND the td tag. One graphic is a linked graphic. Can you tell which one?

I left several of the table cells the same as the one above so you can see what happens to cells when you put different size items in them.
Table 2

interlaced gif apple Row 1/Col 2 This is a link in a table cell.
It will return to the Tables Homework page.
Row 2/Col 1 Row 2/Col 2 Row 2/Col 3
Row 3/Col 1 Row 3/Col 2 furniture

 

This is an example of a table similar to the above using border="5" cellspacing="10" cellpadding="5" and width="100%" and some other changed or added attributes.

Table 3

interlaced gif apple Row 1/Col 2 This is a link in a table cell but not this line.
Click here for an example of thumbnails in a table.
Row 2/Col 1 Row 2/Col 2 Row 2/Col 3
Row 3/Col 1   furniture

 

This is an example of a table almost the same as above but with a width="540" in the table tag. Note how it doesn't expand but the one above does because it is width="100%". But the 540 width will print out as you see it landing on a regular size piece of paper (well, more likely it will).

I also gave the whole table a background color (bgcolor="#xxxxxx"), one cell another color and one row another. Then I made one of the cells in that last row another color.

Table 4

interlaced gif apple Row 1/Col 2 This is a link in a table cell but not this line.
Click here for an example of thumbnails in a table.
Row 2/Col 1 Row 2/Col 2 Row 2/Col 3
Row 3/Col 1   furniture
Go to table with background same color as background of page.

 

This is an example of a using rowspan and colspan attributes.

Table 5

>
This cell spans 3 columns. This really comes in handy if you want to create a main head or you have one graphic in one row but multiple columns to go above or below the graphic (or vice versa).
interlaced gif apple How did I get that 2 row space to the left without breaks in it? I used rowspan="2" between this td and the first td with the grapes image.
Row 3/Col 1 The reason why the graphic is off to the right is because it is the FOURTH column. The top column has a colspan"3". All other rows only have 3 columns. Therefore, the graphic to the right has nothing above it. furniture
Some things tables are good for:
  1. Everything
  2. Price Lists
  3. Thumbnails
  4. Controlling Your Layout
  5. Everything
WARNING: Do not copy my code for your tables homework or on your final presentation. I will be able to tell and will not give you credit. Either create your own using the book or from my lecture or work with one you got online from somewhere else.