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:
- Create a table with 15 rows, 15 columns, border=0, cellpadding=0, cellspacing=0, width=420px and height=420px.
- Delete the caption if there is one.
- 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 Shop We fix flats Free tire rotation |
||||||||||||||
|
Championship Service |
||||||||||||||
|
3 blocks from downtown 555-1234 |
||||||||||||||
You get the idea of the formatting possibilities. Now it's your turn:
- Open sample2.htm. Find the table you made in the last lesson. Delete all the rows and columns.
- Insert three new rows with three columns each.
- Make the default background color blue for the entire table.
- Insert a USAF logo in the first cell of the first row.
- 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.
- Convert the remaining (2nd) cell in the 1st row to a <th></th>. Insert some text.
- Center some text in the 1st column of the 2nd row.
- Put some text in the 1st column of the last row.
- 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.
- Check it out.
Here's another example. Study the code below, then view the results.
- Generate a table with two rows and two columns.
- Delete the caption if you have one.
- Make the R1/C1 cell span two ROWS (which means there will be no R2/C1 cell).
- 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 } --> </style> - 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>
- Put a "banner" in your R1/C2 cell that identifies your office.
- 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.
- Place the "body" of your practice file in the R2/C2 column.
- 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 Environmental Claims About Us |
AFLSA/JAS |
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. |
