TABLE Headers

This is probably putting the cart before the horse by not discussing rows and columns first, but the table header is an important part of proper display of your data.  So I will discuss the creation of table headers first for your use in your tables.  First is the use of the built in table "header" <th> element.  You can use this element to automatically define the text in the cells that contain a header. Browsers interpret the <th> element automatically, centering the header and displaying it in "bold" text.  The <td> element is not centered and is not bold unless you provide additional style formatting to perform those functions.  The first example uses the <th> element and the second example uses the <td> element for headers.

Example 1 using the <th> element

I didn't use any style with the "th" element to show how a browser interprets the element, but style can be added directly in the element, such as <th style="color:#900; font-size:16px; font-weight:bold">.  Or you can define a style in your CSS file to be selected by the "class selector" in the "th" element, such as <th class="tdheader"> .

Example 2 using the <td> element for the headers

You will notice that I used the "class selector" in the "td" element to select the class "tdheader" which defines the style to be used for the headers.  If you don't define a style in the "td" element, a browser will display the text as plain text without any style added and position it on the left side of the cell.  By using CSS, this reduced the amount of typing needed to define the font style in the header.  It can also add color to the header where browsers do not unless told to do so in a style statement.  But, as with the "th" element, you can add style directly to the "td" element as well, such as <td style="color:#900; font-size:16px; font-weight:bold">.

Example 3 Header Formatting

In the following example, you will see how your header row will affect the remainder of your table and the data it displays.  The header row should be designed with widths that will display your data in a uniform format.  For example, if the first column will contain the primary target data for your readers, it should be wide enough to hold as much as possible on one line.  It is not required to have only one line of data since the cell and row will expand if you add a large amount of data.  One thing to keep in mind is that readers are more comfortable with short descriptions rather than long extended descriptions.  It saves them time in reading each of hte rows.  Secondary data to add to their knowledge of the file should be placed in narrow width columns.  NOTE: The header widths will define all of the additional row cell widths.  It is not necessary to add the "width" element to each subsequent cell.

When you view the above table, cell 2 and 3 appear to be the same width even though I defined the widths to be different.  This is because the example table is reduced in size to fit the box.  It will be different as a full size table on your page.  I added the second row with a large description in the file name cell to show what happens to the cells in that row.  Let the file that will be accessed by the reader give the greater detail on what the file contains.  Try to keep your file names as brief as possible.