A Tabled Proposal - Trials and Tabulations - HTML with Style

Trials and Tabulations

A Tabled Proposal

Basic Table Structure

Tables have a simple basic structure. A table is defined with the TABLE element. Each table has a set of rows, and each row has several cells. They are represented using the TR and TD elements. Here's a basic table with some productivity figures from Acme Computer Corporation's Sales department:

<H3>Are Bugs Helping M.O.R.O.N.S. Sales?</H3>
<P>The table below lists the number of reported 
bugs per 1000 lines of code in M.O.R.O.N.S. against the 
product sales.</P>
<TABLE>
 <TR>
  <TD>Year</TD> <TD>Bugs</TD> <TD>Sales</TD>
 </TR>
 <TR>
  <TD>1995</TD> <TD>2.3</TD>  <TD>500,000</TD>
 </TR>
 <TR>
  <TD>1996</TD> <TD>3.2</TD>  <TD>1,700,000</TD>
 </TR>
 <TR>
  <TD>1997</TD> <TD>5.6</TD>  <TD>8,200,000</TD>
 </TR>
 <TR>
  <TD>1998</TD> <TD>12.3</TD> <TD>33,000,000</TD>
 </TR>
</TABLE>

You can see the structure of a table clearly in the above example. Of course, there are a lot of tags in there. Luckily, end-tags for the TR and TD elements are implied. So, our example can be written much more neatly with the same effect:

<TABLE>
<TR><TD>Year<TD>Bugs<TD>Sales
<TR><TD>1995<TD>2.3<TD>500,000
<TR><TD>1996<TD>3.2<TD>1,700,000
<TR><TD>1997<TD>5.6<TD>8,200,000
<TR><TD>1998<TD>12.3<TD>33,000,000
</TABLE>

That's the good news. The bad news is that you shouldn't do this. The reason you can't is that there's a bug in Navigator that makes the browser mess up most of the CSS styles in your entire document if you don't include each and every tag in the elements of a table. I've already mentioned that omitting end-tags is the number 1 trigger of CSS bugs. The precise effects of this are not predictable, and depend on your document as well as the precise CSS properties you've set. Omitted table tags are actually the first thing you should check for when something goes wrong in CSS, especially when it comes to the visual formatting model.

Tables and CSS

This brings us to the sticky point about tables. HTML tables have been around a lot longer than CSS, so a lot of their formatting can be controlled using older, HTML-based methods instead of CSS. Also, the formatting of tables can be a tricky business, as we'll see later on. Level 1 of CSS didn't give any methods for controlling the visual presentation of tables. CSS2 has quite a comprehensive set of methods, but the problem is that they are still mostly unimplemented. Discussing them here would be like discussing the problems in the administration of colonies in neighboring star systems. Though I hope browsers supporting CSS table properties appear before practical inter-stellar travel becomes a possibility, we'll make an exception from our normal way of doing things and take a more practical stand-point, exploring some of the methods used for table presentation today.

Of what we have explored so far of CSS, some things still apply. Background colors can be set in tables, cells, rows and, as we will see later, columns. CSS properties can be set for elements inside cells and things can be expected to work pretty well, as long as you steer clear of box and layout properties for the table cells themselves. Another bug concerning tables and CSS, however, is that most CSS properties will not be inherited by tables from their parents, nor will they be inherited by rows and cells, in both Explorer and Navigator. It is good practice to set CSS properties explicitly for table elements, to make sure they are applied.

Produced by Stephanos Piperoglou

URL: https://www.webreference.com/html/tutorial11/1.html
Created: Feb 10, 1998
Revised: Feb 16, 1999