Maddog's HTML Primer for Real People

Chapter 10, Lesson 7

Ch 10, L 7 - Empty Cells and Blank Cells

If you already know the difference between an "empty" and a "blank" cell, and how to specify both in an HTML table, you can skip this lesson.

Occasionally, we want to "fill" a table with a blank cell or empty space. This is important enough for a special lesson. Its application will be more apparent in advanced graphic applications (than for tabular data), but it's useful here, too.

One responsibility of the browser is to manage the alignment of columns, as we've see before. For example, if we have a table of four rows, each with four data, we would expect to see the browser paint a table with four rows and four columns. But what if the second row only had two data? Let's see it:

cell 1 cell 2 cell 3 cell 4

cell 5 cell 6

cell 7 cell 8 cell 9 cell 10

cell 11 cell 12

The browser left a empty space (but not a blank cell) where the third and fourth data might have been in the second row. But if you look at the fourth row, you'll notice that there are two empty spaces there also. This is because there are two empty cells in that position. In the case of the fourth row, even though the cells were created using the <TD></TD> tag pair, they had no contents, and so they were interpreted by the browser as an empty cell. When the browser encounters an empty cell in a table, or when the browser finds cells missing at the end of a row, it inserts table "space", a kind of neutral placeholder to indicate nothing is there.

Interestingly enough, empty cells (and hence, empty table space) can be sized. This is the case in the second cell of the fourth row, where we embedded the 'WIDTH=75" attribute in the opening <TD> tag of that second cell. As a consequence, the entire second column was widened to accommodate the specified empty cell.

Sometimes, this is not the behavior we want for our table. Sometimes, we want our table to have a blank cell (not an empty cell), so that the browser will paint a cell (instead of table space). In this case, the cell will have a cell border, and occupy a table position like any other cell, but the cell will not have any visible contents. To make a blank cell, we place the Non-Blanking SPace between the cell's opening and closing tags, like so:

That single Non-Blanking SPace now becomes the sole content of that cell, and although you can't see it, it's enough for the browser to recognize that cell as a non-empty or blank cell.

Now let's see some examples and some HTML source code:

<TABLE  BORDER=5>
<TR ALIGN="CENTER"><TD></TD><TH>Y</TH></TR>
<TR ALIGN="CENTER"><TH>X</TH><TD>     4,0</TD></TR>
</TABLE>
<P>
In the following table, the first cell is empty and sized at 50 x 50 pixels:
<P>
<TABLE  BORDER=5>
<TR ALIGN="CENTER"><TD HEIGHT=50 WIDTH=50></TD><TH>Y</TH></TR>
<TR ALIGN="CENTER"><TH>X</TH><TD>     4,0</TD></TR>
</TABLE>
<P>
In the following table, the first cell is a normal whitespace:
<P>
<TABLE  BORDER=5>
<TR ALIGN="CENTER"><TD>     </TD><TH>Y</TH></TR>
<TR ALIGN="CENTER"><TH>X</TH><TD>4,0</TD></TR>
</TABLE>
<P>
In the following table, the first cell is '<B>&nbsp;</B>':
<P>
<TABLE  BORDER=5>
<TR ALIGN="CENTER"><TD>&nbsp;</TD><TH>Y</TH></TR>
<TR ALIGN="CENTER"><TH>X</TH><TD>4,0</TD></TR>
</TABLE>
<P>
The following table is a good example of the use of column and row spanning, and empty space:
<P>
<TABLE BORDER=5 WIDTH=95%>
<CAPTION>REGISTRATION CALL-IN TIMES</CAPTION>
<TR ALIGN=CENTER>
    <TD COLSPAN=2 ROWSPAN=2></TD>
    <TH COLSPAN=3>Last Numeral of SSAN</TH></TR>
<TR ALIGN=CENTER>
    <TH>0-3</TH>
    <TH>4-6</TH>
    <TH>7-9</TH></TR>
