Tables Revisited I'm going to try to present the concept of tables in a little clearer fashion. Tables are used in HTML to organize info on a page. Tables are made up of columns and rows. A basic one row, one column table script looks like this: <TABLE border=1> --this sets up the table <TR> --this defines a row with one column in it <TD></TD> -- this defines the data that goes into that cell </TR> </TABLE> And it creates table that looks like this: A good example of a one row, one column table. This kind of basic table could hold a title with a border or a single graphic. The cell stretches to accomodate whatever it has in it. Here's the script again <TABLE border=1> <TR> <TD> A good example of a one row, one column table. This kind of basic table could hold a title with a border or a single graphic. The cell stretches to accomodate whatever it has in it. </TD> </TR> </TABLE> Here's the same thing but with a graphic inserted. First the sample script: <TABLE border=1> <TR> <TD> <IMG SRC="crst.gif" WIDTH="90" HEIGHT="80"> </TD> </TR> </TABLE> And now the actual table: Note that the <TABLE> tag has an attribute "border=1". This turns a border on. Also note that the border has a 3D look to it. The larger the number in this attribute the wider the border. There are other attributes that can be placed in the <TABLE> tag. You can define the width of the table in terms of a pixel width (real width) or a dynamic width (defined in percentages). If you look at the script for this page you will see that whole page is set in a three column table defined in percentages; two columns on the outside to give a wider margin with a centre column defining the body of the text. EXAMPLE: WIDTH=450 (PIXELS) or WIDTH=100% The advantage of doing the definitions dynamically is that the tables will stretch and shrink to accomodate different sized screens. Two other attributes assigned to the <TABLE> tag are CELLSPACING and CELLPADDING. CELLSPACING adjusts the width between cells and CELLPADDING offsets the text from the edge of the cell. Let's try our table with these new attributes. To illustrate the new attributes I'm going to create a two column table and the script looks like this: <table border = 1 width=100% cellspacing=0 cellpadding=10> <tr> <td width=50%> Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. </TD> <td width=50%> Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. </TD> </TR> </TABLE> And the final table looks like this Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. You can see how the text is set away from the border by 10 pixels. Now let's have the same script combining a graphic and some text. First the sample script: <table border = 1 width=100% cellspacing=0 cellpadding=10> <tr> <td width=50%> <IMG SRC="crst.gif" WIDTH="90" HEIGHT="80"> </TD> <td width=50%> Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. <P>Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. </TD> </TR> </TABLE> And now the resulting table: Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. In this example I put more text in the second column. This now gives us a layout dilemma. The text cell expanded to accomodate the extra text but it left the graphic floating in a larger cell. We have to place the graphic in a much more pleasing manner. The attributes that handle that go into the <TD> tag and are ALIGN and VALIGN. ALIGN places content s in the cell LEFT, CENTER (or MIDDLE), and RIGHT. The VALIGN attributes are TOP, CENTER (or MIDDLE) and BOTTOM. If I wanted to place the graphic right next to the text at the top right corner of the cell, my attributes would be <TD align=right valign=top> as you can see in the script: <table border = 1 width=100% cellspacing=0 cellpadding=10> <tr> <TD width=50% align=right valign=top> ******* <IMG SRC="crst.gif" WIDTH="90" HEIGHT="80"> </TD> <td width=50%> Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. <P>Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. </TD> </TR> </TABLE> And on screen: Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Sample text. More sample text. Another attribute that can be placed in there is <BGCOLOR="#hexcode">. I've used that in showing my sample scripts. They have a white background against the colored background of my page. It's a way to have your table information stand out but it should be used judiciously. You can now take these basic table scripts and add them together to make multi-columned, multi-rowed tables. For example a three row, three column table. First the script: <table border = 1 width=100% cellspacing=0 cellpadding=10> <TR> <TD width=33%>Sample text. More sample text. Sample text. More sample text. Sample text.</TD> <TD width=34%>Sample text. More sample text. Sample text. More sample text. Sample text.</TD> <TD width=33%>Sample text. More sample text. Sample text. More sample text. Sample text.</TD> </TR> <TR> <TD width=33%>Sample text. More sample text. Sample text. More sample text. Sample text.</TD> <TD width=34%>Sample text. More sample text. Sample text. More sample text. Sample text.</TD> <TD width=33%>Sample text. More sample text. Sample text. More sample text. Sample text.</TD> </TR> <TR> <TD width=33%>Sample text. More sample text. Sample text. More sample text. Sample text.</TD> <TD width=34%>Sample text. More sample text. Sample text. More sample text. Sample text.</TD> <TD width=33%>Sample text. More sample text. Sample text. More sample text. Sample text.</TD> </TR> </TABLE> And the screen version: Sample text. More sample text. Sample text. More sample text. Sample text. Sample text. More sample text. Sample text. More sample text. Sample text. Sample text. More sample text. Sample text. More sample text. Sample text. Sample text. More sample text. Sample text. More sample text. Sample text. Sample text. More sample text. Sample text. More sample text. Sample text. Sample text. More sample text. Sample text. More sample text. Sample text. Sample text. More sample text. Sample text. More sample text. Sample text. Sample text. More sample text. Sample text. More sample text. Sample text. Sample text. More sample text. Sample text. More sample text. Sample text. Or, to have the same thing with the borders turned off... Sample text. More sample text. Sample text. More sample text. Sample text. Sample text. More sample text. Sample text. More sample text. Sample text. Sample text. More sample text. Sample text. More sample text. Sample text. Sample text. More sample text. Sample text. More sample text. Sample text. Sample text. More sample text. Sample text. More sample text. Sample text. Sample text. More sample text. Sample text. More sample text. Sample text. Sample text. More sample text. Sample text. More sample text. Sample text. Sample text. More sample text. Sample text. More sample text. Sample text. Sample text. More sample text. Sample text. More sample text. Sample text. This has been a basic tables primer. Now on to more complicated tables stuff.