Module 5 - Page 07 - Exercise Three

Exercise Three

Super Table Construction

Assignment: Recreate this giant table, which is built upon a 10 cell by 10 cell grid (100 cells). You'll need to use the ROWSPAN and COLSPAN attributes, as well as ALIGN and VALIGN, to successfully complete this assignment.

Don't worry if your final table doesn't look exactly the same as this one; I've added WIDTH and HEIGHT attributes to each cell in order to get a cleaner grid layout. On some browsers, you may notice how uneven the grid STILL is, despite my efforts; the only REAL way to get a cell a particular size on all browsers is by using a graphic that fills the entire cell (we'll talk about that in the next module).

All the graphics that you'll need, along with the example Giant Table page above, may be downloaded from the links at the bottom of this page.

Tips and Procedures

Because this giant table started life as a grid of 100 cells, we should begin our work by laying out 100 placeholder cells, ten rows of ten cells each, filled with placeholder content. Start with one row, making sure that it's accurate. Fill the cells with numbers, from 0 to 9.

Example:

<table>
<tr>
<th>0</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
</tr>
</table>

Note: I've used all TH cells because that's what I've always done when creating this exercise in my live classes, but you're welcome to use TD cells, if you like.

Before propagating the row, add a comment to the top of the row, stating which row it is. You'll need this comment in order to figure out where you are in the code once the exercise begins in earnest.

Example:

<table>
<!-- Row One -->
<tr>
<th>0</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
</tr>
</table>

Now, copy the row, and paste it into the table nine more times. Fix the comment tags to reflect the correct row numbering. In the following example, I've given you one extra row pasted in, so that there are two rows... You can paste in the others on your own.

Example:

<table>
<!-- Row One -->
<tr>
<th>0</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
</tr>
<!-- Row Two -->
<tr>
<th>0</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
</tr>
</table>

Once you've assembled this "filler" code, test it in a browser to make certain everything's alright; you should have ten rows of ten cells each. Correct your code, if necessary.

After you've tested and corrected your code, you're ready to begin coding the giant table. Here's the procedure that I recommend:

Fill in the content for a given row FIRST; save the cell attributes for later.
Once you've filled in the actual content for the row, remove any extra cells that you might have had in the row from your placeholder content. You only want the correct number of cells in each row; if you have extra cells stuck in there, your table will not lay out correctly.
Double-check your content for accuracy; save your document.
Add ROWSPAN, COLSPAN, ALIGN, and VALIGN attributes, as needed, to each of the individual cells.
Double-check your attributes for accuracy; save your document.
Move onto the next row.

You won't be able to preview your code until after you've finished the entire table.

All cells in this exercise are either:

rowspan="2" and colspan="2"
colspan="3"
rowspan="3"
normal (no rowspan or colspan)

If you're confused about which cell goes in which row, all you need to do is look at the upper-left-hand corner of any given cell. Whatever row the upper-left-hand corner of the cell is sitting in, that's the row the cell lives in.

If you're still confused about which cell goes in which row, view this special version of the exercise; each row is color-coded, so that all of the cells for any given row are all the same color.

Good luck!

Download Exercise and Solution Files
Mac Files (.sit -- 36K)
PC Files (.zip -- 36K)

Main Menu