If
you are using a browser, you can click on this separator wherever you see it
to return to the top of the page
OverviewComplex tables can be a real pain to code in HTML. Fortunately, there are a number of ways you can make the job easier. This modules will help you use some of the techniques that have proven themselves over the years with professional coders:
1. Pre-planningYour first job in designing a Web page is to convert ideas and information into a design that conveys the messages quickly and easily to your viewers. And it should be as artistically pleasing as possible!
Since that's not a trivial task, designers should not burden themselves with concerns about coding during the first phase - the simpler the tools, the better: pencil and paper do just fine.
Sketch your complex tables on paper. Label the rows and columns like a spreadsheet's.
2. CommentingBefore you type any HTML table code, put comments in your file to remind you what's where. This will help with debugging as well as initial coding.
<!-- ROW 1: NAME -->
<!-- CELL A: SPANS ALL 3 COLUMNS-->
<!-- ROW 2: CELL A SPANS NEXT 3 ROWS -->
<!-- CELL B: OBJECTIVE -->
<!-- CELL C: TEXT -->
<!-- ROW 3: CELL A SPANNED; CELL B ADDRESS; CELL C TEXT -->
<!-- ROW 4: CELL A SPANNED; CELL B CONTACT; CELL C TEXT -->
<!-- END OF TABLE FOR TOP OF RESUME -->
3. Indenting and WhitespaceEvery section of the code needs to be clearly set off from other sections. This is done in two ways:
- Major sections should be separated by blank lines ("whitespace").
- Contents of every section with more than two lines of code should be indented, so the beginning and ending tags can be easily checked by line of sight.
Here is a table with another table inside it:
Outer Cell Outer Cell Outer Cell Outer Cell
Inner Cell Inner Cell Inner Cell Inner Cell Outer Cell Outer Cell Outer Cell Outer Cell Get the code for this table from the accompanying text file (W24e_x01.txt), save it on your own disk, and practice indenting the code so that it is easy to read, using the guidelines above. Save-As with the extension .htm and view it in your browser. Make sure you didn't mess anything up!
Then find the inner table and center it. Isn't it easy to find with the code indented?
4. Divide and ConquerJulius Caesar used this technique to conquer Gaul (modern-day France). Engineers use it to build everything from cars to space shuttles. Kids use it to build Lego toys. You can use it to build complex HTML tables - Divide and Conquer!
The secret is to build nested tables separately, test each one, and then put them together. Makes life much simpler!
Try This
For practice with this technique, put together the nested tables shown in the illustration at right. The drawing has been done, so you don't need to re-do that...but put the tables together using the steps shown above.
The layout consists of four nested tables, each of which should have its border set to one pixel for easy viewing, and colored for identification. (You'll need to view the table in Internet Explorer, since bordercolor is a non-standard attribute recognized only by IE.)
- Black: 2 rows, 1 column. Set the first row's height to 30 pixels.
- Blue: 1 row, 3 columns. Set the first and third column to a width of 50 pixels, and leave the second column width unspecified.
- Purple: 2 rows, 1 column. Give the second row a height of 20 pixels.
- Aqua: 3 rows, 3 columns. Set the overall table width to 150 pixels, and each row's height to 50 pixels.
When you're done, the Instructor will either ask you to show the table in class, or submit it as normally required for the course.
Audience: This
is for people who know about creating HTML tables, and want to learn techniques
for coding HTML Web pages with complex tables.
Objectives: When you successfully complete this lesson,
you will be able to...
About this document...
Module W24e: This document is part
of a modular instruction series in computer technology. For more information,
see the overview
or the list of modules in this series, W: World Wide Web. This document has
been used in the following classes: INP 150.
