If you've spent just five minutes looking at the World Wide Web you've seen tables in action. Tables are intended to organize data - like a spreadsheet organizes data - but are most commonly used to specify the layout of a Web page. The basic of tables are deceptively easy, but, as you will see, a lot can go wrong, or at least not the way you expected. I'm going to spend the next few months deconstructing tables. This month, we'll address the lines. From a design standpoint, I find lines useful if I am presenting tightly packed tabular data: a phone list, for example. Lines help keep connected information together. Generally, however, lines look fussy and if you are using tables for layout they are better omitted. The tag pair for a table is <TABLE> </TABLE>. This in and of itself doesn't do anything except alert the Web browser to render everything between the tags in a tabular format. Next come <TR></TR>. This indicates a table ROW. Finally, there will be <TD></TD>. This is table DATA. Anything placed within this tag is what will show up on the screen. Figure 1 shows a typical use for a table. Here is a slightly stripped down coding for this table: <TABLE border="4"> <TR> <TD>ESCHER EYE (1946)</TD> <TD></TD> </TR> <TR> <TD>< img src="eschereye.jpg"></font></TD> <TD>In this piece, Maurits Cornelis Escher (Dutch, 1898-1972) has drawn his own eye, which was greatly magnified by a convex shaving mirror. In the center of his pupil is, Escher teases, the one who watches us all.></TD> </TR> </TABLE> Let's deconstruct it. I've added one parameter to the table tag - border - and specified that it be 4 pixels wide. This is the big black border around the outside of the table, properly called the external frame. The interior lines (technically called vertical and horizontal rules) are the default: they show up automatically if I specify a border size. Most of the tables that are used for layout do not use a border tag at all: the table acts as an invisible grid. If I were to omit the border parameter all together - <TABLE> - or to specify that the border should be zero - <TABLE border="0"> - all of the lines will be removed. If I were to specify <TABLE border="NONE"> the exterior frame will be eliminated but all of the interior rules will remain. Here are some parameters that will help you determine where the lines appear: FRAME: This attribute specifies which sides of the frame surrounding a table will be visible. The format is <TABLE frame="vsides">; figure 2 shows the results of using the TABLE frame="vsides"> variable. The possible values are: void: No sides. This is the default value. above: The top side only. below: The bottom side only. hsides: The top and bottom sides only. vsides: The right and left sides only. lhs: The left-hand side only. rhs: The right-hand side only. box: All four sides. border: All four sides. RULE: This attribute specifies which rules will appear between cells within a table. The format is <TABLE rules="rows">; figure 3 shows the results of using the TABLE frame="rows"> variable. The ossible values are: none: No rules. This is the default value. groups: Rules will appear between row groups. rows: Rules will appear between rows only. cols: Rules will appear between columns only. all: Rules will appear between all rows and columns. groups: Rules will appear between row groups  (we'll discuss groups at a later time!) You'll notice that the exterior frame around figure 1, the Escher Eye, is flat and black while the exterior frame around figure 2 has a 3D, shaded look. I find the 3D effect old-fashioned and unappealing, but this is, alas, the default. Here's a work-around: <table border="5" bordercolor="#000000" bordercolorlight="#000000" bordercolordark="#000000"> If you deconstruct how the external frame is made, it is actually three shades of gray; a base color, a lighter color and a darker color. The coding above makes all of the shades the same color: black. This eliminates the 3D effect. I hear your brain cells clicking. If you can make the border all black, could you make it red or blue? Of course you can! Just exchange the RGB code for black (000000) with the code for the color of your choice. Red would be FF0000. Chartruese would be 7FFF00. Get a complete list of the color codes. You can use these same variables within the <TR> and the <TD> tags, which will change the colors of the vertical and horizontal rules. Look back at figure 1 and review the code for this table. You'll notice in the first table row specified in the first <TD> that COLSPAN="2". This table has two columns and two rows. By specifying that the first  data element ,<TD>, in the first row, <TR>, spans two columns, I eliminate the horizontal rule that would normally appear in that top row. Figure 4 gives you an idea what it would look like without this refinement. Combining table rows (it works with columns too!) has additional advantages: I could center the "Escher Eye" text over both columns, for example. Here's your assignment for this month. Copy the code below into Notepad: <table border="5"> <TR> <TD><font size="+3">ONE</font></TD> <TD><font size="+3">TWO</font></TD> </TR> <TR> <TD><font size="+3">THREE</font></TD> <TD><font size="+3">FOUR</font></TD> </TR> </TABLE> I made the font sizes bigger so that you would have a table big enough to see the results. Next, play around with EVERY parameter. Eliminate interior rules. Change the colors. Expand the size. After a half hour you'll know more about lines that half of the world's Webmasters. Tables are key to attractive Web design. In succeeding months we'll learn how to control the table size, about cell padding and cell spacing, how to nest tables, the secret of the transparent pixel, how to add color to tables: in fact, we'll turn into the Lazy Tablemaster for a while.