The first releases of HTML did not include any features for formatting pages. Ever resourceful, web designers took to using tables to format pages. With HTML 4.0, the powers that be added a new feature called Cascading Style Sheets. To hurry people along to accepting Cascading Style Sheets, the W3C consortium unilaterally declared table attributes obsolete.
Of course, CSS formatting is not the same across all platforms. My experimentations with CSS show it be even worse than traditional HTML. CSS is significantly more difficult to write than HTML attributes. Even three years after W3C declared HTML obsolete, the majority of web page development uses table attributes. However, since there are two methods for formatting tables, I will have two articles on table format. When dealing with large quantities of data, I will still opt for the traditional formatting structures.
The attributes in the table tag affect the entire table. These attributes are:
| Table Attributes | ||
|---|---|---|
| Attribute | Values | Description |
| width | points or percent | You can specify the width as either fixed or relative. If you set the table as a fixed number of points, the table with always be that size regardless of the viewer's browser size. If you set it to a percent, the size of the table will depend on the user's browsers. I generally set relative to the user's browser. For graphic displays, however, I set it to a fixed width. |
| border | number | The border attribute draws a border around the the table. The border is points. In most cases you want to set the border to 0. Some times you might want to have an outrageously large border, and might set it to 10. You can tweak the color of the border with the border color light and dark attributes. Usually the browser does a good job in chosing the border colors. |
| bgcolor & bgimage |
number or URL to image |
The bgcolor tag sets the background color for the table. I find this useful in situations where I want to offset the background color of the table from the main document. For example, for my short stories page I used a background image. The table background, however, is a solid color. Making the thing easier to read. |
| cellpadding & cellspacing |
number | The cellpadding and cellspacing commands are actually quite
useful. Cellpadding refers to the area between the border of the table and
the words in a cell. Generally it it too small. I set the cellpadding of
this table to 4. See how there is just a little more room around the cell. Now for the bad news. Cellpadding is a table attribute, and it affects all sides of the cell equally. I generally only want a cel padding on the left edge of the cell. You can micromanage the cell padding the cascading style sheets. But that is beyond this discussion. |
The <tr> tag attributes affect an entire row of data. You don't set these attributes as often as the table attributes.
| Table Row Attributes | ||
|---|---|---|
| Attribute | Values | Description |
| bgcolor & bgimage |
color | This sets the background color for the row. I like to alternate the background colors in a document. It makes the data in the table easier to read. The table row background overrides the table background. |
| valign | top, middle, bottom | The valign tag sets the verticle alignment for the row. The default is center. With text data, I often like to set it to top. On this row of information, the verticle alignment is center, on the line above it is top. |
| cellpadding & cellspacing |
number | The cellpadding and cellspacing commands are actually quite
useful. Cellpadding refers to the area between the border of the table and
the words in a cell. Generally it it too small. I set the cellpadding of
this table to 4. See how there is just a little more room around the cell. Now for the bad news. Cellpadding is a table attribute, and it affects all sides of the cell equally. I generally only want a cel padding on the left edge of the cell. You can micromanage the cell padding the cascading style sheets. But that is beyond this discussion. |
The <td> tag creates a table cell, the <th> tag creates a table cell header. Allowable attributes for the <th> and <td> tags are as follows:
| Table Cell Attributes | ||
|---|---|---|
| Attribute | Values | Description |
| align | left, center, right | This is the main tag used in table cells. The default is left. I like to right align numbers. There is not, alas, a decimal align. If you want to decimal align, you can do so by adding zeros or null spaces ( ) |
| bgcolor & bgimage |
color | This sets the background color for the cell. It overrides the table and tr colors. I usually don't use this attribute. You can make a poor man's dynamic button with this tag. Just put the button's image as the background, the text will hover over the background like a button. |
| valign | top, middle, bottom | You can set the verticle alignment for each cell. |
| width | number or percent |
You can set the row width to a number or percent. The percent is relative to the size of the table. You want the percent of each of the table cells to add up to 100. If you are using absolute references, you want the width of the tables to add up to size of the table. I usually leave the attribute alone, and let the browser set my cell row width for me. |
The W3C consortium has declared these attributes to be obsolete. They are still in widespread use, and I doubt web browsers will stop supporting them for the foreseeable future. Who knows, the next set of arrogant men will look at the fiasco of CSS standardization and declare it obsolete. ¿quien sabe?
From here, you can read about the CSS Way, go back to the HTML article, all the way back to the course index, or on to PHP.