Table-Making Tips - HTML 4

We’ve spent years of building, maintaining, and troubleshooting tables, and in that time we’ve discovered some neat tricks. The following tips are a head start to creating effective tables.

Following the standards
The first — and (we think) most important — tip is to keep with the established standards. The folks involved with the Web Standards Project have
campaigned for full standard support in browsers and HTML authoring applications since 1998. Their hard work should make your life easier.

Just a couple of years ago, if you built an HTML table, you would be forced to create different versions of your Web page (each version containing browserspecific elements and attributes) to define some basic table properties. As you might imagine, creating and maintaining different versions of the same Web page can drive development costs sky-high. To get around those costs, many developers would carefully craft their tables with specific markup that worked in Internet Explorer and Netscape — but what about Opera? Well, happily those are problems of the past. The newest versions of Internet Explorer, Netscape, and Opera all support HTML, as well as CSS and XHTML.

Sanitizing markup
Efficiently written markup is easier to troubleshoot and maintain. Many designers use white space to separate elements. For example, the following markup doesn’t use much white space and is hard to read:

<table border=”1” width=”630”>
<tr><td width=”630” colspan=”2”> contents </td></tr>
<tr><td width=”400”> contents </td>
<td width=”230”> contents </td></tr></table>

Check out this clean version:

<table border=”1” width=”630”>
<tr>
<td width=”630” colspan=”2”> contents </td>
</tr>
<tr>
<td width=”400”> contents </td>
<td width=”230”> contents </td>
</tr>
</table>

The white space we include in our markup is between elements; not within elements. If, for example, you add white space between the <td> and </td> tags, it affects how the cell’s content is displayed, which isn’t generally something you want to do.

Nesting tables within tables
Many designers are forced to nest tables within tables to achieve a desired effect. This is both legal and common. A few nested tables won’t affect your users too badly. But nesting many tables within tables can lengthen download time. To nest a table, simply add the <table> element within a <td> element as follows:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Nesting Tables</title>
</head>
<body>
<table border=”1”>
<tr>
<td> contents </td>
<td> contents </td>
</tr>
<tr>
<td>
<table border=”1”>
<tr>
<td> contents </td>
<td> contents </td>
</tr>
<tr>
<td> contents </td>
<td> contents </td>
</tr>
</table>
</td>
<td> contents </td>
</tr>
</table>
</body>
</html>

This markup produces the tables shown in Figure.

Figure : Nested tables.

Nested tables.

When using nested tables

  1. Check cell widths — the width of the third cell should match the width of the nested table.
  2. Create and test the table you intend to nest — separately, before you add it to your primary table.

Avoiding dense tables
We recommend creativity, but be careful and don’t pack a screen full of dense and impenetrable information — especially numbers. A long, unbroken list of numbers quickly drives away all but the truly masochistic — pretty much negating the purpose of the table to begin with. Put those numbers into an attractive table (better yet, several tables interspersed with a few well-chosen images). Watch your page’s attractiveness and readability soar; hear visitors sigh with relief.
Individual table cells can be surprisingly roomy. You can position graphics in them precisely. If you’re moved to put graphics in a table, be sure to

  1. Select images that are similar in size and looks.
  2. Measure those images to determine their heights and widths in pixels. (Shareware programs such as Paint Shop Pro and GraphicConverter do this automatically.)
  3. Use HTML markup to position these images within their table cells.

A short-and-sweet table keeps the graphics in check and guarantees that the text always sits nicely to its right.

Two more handy graphics-placement tips produce a consistent, coherent image layout:

  1. Size your rows and columns of cells that contain images to accommodate the largest graphic.
  2. Center all graphics in each cell (both vertically and horizontally).

Adding color to table cells
You can use either CSS or (X)HTML to change the background color of a cell or table. Before CSS was around, designers used the bgcolor attribute to change the background of table cells in much the same way it affects the background of an entire HTML document. Simply add the bgcolor attribute to any table cell to change its background color:

<td bgcolor=”teal”>...</td>

However, now you have a bit more flexibility to use the background property to add some color:

td {background: red;}

The bgcolor attribute may be used with any of the table elements. However, the bgcolor of a cell overrides any bgcolor defined for a row or table. Note that bgcolor is also deprecated, and that most Web experts use CSS markup instead.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML 4 Topics