Web Design 1 - HTML Lesson 11 - Tables - Part III

So far all of our table have had a single data element in each row.

Now we will look at a way to set up a page to have more than one "cell" or "box in a row.

We will need to let the browser know when a table row must go across more than one cell, and the same for when a column might reach across more than one row

rowspan (to tell a cell how many rows to cover)

colspan (to tell a row how many cells to cover)

Look at the following planning drawing for an index page - the lines are not straight but that is ok - it is an artist's conception:

As a note - when you start to plan a website design you should always make a rough draft of the plan before coding.

Here is an image of a single web page with one large table using the above layout idea:

And now here is a screenshot of the code used to create the above table. It looks like a lot of code, and it is. Most of this you are already familiar with but there are a few pieces that may be new. Just take your time and look through the code carefully to be sure you understand what it is doing. Even better is to try it out yourself

  1. Notice that the table now has a width assigned - I did this because my logo is only 800 px, and I want the table to be the same size
  2. In one of the cells I needed to align the text at the top - this is because text in a cell will automatically be vertically centered - and that may or may not be what you want it to do
  3. In the footer the text is aligned to be in the center - rather than starting at the left margin
  4. And, of course, you will see colspan and rowspan used to to make the grid share spaces when you want them to - this helps because web pages are rarely arranged into squares that are all the same size

Assignment for HTML Lesson 11

  1. Read through the code for the table above - see if you can understand and match the code to the image
  2. Here is the fun part - create a page of your own
    • Create your own logo and have it span the first row of your table (size of 800px by 100px is a good starting point)
    • Have a few links on the left hand side box (as in the example)
    • Put text and/or images in the two right hand boxes as place holders for now - eventually you would use this space for information on your site, but right now you are just trying to get the table to work correctly
    • The very last row in the table should be a footer - this means it spans the table, has some type of text about the site - is centered, and generally these are in a smaller or different font
    • Use color for backgrounds and text as needed - this is also helpful when starting to use col and row spans as you can see if it is working
  3. When complete - add a link back to your index page, update your index page to include this lesson, and upload all files to your x10 site