Code Punk -- Optional Lesson - Fracitonal Cell Spans

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

Home	<Code_Punk>'s Web Tutorials

Website Development and Management

Downloads & Resources

Optional Lesson: Fractional Cell Spans

The Problem

This page answers the interesting problem presented by the table below:

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

How many columns does this table have? Two? Three? If we follow the analysis from our previous lesson and extend the vertical lines, we'll come up with 3 lines defining five columns. Can we get the cells in both rows to span using five columns? No. Neither 2 nor 3 evenly divide into five.

Can we use a fractional COLSPAN, like COLSPAN=1.5? No. Neither COLSPAN or ROWSPAN support fractional values, only positive whole numbers. (Yes, I know that's somewhat redudnant, oh ye mathematicians out there.)

So exactly how do we set up this spanning scheme?

The Solution

You can reconize tables like we're talking about during your regular analysis. In these types of tables all of the cells will have a line going through them except for maybe small cells at the perimeter of the table. In our example all of the cells would have a vertical line going through them.

Lets assume for a moment that the table above has 6 columns. You don't actually see (or code) six columns, but lets imagine that the table does, in fact, have six columns.

In this case, we can COLSPAN the top row to COLSPAN=3 (of 6) to make each cell span half way across the table. Likewise we can COLSPAN=2 (of 6) to make each of the bottom row's cells span one-third of the way across. Here's the code:

Lets not worry how we picked the number six at the moment. Pay attention to the code in red. Notice that both the WIDTH and COLSPAN work together to get the cell to span properly. The WIDTH is pretty easy to come up with. You can figure that out by just counting the number of cells across in each row.

The COLSPAN is a little trickier. Keep in mind that we've chosen the number six as the number of total columns. To calculate the COLSPAN for a cell, we just need to divide 6 by the number of cells in the row: 6/2 = 3 for the first row, 6/3 = 2 for the bottom row.

Okay, that much is pretty simple. Now lets see how we came up with the number six to begin with.

Finding The Magic Number

When you have an oddly spanned table where the cells/columns just don't seem to line up, you'll need to find a number of columns or rows to use and span all of the cells according to that magic number. We find this magical number with simple math like finding the lowest common denominator in elementary school.

The magic number is just a number that all of the numbers of "cells per row" can be divided into evenly -- no remainder.

There are formulas for this, but the factoring we'll be doing will not be so complex. So, you won't have to remember all that stuff you learned about prime numbers and stuff in high school. I just know you're disappointed.

One easy way to find the magic number is to just multiply the number of cells in each row together. In this case that would be 2 * 3 = 6. Begin by determining the number of cells in each row (when coding for columns). Now multiply all of the different numbers together. If you two rows that each had three cells, you'd only have to use the 3 once.

Let's find the magic number for a table with three rows containing 2, 3, and 4 cells/columns. Using the multiplication technique above we'd get 2*3*4=24. So, we could use 24 as our magic number. We'd just divide the 2, 3, and 4 into 24 to determine our COLSPANs for each cell -- COLSAN would be 12, 8, and 6 respectively.

We could streamline this a little bit by using 12. All of the above "numbers of cells" would also divide evenly into 12. It doesn't really matter as far as the table is concerned, it will render the same. When you run across the problem of a very large and complex layout, don't bother with trying this method to make the table. We'll be learning some other ways to get even cooler effects of this sort in the next lesson.

Step-By-Step

Here's a step-by-step guide to figuring out the WIDTHs and COLSPANs for tables like the one at the top of this page. We'll do a ROWSPAN example next.

1) Recognize the problem. Check that all of the cells are crossed by vertical lines except for small cells toward at edge of the table.

2) Determine the number of rows.

3) Determine the number of cells/columns in each row.

4) Find the "magic number" by multiplying the different numbers of "cells per row". You don't need to include duplicate numbers from rows with the same number of cells/columns.

5) Calculate COLSPANs for each row by dividing the "magic number" by the number of cells/columns in that particular row.

6) Determine WIDTHs as percentages: one-half is 50%, one-quarter is 25%, etc.

7) Now code the table paying special attention to the WIDTHs and COLSPANs you've calculated.

ROWSPAN

ROWSPAN calculations work the same way as the COLSPAN ones. You'll recognize these tables by horizontal lines passing through all of the cells except for small cells on the table's perimeter.

The trick with ROWSPAN is to calculate the number of <tr>s

Here's a sample table:

Cell #1	Cell #2

	Cell #3
Cell #4
	Cell #5

Coding this is a little trickier than coding the rows because you'll actually have to code the "magic number" of rows (<tr>s). That's right, you'll have to code in some blank rows -- <tr></tr>

Start out by calculating your ROWSPANs just like you did the COLSPANs in the previous exercise. The magic number here is six (2*3=6). We've got two columns. One column has two cells and the other has three. We'll code this table with six rows.

This is quite different from our COLSPAN example because we actually have to code in the magic number of rows. Finding the lowest common factor here can save you a lot of typing and figuring later on.

Now we must begin the daunting task of placing the cells (<td>s). Keep this trick in mind: Code one column, instead of row, at a time. Start in the first row and count down the ROWSPAN to find the row in which to code the next cell of the column.

In our exercise, we'll begin by coding the first column that uses a ROWSPAN of three. We begin in the first row (Cell #1), count down three rows, and code the next cell in the column there (Cell #4):

This really isn't all that hard to figure out. We start in the top row and code Cell #1. We know it spans three rows including the one it's coded in. Just count down the other two rows it spans and begin coding Cell #4 in the next row (row 4).

Now lets code the next column with three cells and a ROWSPAN=2. We do this the same way as we did the first column. Begin in the first row beneath the code for Cell #1 (because it's to the right of Cell #1):

Now we need to count down two rows including the top row where the last cell was coded and begin the next cell of the column in the next row (set of <tr> tags):

Now we finish the table by coding the last cell. It's two rows down from the last cell we coded:

There's one more thing we can do. We can remove the last <tr></tr> tags at the bottom of the table. We cannot remove the other empty set of <tr> tags. Try it and see how the table becomes distorted. As a rule, you should always leave the empty <tr> tag sets. It's generally safe, however, to remove the last <tr> tag set if it is empty.

Exercises

Try duplicating both examples above from scratch. Then try larger tables with 2, 3, and 5 staggered cells.

<<< Back To Advanced HTML Index

<Code_Punk>'s Web Tutorials