         September/October 1996


          HTML HACKING

          Table Talk

          Using HTML-coded tables can give your page a magazine-like look.

          By Scott Clark 

          News flash, developers: You don't need Java or multimedia or any other fancy tricks to
          make a good page look great. It seems that with all these new toys at our disposal,
          we've forgotten that just by learning and utilizing the lesser-used capabilities of HTML,
          we can yield some impressive results. 

              The use of tables is a perfect example. Many Web pages often try to emulate the
          layout of magazines, complete with multiple columns, callouts (information you want to
          stand out), and illustrations. Using tables can help you achieve this look, without having
          to resort to painstaking hand coding. Most of today's browsers now handle HTML
          tables, and the things that you can do with tables--even using just the standard table
          tags--are pretty amazing. 

          Setting the Table(s)

          Tables are constructed of rows, columns, and cells, just like spreadsheet programs. A
          row may span several columns, and a cell can span more than one row or column. A
          basic two-column, magazine-style layout can be achieved by using a single table row
          with three data cells: one for each column of text, plus an empty cell between them to
          create space between the columns. 

              To create the space between the table cells and the information or images in the
          cells, you'll want to use a technique known as cellpadding. Cellpadding controls the
          amount of space between the edge of a cell and its contents. 

              Add a cellpadding value of five or more to the table tag to create even space
          between all the columns, including the empty one. The browser will not make the text in
          the columns equal, so a bit of text tweaking is necessary to create the two-column
          effect. Don't waste too much time making the text perfectly balanced; remember that
          users can resize their browsers, which tends to screw up the design that you have so
          painstakingly created. 

              Figure 1, below, illustrates how you can do all this. A normal heading tag is centered
          above the table, and the table is centered on the page. The heading could have also
          been included in the table, although there is no added benefit to doing so. 

          <TABLE CELLPADDING=6 WIDTH=600>
          <TR>
          <TD>data... . .
          <TD>
          <TD>data... . .
          <TR>
          </TABLE>

          The use of single-pixel images can improve this two-column layout further. A
          single-pixel image is simply a one pixel wide, one pixel high "dot" that you create using
          a graphics program. By using the height and width attributes of the image tag, the
          single-pixel image can be stretched, and will appear as a longer or wider image. 

              The single-pixel image can be used as a vertical rule between columns in an article
          by specifying the HEIGHT attribute of the <IMG> tag to be the same as the pixel height
          of the particular column. 

              There is no simple way to find the exact pixel height of a column, but using 85 pixels
          per inch as a start, you should be able to get a pretty good match. The image tag for a
          two-inch-high column might look like this: 

          <IMG SRC="single-pixel.gif" HEIGHT=170> 

              Pages with more than three columns will force users with smaller displays to scroll to
          the right in order to see the whole table or page. In order to keep your page easy to
          view, you'll probably want to use a maximum of three columns. 

              Using a cell that spans several columns, you can combine text, graphics, and vertical
          rules (using single-pixel images) to create a magazine-like display. Images can span
          more than one column by adding the <COLSPAN> attribute to the cell containing the
          graphic. Similarly, columns can span more than one row by using the <ROWSPAN>
          attribute in that particular column. If you wanted to have a graphic span three columns,
          your cell tag could be coded like this: 

          <TD COLSPAN=3> 

          and your multi-row spanning column would be coded like this: 

          <TD ROWSPAN=2> 

              In Figure 2, we use both of these tricks--as well as a single-pixel image as a vertical
          rule--to create a three-column layout, complete with images and text. We're also using a
          horizontal rule, an increased font size surrounding some text, and another horizontal rule
          to create a callout. Although the Font tag is a proprietary Netscape/Internet Explorer
          extension, it will just be ignored by non-capable browsers, so you can only gain by using
          it. 

          <TABLE BORDER=0 CELLSPACING=7 WIDTH=85%>
          <TR>
          <TH COLSPAN=5><H2>Tables are for <I>More Than Eating!</I></H2>
          <TR VALIGN=TOP>
          <TD ROWSPAN=2>info...
          <HR size=2><FONT SIZE=4>This feature is can be used to simulate "callouts"
           in this magazine-style Web page.</FONT>
          <HR size=2>  continuing info...
          <TD ROWSPAN=2 WIDTH=24><IMG SRC="vrule.gif" HEIGHT=380>
          <TD>info... 
          <TD WIDTH=24><IMG SRC="pixel.gif" HEIGHT=100>
          <TD>and the final info... 
          <TR>
          <TD COLSPAN=3 VALIGN=TOP><CENTER><IMG SRC="smwd.gif">
          <BR>
          <I>Magazine</I>
          </TABLE>

          One of the most popular uses for tables seems to be pages with one and a half
          columns, so to speak. The main portion of the page is for text, and the remainder to the
          left or right is used for comments, callouts, and images--and no frames! This is done by
          using the Width attribute in the table tag, along with a simple two-column layout. The
          Width attribute can be specified in either a width percentage or in pixels. A table width
          greater than 800 pixels will force readers to scroll to see the whole table. 

          Fine-Tuning Forms

          Forms are usually a very disorganized mass of text and input boxes. The <PRE> tag
          was about the only way to save them from total disaster, until table-savvy Web
          designers came along. Figure 3 shows how you can make your form more presentable
          by using a simple two-column format. 

              Using a table header that is right-aligned, create the labels for the input fields, and
          use a standard table data tag for the input sections of the form. The Submit and Clear
          buttons are in the bottom row, which has two table data cells. The first table data cell is
          empty, and the second contains the two centered buttons. More advanced forms also
          can be used with tables, including tables within tables that contain checkboxes and
          groups, each aligned in a neat, centered row. 

          <FORM ACTION=POST>
          <CENTER>
          <TABLE>
          <TR>
          <TH ALIGN=RIGHT>Name:
          <TD><INPUT TYPE=TEXT SIZE=30>
          <TR>
          <TH ALIGN=RIGHT>Email:
          <TD><INPUT TYPE=TEXT SIZE=30>
          <TR>
          <TH ALIGN=RIGHT>Phone:
          <TD><INPUT TYPE=TEXT SIZE=14>
          <TR>
          <TD>
          <TD ALIGN=CENTER><INPUT TYPE="SUBMIT" VALUE="SUBMIT"> <INPUT TYPE="RESET" 
          VALUE="CLEAR">
          </TABLE>
          </CENTER>
          </FORM>

          Browsers: The Previous Generation

          Of course, you will inevitably encounter users who try to view your multi-column creation
          using an archaic Web browser that doesn't support tables. Before all you Lynx users
          pick up your quill pens to send me hate mail, you should know that even Lynx now has a
          version out that supports basic table tags...so do us all a favor and get a copy! 

              That said, we still have to deal with those users who may not have had the
          opportunity to upgrade their browsers. Not a problem: Simply put <BR> or <P> tags at
          the end of the information in each cell, and use headings and other standard HTML tags
          in tables where applicable. Table-aware browsers will ignore the breaks and
          paragraphs, while table-challenged browsers will still render them in a readable format,
          complete with standard HTML tags. They still won't look as good as you had intended,
          but at least the user won't be looking at an unreadable mess where your table was
          supposed to be. We haven't done this in the above examples for clarity, but you can see
          exactly how it is done at http://www.webdeveloper.com/sepoct96/tables/. 

              As you can probably see from just these few simple tips and techniques, Web pages
          don't have to be limited to flat, one-column layouts, nor do you have to use the latest
          plug-ins to enjoy them. The Web was designed to be a platform-independent viewing
          mechanism. Finally, keep in mind that content is always first and presentation second in
          the order of importance; no graphic makes a poor product worthwhile.  

          Scott Clark (scott@phoenixat.com) is Webmaster for Phoenix Applied Technology, an
          ISP in Kissimmee, Fla., and runs his own Web development company, Soup's Up
          Programming. He is also associate editor for the Java Developer's Journal. 

          Reprinted from Web Developer magazine, Vol. 2 No. 4 September/October 1996 (c)
          1996 Mecklermedia Corporation. All rights reserved. 

                                                         


