Maddog's HTML Primer for Real People

Chapter 10, Lesson 1

Ch 10, L 1 - Cells and Borders

If you already know what a cell is, and how to enable and size cell borders, you can skip this lesson.

When we talked about tables in the last chapter, we withheld one of the concepts associated with HTML tables, in case you wanted to go no further with tables than simple text-based tabular data. Now, however, you're obviously interested in learning more about how HTML tables work graphically, so we need to introduce the concept of cells.

Here's a simple HTML table, similiar to what we presented in the last chapter:

UFOs Sighted
Date Count

3-22-97 17

4-19-97 39

UFOs Sighted
Date	Count
3-22-97	17
4-19-97	39

If we really oversimplify things a bit, we could say that the table consists of two parts: the table itself, and rows of cells. The cells contain data (or a special kind of data called headings). The cells can be arranged in rows, as we already know. To visualize a cell, imagine that there is a box drawn around each of the table-data; that imaginary box is called a cell. Each cell has height, width, cell-background-color, cell font color, cell font type, and some other properties we haven't introduced yet. In the simple table shown above, the browser either uses default values, or calculates the properties of each cell automatically. For example, the browser automatically calculates the width of each cell based on the width required for the cell with the widest text in that column. Actually, HTML doesn't have columns, but when the cells get stacked up one upon another, they appear to be in columns.

As we progress into our discussion of graphical tables, we will be changing the properties of the cells. If you imagine them as an imaginary box, you'll have an easier time with the new material. Now, when we say that a data-cell is "center-aligned", you'll be able to visualize that the browser is going to center the text horizontally inside the imaginary box we call a cell. Simple, huh?

One of the properties of a cell that is turned-off by default is the "border". If we were to turn ON the border, we would suddenly have a thin line outlining the cell, which will make it really easy to see the cells. Here's our table again, with borders turned on:

UFOs Sighted
Date Count

3-22-97 17

4-19-97 39

UFOs Sighted
Date	Count
3-22-97	17
4-19-97	39

Now we can give our imagination a rest, because with the border turned ON, it's easy to see what a cell is. I know that at this moment you're thinking "this is sooo coOol!", so let's find out you can do this yourself.

The opening <TABLE> tag can be modified with the 'BORDER=' attribute, which takes a numerical value as its argument (an "argument" is what ends up on the right side of the '=' sign). Here's the method:

The usual rules apply regarding attributes embedded in a tag, i.e., a space before the attribute name, and none around the '=' sign. Notice that since this is a numerical value (i.e., number of screen pixels), no quotation marks are required.

If the value is '0' (BORDER=0), the cell border will be invisible, the table will be as compact as the browser can make it, and it will look much like the tables we saw in the previous chapter.

If the value is '1' (BORDER=1) or more, the cell border will be made visible, and the table will be enlarged just slightly so as to accommodate the extra border width. The browser will draw borders around the entire table, but not the caption. If the value assigned to 'BORDER' is larger than '1', the browser may draw thin borders around the individual cells, and apply the larger border only to the outside perimeter of the table (this is somewhat browser dependent).

Let's look at how we apply borders in HTML source code:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN" "html.dtd">
<HTML>
<HEAD>
<TITLE> type_Document_Title_here </TITLE>
</HEAD>
<BODY>Here's a table with BORDER=0:
<P>
<TABLE BORDER=0>
<CAPTION>UFOs Sighted </CAPTION>
<TR ALIGN="CENTER"><TH>Date</TH><TH>Count</TH></TR>
<TR ALIGN="CENTER"><TD>3-22-97</TD><TD>17</TD></TR>
<TR ALIGN="CENTER"><TD>4-19-97</TD><TD>39</TD></TR>
</TABLE>
<P>
Here's a table with BORDER=1:
<P>
<TABLE BORDER=1>
<CAPTION>UFOs Sighted </CAPTION>
<TR ALIGN="CENTER"><TH>Date</TH><TH>Count</TH></TR>
<TR ALIGN="CENTER"><TD>3-22-97</TD><TD>17</TD></TR>
<TR ALIGN="CENTER"><TD>4-19-97</TD><TD>39</TD></TR>
</TABLE>
<P>
Here's a table with BORDER=10:
<P>
<TABLE BORDER=10>
<CAPTION>UFOs Sighted </CAPTION>
<TR ALIGN="CENTER"><TH>Date</TH><TH>Count</TH></TR>
<TR ALIGN="CENTER"><TD>3-22-97</TD><TD>17</TD></TR>
<TR ALIGN="CENTER"><TD>4-19-97</TD><TD>39</TD></TR>
</TABLE>
<P>
Here's a table within a table (both with a border of 10)
<P>
<TABLE BORDER=10>
<CAPTION>UFOs Sighted </CAPTION>
<TR ALIGN="CENTER"><TH>Date</TH><TH>Count</TH></TR>
<TR ALIGN="CENTER"><TD>3-22-97</TD><TD>17</TD></TR>
<TR ALIGN="CENTER"><TD>4-19-97</TD>
<TD>
     <TABLE BORDER=10>
     <TD>39</TD>
     </TABLE>
</TD>
</TR>
</TABLE>

Here's a table with BORDER=0:

UFOs Sighted
Date Count

3-22-97 17

4-19-97 39

UFOs Sighted
Date	Count
3-22-97	17
4-19-97	39

Here's a table with BORDER=1:

UFOs Sighted
Date Count

3-22-97 17

4-19-97 39

UFOs Sighted
Date	Count
3-22-97	17
4-19-97	39

Here's a table with BORDER=10:

UFOs Sighted
Date Count

3-22-97 17

4-19-97 39

UFOs Sighted
Date	Count
3-22-97	17
4-19-97	39

Here's a table within a table (both with a border of 10)

UFOs Sighted
Date Count

3-22-97 17

4-19-97

39

We can see from the demo that the border can really improve the presentabilty and readability of our tables. The first table shown, which has its border set to zero, looks just like a simple text-based table. In the next two examples, the browser has created a border for us which just dazzles the eyes, don't you think? Most advanced browsers give the borders a kind of 3-D effect, like a picture frame, but that's kind of determined by what browser is interpreting the HTML code.

In the last example, we got a little weird. (OK, OK, I got a little weird). It's not a mistake, I just have the compulsion to stir things up now and then. In the last table, we show an example of nested tables. I had decided that I wanted a thick border around the last data cell on the last row (why?... 'cuz...just 'cuz...). Since the browser usually draws only a thin line around individual cells, I placed an entire table inside the data cell where I wanted the thick border. The "nested" table was very simple, consisting of only one table-data which held the text "39". In my source code, I broke that particular cell out onto it's own line, then indented the nested table, not because it made any difference to the browser (because it doesn't), but because it made it a lot easier for me to read the HTML code. If you look carefully at the code, you'll see that it's almost exactly the same as the original table, except that I've embedded a second table inside the last data cell of the first table. It might be worth a few minutes to ponder on this until you see it clearly, because nesting tables can be quite useful in more advanced applications of graphical tables that we'll cover later.

There's one more thing to notice about the last example. The browser automatically adjusted the height of the first cell on the second row, so that it would still be in line with the second cell on that same row. This is a default property of tables that the browser will take care of (if you don't force it to do otherwise, which you don't know how to do yet). Cells always line up in columns and rows, and the cell size is calculated by the browser to make sure they do.

By the way, if you didn't see a fourth table, or the results looked REALLY strange, your browser may not handle nested tables very well (some don't support nesting of tables).

Overseer: Monty Northrup ...

... leave e-mail ...