Lesson 20 - Formatting With Tables

As you learned in the last lesson, individual rows, columns and even individual cells can be formatted separately from the rest of the table. Text, images, colors, links and other tables can be inserted within individual cells. This presents an interesting alternative use for tables--formatting just about anything on a web page.

Before we go too far with this, with CSS/Positioning, you can format everything you can format with a table. But there are some instances where, for simplicity, using a table is preferred. In the last lesson, the lesson plan itself displayed a box that had two colums: one with blue, courier font, and the other with default black font. We used a table to do this.

Picture your web page as a piece of graph paper. Each square of the graph paper is a cell in a table. Read through this, picture it in your mind, then look at the result:

  1. Create a table with 15 rows, 15 columns, border=0, cellpadding=0, cellspacing=0, width=420px and height=420px.
  2. Delete the caption if there is one.
  3. Make every other cell black (the remaining cells are white).

A quick assembly might look like this:


Now span some columns and/or rows and add some text like so:

    Jerry's Tire

We fix flats
Free tire rotation
        3 blocks from downtown  

You get the idea of the formatting possibilities. Now it's your turn:

  1. Open sample2.htm. Find the table you made in the last lesson. Delete all the rows and columns.
  2. Insert three new rows with three columns each.
  3. Make the default background color blue for the entire table.
  4. Insert a USAF logo in the first cell of the first row.
  5. Insert the Medal of Honor image in the last column of the first row, float right. Make it the same height as the USAF logo.
  6. Convert the remaining (2nd) cell in the 1st row to a <th></th>. Insert some text.
  7. Center some text in the 1st column of the 2nd row.
  8. Put some text in the 1st column of the last row.
  9. Combine the 2nd & 3rd columns of the 2nd & 3rd rows into one large cell. Put the idcard image in this cell. Make this image 400px wide. Give the image a margin of 25px.
  10. Check it out.

Here's another example. Study the code below, then view the results.

  1. Generate a table with two rows and two columns.
  2. Delete the caption if you have one.
  3. Make the R1/C1 cell span two ROWS (which means there will be no R2/C1 cell).
  4. Add the following style commands in the head section of your file to create new classes (change the class name and the colors to suit you):
    <style type="text/css">
    .xyz  {  background-color:#5B83CE; color:#C9D5EB }
    .xyz a:link    { color:yellow }
    .xyz a:hover   { color:white }
    .xyz a:active  { color:pink }
    .xyz a:visited { color:#EEE999 }
  5. Add the new class to your R1/C1 and R1/C2 cells:
    <td rowspan=2 class="xyz">R1 C1</td>
    <td class="xyz">R1 C2</td>
  6. Put a "banner" in your R1/C2 cell that identifies your office.
  7. Put an image and links to your other "office" web pages in the R1/C1 cell. The links can be <a href="#">Some link name here</a>. Keep this column narrow.
  8. Place the "body" of your practice file in the R2/C2 column.
  9. Look at the finished product and make changes to improve the appearance.

Here is how it could look:

Legal Assistance  
Military Justice  
Labor Law  
Contract Law  
About Us  

150 Chennault Circle, Bldg 694
Maxwell AFB AL 36112-6418
DSN: 493-3008 Comm (334) 953-3008
Fax: 493-3010 Comm (334) 953-3010

Legal Assistance Questionnaire

Name: ___________________________________________________

Office Symbol: ____________________________________________

Office Address: ___________________________________________

Office Phone: _____________________________________________

Active Duty? yes no Reserves? yes no

Branch of Service: USAF USA USN USMC Other

Have you been to this office before? yes no

If so, when? _______________________________________________

What is the nature of your problem? _________________________






Please print this form and complete it before arriving at the office. This will expedite the process. If you have any papers (contracts, bill-of-sale, license, letter, etc) that is pertinent to your question, bring them and this form with you. Office hours are M-F 8am-noon.

We aim high to please.

By now, your sample2.htm file should look like this.
For more information on the topics of this Lesson, see this site.

Lesson 19 Introduction to Tables   < <  PREVIOUS   Table of Contents NEXT  > >   Lesson 21 Designing Web Usability

Developed with HTML-Kit
Sandersongs Web Tutorials
Contact the Webmasterwith comments.
©2024, by Bill Sanders, all rights reserved.
This domain had 4,052 different visits in the last 30 days.
This page was last modified on our server on 11 Jul 2021
and last refreshed on our server at 12:07 pm, UTC
This file took 0.00914 seconds to process.