Solid HTML That's As Simple As It Gets: Advanced Tables
Oct 30 '01
The Bottom Line Most tables have a matrix structure; however, some tables have combined rows or columns. Tables can be used to simulate colored dividers. Nested tables can be used to make borders.
Based on earlier HTML guides concerning tables, each table has a fixed number of rows and columns (or table data cells)-- 2x2, 4x6, 161x4, etc. These same tables can also have borders which are rendered invisible or the default border color. In terms of structure, these tables are simple.
However, there are times when a table needs to have a more complex structure in order to achieve a certain effect. Microsoft web browsers render colored borders one way while Netscape web browsers render colored borders another way-- and the HTML for this table is the same. A table resembling a newspaper with multi-column text may have a colored divider which is either vertical or horizontal. A flag made with HTML codes (with or without the IMG tag, depending on the flag) may have, say 5 rows but 2 rows need to be joined to accommodate a certain element of this flag. As common as tables with simple structures are, there are also many tables which must be made with a complex structure to achieve a desired effect.
Given time and space constraints encountered by Epinions.com readers and members, the emphasis of this final HTML guide on tables will be on general techniques which can be applied by a web page creator to solve a specific problem. Imagination will determine how a table will be made, but I will provide the tools needed for the imagination to go into overdrive.
Instead of using the sample web page from earlier HTML guides, I will use HTML which is specific to the situation being explained here. What are the tools which can bake a complex table structure useful?
• Joined Table Data Cells
• Joined Table Rows
• Colored Dividers
• Colored Borders
• Nested Tables
The best way to illustrate these techniques is by using HTML to design flags. A number of state flags are great examples of the table techniques I will cover in this HTML guide; a web page I found a few years ago is titled Elizabeth's Flags and Facts of the United States, and it shows the 50 state flags. I will show how HTML can be used to generate these flags. The URL for this web site is [http://members.tripod.com/~lizcal/].
__________________________________________________
Joined Table Data Cells
A number of state flags can be made by joining table data cells, but they also need to have rows joined as well. These will be done as a unit later. Just to show how table data cells are joined I will use the Wisconsin state flag as an example.
At first glance the Wisconsin state flag looks like a simple background with text at the top, a complex image in the center, and smaller text at the bottom. Just from this description it is possible to use HTML to make this flag. There are even alternate HTML methods to generate the Wisconsin flag, and all would be correct. For our purposes, the Wisconsin state flag will be rendered in this manner:
• The flag will have three columns;
• The second column will contain the text and image found on the flag;
• The top line of text will span all three columns.
Here is the HTML for the first two requirements of this table:
==========
<TABLE BGCOLOR="#0000FF"><!-- Blue background for flag -->
<TR><TD><!-- empty cell -->
</TD>
<TD><DIV ALIGN="center">
<FONT FACE="Arial" COLOR="#FFFF00"><!-- Yellow text -->
<H1>WISCONSN</H1>
<!-- IMG tag can go here-- text is a placeholder -->
STATE<BR>CREST<BR>FOR<BR>WISCONSON<BR>GOES<BR>HERE<BR>
<!-- -->
<H1>1848</H1>
</FONT>
</DIV>
</TD>
<TD><!-- empty cell -->
</TD>
</TR>
</TABLE>
==========
As the table stands, it is a 1x3 table which has content in the second column: yellow text and an image. The DIV tags are included to have the text centered within the cell. The comments speak for themselves. If an image of the Wisconsin state crest were available, the table is complete.
As the table stands, the Wisconsin state flag is done. However, the final requirement for making the HTML version of this flag is the key. The top line of text says WISCONSIN. The image is the Wisconsin state crest. The bottom line of text says 1848. Since the final requirement of this table is to have the top line of text-- that is, "WISCONSIN"-- span all three columns, the HTML must be modified. Below is the modified table showing how "WISCONSIN" spans all three columns:
==========
<TABLE BORDER="0" CELLSPACING="0" BGCOLOR="#0000FF">
<!-- Blue background for flag -->
<TR><TD COLSPAN="3">
<DIV ALIGN="center">
<FONT FACE="Arial" COLOR="#FFFF00"><!-- Yellow text -->
<H1>WISCONSIN</H1>
</FONT>
</DIV>
</TD>
<!-- TD #2 would be here, but -->
<!-- it was accounted for earlier -->
<!-- TD #3 would be here, but -->
<!-- it was accounted for earlier -->
</TR>
<TR><TD><!-- empty cell with default blue background -->
</TD>
<TD><DIV ALIGN="center">
<FONT FACE="Arial" COLOR="#FFFF00"><!-- Yellow text -->
<!-- IMG tag can go here-- text is a placeholder -->
STATE<BR>CREST<BR>FOR<BR>WISCONSIN<BR>GOES<BR>HERE<BR>
<!-- -->
<H1>1848</H1>
</FONT>
</DIV>
</TD>
<TD><!-- empty cell with default blue background -->
</TD>
</TR>
</TABLE>
==========
Notice the extra row added for the express purpose of having "WISCONSIN" span all three columns. The TD tag needed to have the COLS attribute added to indicate that this column in this row has the equivalent of three columns of other rows in it. The attribute (CELLSPACING="0") needed to be added to make the divisions within the table invisible. To make sure the divisions are correct, change the "0" value to a "1" and verify that "WISCONSIN" occupies three columns and the second row has three table data cells.
The structure for this table is set. Any extra HTML attributes or tags which are added will be for formatting purposes (size, color, etc.). COLS is the attribute which had to be added to the TD tag so that several table data cells could be joined into one cell.
__________________________________________________
Joined Table Rows
HTML can be used to generate the Wisconsin state flag in a number of ways. This is possible because there is only one background color. In many cases, however, the appearance of the flag will dictate how HTML is used to generate the flag. One such flag belongs to the state of Texas. Texas is called "The Lone Star State," and the Texas flag has three colors and one star. From the appearance of the Texas flag (whose image can be seen at [http://members.tripod.com/~lizcal/]), the following requirements must be met:
• The flag will have two columns;
• The left column will contain a dark blue background and one large star;
• The right column will have a white row and a red row.
Below is the table in the initial stage:
==========
<TABLE BORDER="0" CELLSPACING="0" BGCOLOR="#FFFFFF">
<TR><TD BGCOLOR="#000080" VALIGN="center" ROWSPAN="2">
<DIV ALIGN="center">
<FONT FACE="Wingdings" COLOR="#FFFFFF" SIZE="7">
<!-- Wingdings font is used for the star character -->
<H1>«</H1>
<!-- If there is a problem here, use an image instead -->
</FONT>
</DIV>
</TD>
<TD BGCOLOR="#FFFFFF">
<!-- empty with navy blue background -->
</TD>
</TR>
<TR><TD><!-- empty cell with default white background-->
</TD>
<TD BGCOLOR="#FF0000">
<!-- empty cell with red background -->
</TD>
</TR>
</TABLE>
==========
As the table stands, there are 2 rows and 2 columns. The left column is all blue with a white star. The right column has a white row over a red row. However, the star is centered vertically within the blue background; having the star in one cell or another won't work given the layout of the Texas flag. The left column must appear as one unit-- the left column must span two rows.
The (ROWSPAN="2") attribute in the first TD tag tells the web browser that the table data cell will span two rows, and because it is specified here it is understood for the second row. The table below shows the revised table for the Texas flag:
==========
<TABLE BORDER="0" CELLSPACING="0" BGCOLOR="#FFFFFF">
<TR><TD BGCOLOR="#000080" VALIGN="center" ROWSPAN="2">
<DIV ALIGN="center">
<FONT FACE="Wingdings" COLOR="#FFFFFF" SIZE="7">
<!-- Wingdings font is used for the star character -->
<H1>«</H1><!-- White star on navy blue background -->
<!-- If there is a problem here, use an image instead -->
</FONT>
</DIV>
</TD>
<TD><!-- empty cell with default white background -->
</TD>
</TR>
<TR><!-- TD in navy blue would be here, but -->
<!-- it was accounted for earlier -->
<TD BGCOLOR="#FF0000">
<!-- empty cell with red background -->
</TD>
</TR>
</TABLE>
==========
Visually, joined columns or table data cells look the same as joined rows. However, writing the HTML code for joined columns or table data cells is easier than doing likewise for joined rows. The HTML for joined columns makes sense. When making tables which require the ROWSPAN attribute, it is best to consult an HTML reference book or HTML reference web site.
<I>(Speaking only for myself, though, the HTML for joined rows is harder; this is one reason I use the placeholder comments indicating the cell was accounted for earlier. The comment at that location satisfies my mind's need to know how the row is handled. Rows wrack my brain. Columns are easier than rows for me.)</I>
Like the table for the Wisconsin flag, the table for the Texas flag has the structure set. The Texas flag is far from ready, so additional HTML tags and attributes are needed for formatting purposes. However, the hard part os done-- rows and columns are already in place.
__________________________________________________
Colored Dividers
The HTML tag <HR> places a horizontal line which separates sections of content. The HR tag by itself places a horizontal line in the default manner defined by the web browser. However, the HR tag has a number of attributes which can change the appearance of the horizontal line. Here are some attributes used by the HR tag:
• ALIGN (left, center, or right);
• WIDTH (a percentage or a number of screen pixels);
• SIZE (the thickness of the horizontal line);
• COLOR (a 6-digit RGB hexadecimal color code);
• NOSHADE (it's presence turns off the default shading the web browser adds to the horizontal line).
These attributes provide greater control over how a horizontal line is rendered on screen. However, not all web browsers recognize these attributes for the HR tag, and the web browsers which recognize these attributes render the horizontal line differently. Normal lines of varying thickness are not an issue. However, it is possible to use the HR tag to "fudge" a vertical line. Microsoft web browsers allow this.
The following HR tag specified a red line width of 1 pixel and a thickness of 75 pixels:
<HR ALIGN="center" COLOR="#FF0000" SIZE="75" WIDTH="1" NOSHADE>
A short red vertical line is specified by the above HR tag, and in Microsoft web browsers the line looks cute. If a table has 3 columns and the first and third column contain text, then the second column can be used for this short red "horizontal" line (which appears vertical).
Earlier I said that Microsoft web browsers know how to render the horizontal line as intended. What I must add, though, is that Netscape web browsers would render the same line.... as a filled circle.
(a circle??)
Netscape web browsers (at least through Communicator 4.7 which I use sometimes) ignore the COLOR attribute, but that's no big deal. The two web browsers render the lines differently if the SIZE attribute is used. Netscape Communicator 4.7 gives horizontal lines rounded ends, and if the line is thin enough and tall enough the rounded ends meet and cause a circle to appear in place of a line.
A horizontal line which looks attractive in one web browser will look freakish in another web browser. If a vertical line needs to appear, then it is convenient to specify a background color in a TD tag before inserting an HR tag with (WIDTH="1") and (SIZE="1") attributes and color the same as the BGCOLOR of the TD tag. In this case, the HR tag (which looks like a point since both its WIDTH and SIZE attributes are set to 1 pixel each) acts like a placeholder for the TD tag-- the TD tag will do all the work and the web browsers will know how to handle the TD tag. Below is the table I used to test the table and vertical line:
<TABLE BGCOLOR="#C0C0C0">
<TR><TD BGCOLOR="#FF0000">
<H1>123</H1><H1>246</H1><H1>369</H1><H1>482</H1>
</TD>
<TD BGCOLOR="#FF0000">
<HR COLOR="#FF0000" SIZE="1" WIDTH="1" NOSHADE>
</TD>
<TD>
<H1>ABC</H1><H1>DEF</H1><H1>GHI</H1><H1>JKL</H1>
</TD>
</TR>
</TABLE>
The second TD tag should be enough to serve as a red vertical line, but the HR tag is included as a placeholder-- leaving out the HR tag lets the web browser avoid showing the red from the TD tag, and using characters such as periods or commas inside the table data cell will make the "line" look too thick. The dopey HR tag which looks like a point which has the same color as the background in the TD tag solves all of those problems.
(This trick is not standard, but it works for me.)
__________________________________________________
Colored Borders
If there is no BORDER attribute specified within the TABLE tag, then the web browser will assume there is a border which has a thickness of one pixel. In other words, the normal border will appear by default. However, the border can be colored by using the (BORDERCOLOR="#color-code") attribute. Netscape web browsers will make the border look the same as a regular border with color added. Microsoft web browsers, however, will make place a thin colored line surrounded by a thicker colored line around the table or cell.
Even though the colored border is handled differently by web browsers, if the look is not a concern, then the colored border can be enough. However, if the border has to look a specific way, then more complex measures need to be taken. For this, nothing less than a table within a table will do.
__________________________________________________
Nested Tables
Nested tables can be used to fulfill needs which are too cumbersome with other methods. Even if other methods are not cumbersome, nested tables are easier to handle mentally (especially with the flag examples I used earlier). A nested table is a table inside another table. That is it. If a table is to be nested inside another table, then it must be placed inside a TD tag since the TD tag is the table data cell tag and the data just happens to be another table.
Nested tables are no mystery, and many web sites use them for their own purposes. Make the tables separately, test each table as a separate entity, then copy the entire table and place it within the appropriate TD cell. This situation is common with colored borders.
Below is a set of nested tables which simulate colored borders:
==========
<table><tr><td bgcolor="#FF0000"><!-- red border -->
<table><tr><td bgcolor="#FFFFFF"><!-- white border -->
<table><tr><td bgcolor="#0000FF"><!-- blue border -->
<table><tr><td bgcolor="#F0F0F0"><!-- grey background for content -->
<FONT FACE="Arial,Helvetica,Verdana" COLOR="#000000"><BR>
<P>
<H1> Colored Border </H1>
</FONT>
</td></tr></table><!-- grey background for content -->
</td></tr></table><!-- blue border -->
</td></tr></table><!-- white border -->
</td></tr></table><!-- red border -->
==========
Each colored "border" has a the same thickness since nothing was specified. Depending on how the border should look this thickness may be enough. Anything else will require lengthy, tedious, and repetitious HTML coding. (By this point there is enough knowledge present in the HTML guides which can be used to experiment with special effects.)
__________________________________________________
This overview of advanced HTML tables is complete. Most HTML tables have a uniform, matrix structure. However, some tables use combined table data cells (or columns), and some tables use combined rows. Horizontal lines can be colored, and their attributes can be used to create a "vertical" line; however, since not all web browsers handle fake vertical lines well a workaround is to place an HR tag which specifies a point-size line having the same color as the background color of the TD tag. The BORDERCOLOR attribute is used by the TABLE tag to indicate the color of the table's border. While a number of web browsers can handle the BORDERCOLOR attribute for tables, the web browsers render the colored borders differently. To simulate a colored border which can be viewed with any graphical web browser a table is nested within another table's TD tag.
The HTML guides written to this point provide enough knowledge to create web pages. If a web page doesn't need a form for allowing data to be entered for processing, then these HTML guides are enough. If data needs to be entered and processed, though, then the data needs to be entered into a form. Forms work through a combination of HTML (for the form) and CGI scripting (for processing the data and producing output). CGI goes beyond HTML, so I will skip CGI. However, at the very least I can show how the form is created with HTML. HTML forms are covered in the next guide.
 |
|
|
|
|
|
|
Epinions.com ID:
neomartin
|
|
Location: New York, NY, USA
Reviews written: 117
Trusted by: 9 members
About Me:
Single Native New Yorker, 34, who returned to NYC after several years in NJ.
|
|
|
© 1999-2009 Shopping.com, Inc.