Free Web tutorials covering HTML, CSS, JavaScript, and DHTML from beginner to advanced. Free downloads and developer resources. Personalized help via email, form, and chat.

free, web, tutorials, HTML, html, CSS, css, stylesheet, cascading stylesheet, Javascript, javascript, JavaScript, DHTML, dhtml, beginner, advanced, web development, web page, web site, free web tutorial, free HTML tutorial, free CSS tutorial, free css tutorial, free cascading stylesheet tutorial, free stylesheet tutorial, free javascript tutorial, free DHTML tutorial, free HTML class, free CSS class, free stylesheet class, free cascading stylesheet class, free javascript class, free DHTML class">

Free Web tutorials covering HTML, CSS, JavaScript, and DHTML from beginner to advanced. Free downloads and developer resources. Personalized help via email, form, and chat. free, web, tutorials, HTML, html, CSS, css, stylesheet, cascading stylesheet, Javascript, javascript, JavaScript, DHTML, dhtml, beginner, advanced, web development, web page, web site, free web tutorial, free HTML tutorial, free CSS tutorial, free css tutorial, free cascading stylesheet tutorial, free stylesheet tutorial, free javascript tutorial, free DHTML tutorial, free HTML class, free CSS class, free stylesheet class, free cascading stylesheet class, free javascript class, free DHTML class

Advanced HTML Lesson 8:
Designing Complex Tables

Code Tutorials

Site Development

Downloads

Help!!

Home

Analyzing Complex Tables

As you can imagine, some tables can get quite complex using the many attributes we've learned so far. In fact, most of the tables you code will be drawn on paper before being coded on your web page. Here's a step-by-step list of how to go about analyzing a table to see how it's made.

Note: If you're analyzing someone else's <table> code, find the <table> tag and make sure the BORDER is set to 3 or more pixels and colored brightly to make things show up better.

1) Draw the table out on paper. This is a great way to begin analysis because it makes you aware of the total number of rows, columns, and cells. Start with a big rectangle and then fill it in with the table you want.

2) Now count the total number of cells. Just count the boxes in the table and number them left to right, top to bottom. Jot the total number of cells down in your notes. This will help you in your coding later.

3) Determine the overall size and position of the table. Make notes as to how wide the table is relative to the screen and how it's positioned (left, right, centered, text wrapping around the table or not).

4) Determine the number of rows. This isn't always as easy as it sounds due to spanning. A good trick here is to look for horizontal lines. When you find one, draw a line extending this line across the table demarcating the row. Count these lines to determine the total number of rows. The number of rows will be the number of lines plus one.

5) Determine the number of columns. Do this just like rows except look for vertical lines. Draw vertical lines to demarcate each column.

6) Look for ROWSPANned cells. These are the cells that are split by the "row lines" you drew in step 2. Mark these and determine the number of rows they span.

7) Look for COLSPANned cells. These are the cells that were split by your vertical lines. Mark these and determine how many columns they span.

8) Now determine the relative WIDTHs of each cell. Think in terms of percentages. If you need to absolutely size the table, you can easily convert this to pixels once the overall table WIDTH is set. Don't worry about HEIGHTs. You can mess with HEIGHT during the debugging of the table if you need to.

Now you've got the information you need to design your table code. Mainly this is the overall size and position of the table, total number of rows and columns, total number of cells, and cell spanning info.

Making Complex Tables

Making complex tables begins with the analysis process above. When you've got all of the information you need, start coding using the process below.

1) Make the opening <table> tag and set the WIDTH, ALIGN, CELLSPACING, etc. Always code a 3 pixel or thicker BORDER in a bright color. This will help you later when debugging your table. You can always turn off the border by using BORDER=0 later. It's a good idea to make the closing </table> tag while you're at it so you won't forget it later.

2) Code the <tr> tags. Put in sets of <tr> and </tr> tags for each row.

3) Code the columns/cells. Don't get hung up putting in a lot of attributes. Just code the plain <td> and </td> tags needed to set up all of the cells. Remember that cells that span take up space on more than one row or column and they only need to be coded once. Check the number of <td> tags with the number of cells you counted in your analysis. They should be equal. Most people will code in too many cells because they forget the total space occupied by spanning cells.

4) Locate the spanning cells and code their WIDTH and either ROWSPAN or COLSPAN. You should have all of these values in your analysis's notes. The trick is putting the attributes in the right <td>. Just remember to count off your rows coded from top to bottom and then the columns/cells. The cells are coded where the first one is on the left, next one beside the first, etc., in a left to right manner. The last <td> coded in a row is the furthest right.

