Maddog's HTML Primer for Real People

Chapter 9, Lesson 2

Ch 9, L 2 - Simple Tables

If you already know how to build a simple text-based table, you can skip this lesson.

Remember the text-based table from the last lesson?

                               Class Attendance
                               ----------------
Class                    Jan-Mar    Apr-Jun    Jul-Sep    Oct-Dec
-----                    -------    -------    -------    -------
Intro to Internet           14         26         29         28
Building Your Web Page	    26         25         28         30
Perl / CGI                  12         10         14         12

If we want to understand how HTML handles tables, we'll first observe the following key features:

it's a table (ok, that's obvious, but it's essential);
there are rows of data;
there are one or more data elements in each row;
some of the data in the row might be considered a row or column heading.
if an entire row constitutes a title, we consider it a caption

The bolded words in the list above are key to our discussion and understanding of tables in HTML. In our text-based example table (ignoring the dividing lines), we observe five table-rows. The first row contains one table-data element, but since the entire row seems to be a title, we might instead call it a table-caption. The second row contains five table-data (the word "class" and the quarters of the year). In addition, the table-data in the second row might better be considered table-headings instead of table-data. And the last three rows each contain five table-data (although we might also consider the first data element in each of those rows to be a table-heading).

Re-read the last two paragraphs, and study the table carefully, because these concepts are essential to understanding how HTML implements tables.

Well concentrate on the simplest HTML table for now, that is, one with table-rows of table-data, and we'll cover table-captions and table-headings in the next lesson. For now, let's introduce the HTML tags used to build tables.

First, we have a tag pair that identifies the beginning and end of the table itself. All other table-related tags must fall within the bounds of the 'TABLE' tag pair. As we've seen with other tags, there is an opening and a closing tag, and the closing tag is required for compliant HTML:

The beginning and end of each table-row ia also marked by a tag pair, using the 'TR' tags, like so:

Finally, the beginning and end of each table-data element is marked by a tag pair, like this:

In both cases ('table-row' and 'table-data'), the opening tag marks the beginning of the row or data, and the closing tag marks the end.

The HTML spec requires the closing tag for both 'table-row' and 'table-data', but most browsers that support tables allow you to omit the closing tag for these two tags. When the </TD> tag is omitted, the table-data will close when the next table-data is encountered, or when the row ends. Likewise, when the </TR> tag is omitted, the table-row will close when the next table-row is encountered, or when the table ends. In either case, the closing </TABLE> tag is always required. If you know you have a simple table, without nesting, you can omit the closing </TD> and </TR> tags. If you're not sure, or you just want to play it safe (thus assuring maximum compliance), use the closing tags.

Having identified the various tags we use, we can now offer a format for building simple HTML tables:

Let's see our simple table demonstrated in real HTML code:

<TABLE>
<TR>Class Attendance</TR>
<TR><TD>Class</TD> <TD>Jan-Mar</TD> 
     <TD>Apr-Jun</TD> <TD>Jul-Sep</TD> <TD>Oct-Dec</TD> </TR>
<TR><TD>Intro to Internet </TD><TD>14</TD> 
<TD>26</TD> <TD>29</TD> <TD>28</TD> </TR>
<TR><TD>Building Your Web Page</TD> <TD>26</TD> 
     <TD>25</TD> <TD>28</TD> <TD>30</TD> </TR>
<TR><TD>Perl / CGI</TD> <TD>12</TD> <TD>12</TD> 
     <TD>14</TD> <TD>12</TD> </TR>
</TABLE>

<TABLE>
<TR>Class Attendance </TR>
<TR><TD>Class <TD>Jan-Mar <TD>Apr-Jun <TD>Jul-Sep <TD>Oct-Dec 
<TR><TD>Intro to Internet <TD>14 <TD>26 <TD>29 <TD>28 
<TR><TD>Building Your Web Page <TD>26 <TD>25 <TD>28 <TD>30 
<TR><TD>Perl / CGI <TD>12 <TD>12 <TD>14 <TD>12 
</TABLE>

Class Attendance

Class Jan-Mar Apr-Jun Jul-Sep Oct-Dec

Intro to Internet 14 26 29 28

Building Your Web Page 26 25 28 30

Perl / CGI 12 12 14 12

Class Attendance

Class Jan-Mar Apr-Jun Jul-Sep Oct-Dec
Intro to Internet 14 26 29 28
Building Your Web Page 26 25 28 30
Perl / CGI 12 12 14 12

Let's examine what the browser did with our HTML code. When the browser encounters the first <TABLE> tag, it reads in all the remaining tags, data, and text up to the closing </TABLE> tag. Having read in all the table-related information, it parses it (sorts it out), deciding what text or data goes in which row, and what goes in each data column. The browser also calculates how wide the first data column has to be, how wide the second column, and so forth. Notice that all the first table-data elements (in each row) get assigned to the first column in the table, all the second elements to the second column, and so forth. Before it actually displays anything, it sees how wide a column has to be to hold the longest text in that column, so it can make sure they all line up.

The first table-row in our demonstration had no table-data (i.e., no <TD> ) tag, but it did have text. This is really the title or "caption" for our table, but since we haven't covered captions yet, we left it as text, but created a table-row for it anyway. It would have been nicer if the table's title had been "centered" over the table, making it's role as a table-title more obvious. We'll get to that later.

To demonstrate that we get the same table, even if we omit the closing </TD> and </TR> tags, we omitted them on the second table. If your browser did something different for the second table, it's because it had a nervous breakdown over the missing closing-tags. Notice that in both tables, we made sure to use the closing '</TABLE>' tag.

Try to remember to use closing tags where required. Some browsers will cover for you, but often a missing closing-tag will cause erroneous or unpredictable results. It's a good idea with any HTML source code to count the number of matching opening and closing tags, and make sure you have the same number of each. Alternatively, submit the code to a web page validation service, like Doctor HTML or TechWeb's HTML Validation Service. Such services will warn you of missing closing tags. Don't assume that because your browser looked OK, that you did it perfectly, and don't get too upset when you find out that your code has a bug or two in it (join the club...)

You probably have lots of questions in your mind at this point, and most of them will probably be answered as we explore the ins-and-outs of HTML tables in subsequent lessons. In this lesson, try to understand and remember that the browser builds tables based on the <TR></TR> (table-row) tag pair and the <TD></TD> (table-data) tag pair in each row, and that the bounds for those are marked by the opening <TABLE> tag and the closing </TABLE> tag.

Overseer: Monty Northrup ...

... leave e-mail ...

Class	Jan-Mar	Apr-Jun	Jul-Sep	Oct-Dec
Intro to Internet	14	26	29	28
Building Your Web Page	26	25	28	30
Perl / CGI	12	12	14	12