Chapter 10, Lesson 5

If you already know how to specify row and column spanning in an HTML table, you can skip this lesson.

Whether or not you explicitly specify the cell size in pixels (via the 'HEIGHT' and 'WIDTH' attributes), you can specify the cell size in terms of columns and rows. Let's examine how this is done. Let's take a typical table which has no special specifications:

Cell 1	Cell 2	Cell 3	Cell 4	Cell 5
Cell 6	Cell 7	Cell 8	Cell 9	Cell 10
Cell 11	Cell 12	Cell 13	Cell 14	Cell 15
Cell 16	Cell 17	Cell 18	Cell 19	Cell 20

Now let's say that in a sudden burst of creative energy (brought on, perhaps, by our fifth cup of coffee), we envision the table with the cell at the top center being about three times as wide as it is now. We could specify it's width at, say, 150 pixels wide, which would be about right for our purposes. But what happens?

Cell 1	Cell 2	Cell 3	Cell 4	Cell 5
Cell 6	Cell 7	Cell 8	Cell 9	Cell 10
Cell 11	Cell 12	Cell 13	Cell 14	Cell 15
Cell 16	Cell 17	Cell 18	Cell 19	Cell 20

Of course, the browser didn't just resize that top center cell, it resized all the cells in that column, preserving alignment first, which is what HTML tables are supposed to do. However, that's not what we envisioned. What we really wanted was a cell at the top-center that would span some of the other columns, like so:

Cell 1	Cell 2			Cell 3
Cell 6	Cell 7	Cell 8	Cell 9	Cell 10
Cell 11	Cell 12	Cell 13	Cell 14	Cell 15
Cell 16	Cell 17	Cell 18	Cell 19	Cell 20

Now, there are only three (3) cells in the top row, but the second one spans the second, third, and fourth columns of the table. How did we do that? Well, we used a cell attribute called 'COLSPAN' which directs the browser to allow that particular cell to occupy more than one column position (in this case, three). You see, when the browser originally parses (reads and interprets) the table, it counts how many cells are in each row, then assigns the first cell in each row to the first "column", the second cell in each row to the second column, etc. But when it encounters the 'COLSPAN' attribute, it assigns the designated cell to more than one column, as specified. Here's the format for specifying a cell that spans more than one column:

<TD COLSPAN=number> (for table-data cells)
or
<TH COLSPAN=number> (for table-heading cells)

As we've seen in the past, the <TH> tag is treated the same as the <TD> tag, for purposes of column-spanning.

HTML also allows for a cell to be specified for row-spanning, that is, the specified cell's height will be re-sized so that it spans more than one row. The format is:

<TD ROWSPAN=number> (for table-data cells)
or
<TH ROWSPAN=number> (for table-heading cells)

Naturally, if you want a cell to span more than one column and more than one row, you use both attributes in the cell's opening tag:

<TD COLSPAN=number ROWSPAN=number>

It's time to see some HTML code in action:

<TABLE BORDER=5>
<TR ALIGN="CENTER"><TD>4-14-97</TD>
    <TD HEIGHT=35 COLSPAN=4><I>A Nifty Table</I></TD>
    <TD>by maddog</TD></TR>
<TR ALIGN="CENTER"><TH ROWSPAN=3>ITEM</TH>
    <TH>NO</TH>
    <TH>QUANTITY</TH>
    <TH>DESCRIPTION</TH>
    <TH>COST EA</TH>
    <TH>TOTAL</TH></TR>
<TR ALIGN="CENTER"><TD>1</TD>
    <TD>20</TD>
    <TD>widget, green</TD>
    <TD>$1.14</TD>
    <TD>$22.80</TD></TR>
<TR ALIGN="CENTER"><TD>2</TD>
    <TD>50</TD>
    <TD>gadget, red</TD>
    <TD>$0.97</TD>
    <TD>$48.50</TD></TR>
</TABLE>

4-14-97	A Nifty Table				by maddog
ITEM	NO	QUANTITY	DESCRIPTION	COST EA	TOTAL
	1	20	widget, green	$1.14	$22.80
	2	50	gadget, red	$0.97	$48.50

Let's examine how we built this demo table:

First, we decided to eliminate the table-caption, and instead create our own title in an expanded cell on the top row of the table. We decided that the first row would consist of three cells: the date, the table's title (italicized), and the author's name. The title's cell will be wider than the rest, but we won't know how many columns it should span until we design the rest of the table. We want the second row to serve as our column headings, but we also want the first column heading to extend all the way down the first column, thus row-spanning the three rows of data. We determined our column headings, and it turned out that there were six of them. Now we knew that since we had six columns in the table, but only three cells in the first row, we should allow the center cell in the first row (our title) to column-span four columns.

In our table, the first row was taller than the remaining rows. This had nothing to do with column or row spanning. We had specified a cell 'HEIGHT' of 35 pixels in the second cell of the first row, just so that we could see that it's OK to specify both cell size and spanning attributes in the same cell. We could have also specified a cell 'WIDTH', but we decided the browser would probably do a better job of calculating that.

Look over the HTML source code and see where the 'COLSPAN' and 'ROWSPAN' were used, and try to understand how they helped contribute to the unique look of our demonstration table.

---

Overseer: Monty Northrup ... ... leave e-mail ...

---