5) Code the other cells' WIDTHs. You should already have these values from your analysis.

6) Finally, code in the other <td> attributes. Add some "stub" content. Don't go to the trouble of adding your real content to the cells until the table is debugged. You can use something like "Cell #x" or just put in a <br> tag or a single   to make a completely blank cell. (Note: Making blank cells is an important design technique that we'll be talking a lot more about later.)

7) Now view your table and adjust the attributes as needed. When you've got the layout where you want it, add your content and adjust your borders and your done. You've got a fancy <table>.

Lets Practice

Lets use the analysis and coding techniques described above to code the table below:

Cell #1
Cell #2	Cell #3	Cell #4
Cell #5	Cell #6

Okay, lets start the analysis of the above table by drawing it out on a piece of paper where we can also make some notes.

ANALYZING THE TABLE

1) Lets look at the overall table. It looks like it's about half as wide as the white area of this page. That would be WIDTH="50%". And, it's centered. It has a red border and no CELLSPACING. We can't really determine any CELLPADDING because the content appears centered horizontally.

2) Now lets look for horizontal lines and expand them across the table to determine and demarcate the rows in the table:

We can see by extending our horizontal lines that we have three rows.

3) Now lets extend our vertical lines to see how many columns we have:

It now becomes clear that we have 3 columns. We've got a 3x3 table with 6 cells.

4) We can see that Cell #4 is split by one of the horizontal lines. It spans 2 rows, or ROWSPAN=2.

5) Likewise, we can clearly see that Cell #1 is split twice by our vertical lines and spans three columns, COLSPAN=3.

6) Since we've determined that the table is three columns across, and the columns seem to be the same width, we can conclude that the "unspanned" cells stretch 1/3 of the table's width across -- except, of course, for Cell #1 that stretches 100% across the table. This would mean the other cells are set to a width of 33%. (Well, 33.33...% for you picky ones out there. 33% is close enough for this.)

Now lets get our info organized:

We've got a 3x3 table that's 50% of the page wide and centered. It has a red border.

We have two spanned cells, Cell #1 and Cell #4. We also have four more cells for a total of 6 cells total.

The width of all of the cells, except for Cell #1, is 33% of the width of the table. Cell #1 extends 100% of the width of the table.

Now lets code this table.

Coding The Table

1) First we'll code our <table> tags using the information from our analysis:

I just put in the stuff I noted in the first part of our analysis. I also included the closing </table> tag so I wouldn't forget it later on.

2) Now we need to add our rows. No big problem here. We just code in three sets of <tr> tags:

3) This next step gets a little tricky. We've got to code our columns and cells. Begin by putting the proper number of <td> tags in each row. The first row only has one cell. The second row has three and the bottom row has two cells. The last row also has the ROWSPANned Cell #4 extending down into it, but that cell will be coded in the second row where the cell begins.

Most of the errors you make will probably be in this step. Spend some time counting out the cells in each row. It takes some practice to get good at this.

4) Next we need to find and size our spanned cells -- Cell #1 and Cell #4. Cell #1 is easy enough to find. It's the only cell in the first row. Cell #4 is a little trickier. It begins in the second row and is the last cell coded in that row (the furthest right). Lets add the size and spanning for these two cells:

We get the data for WIDTH, ROWSPAN, and COLSPAN from our analysis. Remember that the WIDTH of the top cell spans across the whole table -- 100%. The ROWSPANned cell is only 33% of the table wide.

5) Now Lets set the widths of the unspanned cells. This is pretty straightforward. Each is set to 33% in this example:

Remember that Cell #4 extends down into the last row to make the final 33% needed to finish that row.

6) Now we add the other attributes we need to the <td> tags. Refer to your analysis for any colors, alignment, etc. It looks like all we have here is to center the cells' contents with ALIGN="center":

Now all we need to do is to add the stub content and view the table. I used "Cell #x" for the substitute content in this table. Add this content and give your table a viewing to see where you are:

We're done! Look at the table and make sure you've got everything just right. Does the overall table look laid out correctly? If the whole table looks a little short or "squat", try adding a HEIGHT attribute to the <table> tag. You'll may have to play around with a few things.

Ooops, there's something I forgot to add. The table generated by the code above doesn't look exactly like the table at the top of the page.

Look at the placement of the term "Cell #4". I think you can figure out what's wrong and how to fix it yourself. (Hint: VALIGN)

Exercises

The best exercise for designing complex tables is to draw some out on paper, analyze them, and then code them. Challenge yourself. Make sure you can make these tables before moving on to stacking and nesting tables.

To Next Advanced HTML Lesson

Back To Advanced HTML Index