<TR ALIGN=CENTER>
    <TH ROWSPAN=4>1st Initial of Last Name</TH>
    <TH>A-F</TH>
    <TD>2 PM- 4 PM</TD>
    <TD>10 AM- 12 PM</TD>
    <TD>10 PM- 12 AM</TD></TR>
<TR ALIGN=CENTER>
    <TH>G-M</TH>
    <TD>8 AM- 10 AM</TD>
    <TD>12 AM- 2 AM</TD>
    <TD>4 PM- 6 PM</TD></TR>
<TR ALIGN=CENTER>
    <TH>N-T</TH>
    <TD>2 AM- 4 AM</TD>
    <TD>6 PM- 8 PM</TD>
    <TD>6 AM- 8 AM</TD></TR>
<TR ALIGN=CENTER>
    <TH>U-Z</TH>
    <TD>12 PM- 2 PM</TD>
    <TD>8 PM- 10PM</TD>
    <TD>4 AM- 6 AM</TD></TR>
</TABLE>

In the following table, the first cell is empty:

Y

X 4,0

	Y
X	4,0

In the following table, the first cell is empty and sized at 50 x 50 pixels:

Y

X 4,0

	Y
X	4,0

In the following table, the first cell is a normal whitespace:

Y

X 4,0

	Y
X	4,0

In the following table, the first cell is ' ':

Y

X 4,0

	Y
X	4,0

The following table is a good example of the use of column and row spanning, and empty space:

REGISTRATION CALL-IN TIMES
Last Numeral of SSAN

0-3 4-6 7-9

1st Initial of Last Name A-F 2 PM- 4 PM 10 AM- 12 PM 10 PM- 12 AM

G-M 8 AM- 10 AM 12 AM- 2 AM 4 PM- 6 PM

N-T 2 AM- 4 AM 6 PM- 8 PM 6 AM- 8 AM

U-Z 12 PM- 2 PM 8 PM- 10PM 4 AM- 6 AM

REGISTRATION CALL-IN TIMES
	Last Numeral of SSAN
0-3	4-6	7-9
1st Initial of Last Name	A-F	2 PM- 4 PM	10 AM- 12 PM	10 PM- 12 AM
G-M	8 AM- 10 AM	12 AM- 2 AM	4 PM- 6 PM
N-T	2 AM- 4 AM	6 PM- 8 PM	6 AM- 8 AM
U-Z	12 PM- 2 PM	8 PM- 10PM	4 AM- 6 AM

Let's look at our four example tables:

In the first example table, the first cell on the first row is an empty cell, that is, a '<TD></TD>' tag pair exists, but there is nothing between the opening and closing tag of that pair. The browser paints empty space where that cell would have been.
In the second table, we've embedded sizing attributes in the first cell, which is still empty. Notice how the browser enlarges the associated row and column, but still paints the empty cell as empty table space.
In the third table, we placed five (5) "spaces" inside the '<TD></TD>' pair that represents the first cell on the first row. This is an interesting point of browser behavior: the browser ignores all leading "whitespace" in a cell (even the single "space"). As a result, the browser paints empty space where that cell would have been.
In the fourth table, we placed a single Non-Blanking SPace (' ') inside the first cell of the first row. This is enough to convince the browser that the cell has content, and it now paints "blank" cell with a border of its own.
In the fifth table, we attempted to present an example of using empty cells and row-spanning and column-spanning to build a practical table. You might want to use some of these techniques in building tables yourself, so look over the HTML source code (above), and see if you can figure out how we created the large empty cell in the upper left corner, and the large heading cells at the top and left. Also, count the cells and rows, and see if they make sense to you. [Hint, when counting cells which span columns or rows, count them as however many columns or rows they span; for example, a cell which spans two columns counts as 2 cells in that row, even though it gets painted as one (wide) cell.]

Overseer: Monty Northrup ...

... leave e-mail ...

cell 1	cell 2	cell 3	cell 4
cell 5	cell 6
cell 7	cell 8	cell 9	cell 10
cell 11			cell 12