Tables are one of the cornerstones of HTML. They're used to arrange data (text, graphics, forms, or anything else) into boxes (cells) of various sizes in rows and columns. Simple as that. A visible table looks like this:
But tables take on a number of sizes and disguises. Tables are often invisible on a page, silently acting as an aid for document layout, accomodating a grid of "data rectangles" that combines text and graphics.
Tables are the reason most web sites have boxy designs. It's easy to make boxes of text and color, graphical boxes, search boxes, and anything else rectangular. It's difficult to make anything curvy on the web, because anything with curves still has to fit into a rectangular format in the end.Table Basics
First of all, to give you an idea of how tables are so frequently used without being visible, I took Yahoo's front page and revealed the borders of their tables. This should help you see the "data rectangles" that I mentioned above. Here's a side by side comparison:
As you can tell from the Yahoo! on the right, they have arranged their front page inside table cells of different sizes. Each cell contains a bit of text or a graphic and has a few attributes. To some extent, you can adjust any cell's size, the arrangement of cells on a page, the background color of a cell, the spacing between cells, the border around a cell (if any), and a number of other characteristics. That's why tables are one of the most powerful constructs for web design.
And basic tables are easy to build. The <TABLE> and </TABLE> tags surround the table itself and <TR> and </TR> ("Table Row") surround rows of the table. Every row contains one or more columns, and each column is surrounded by <TD> and </TD> (TD stands for "Table Data", but don't ask me why they didn't use TC for "Table Column"). Between <TD> and </TD>, you can put actual data for a cell, which could include any HTML code, text, graphics, or another table. So for a table like this:
|Cell 1||Cell 2|
|Cell 3||Cell 4|
The code looks like this:
<TABLE border=1> <TR> <TD>Cell 1</TD> <TD>Cell 2</TD> </TR> <TR> <TD>Cell 3</TD> <TD>Cell 4</TD> </TR> </TABLE>
The border=1 option reveals the grid around each cell of the table. The above table has 2 rows, and each row has 2 columns. Simple as that.Your first practical table: an image with a caption
By now you should know how to put images on your page with the <IMG> tag, and you've probably done it a number of times. You may have even used the align="left" or align="right" options of <IMG> to make text wrap around an image, like the one on the left (for which I used align=left).
Now lets say you want a caption below one of your images, and you want to wrap the "main" text of your page around the image and the caption. This seems like a simple thing to do, but it requires the use of tables.
So here's the image, with caption, and the code for the table. Ignore all the options for a minute, and you'll see the same general structure for a table.
State Fair Pony
<TABLE border=0 align="left" cellpadding="0" cellspacing="15"> <TR> <TD> <A href="pony-big.jpg"> <IMG src="pony-small.jpg" width="200" height="133"> </A><BR clear="all"> State Fair Pony </TD> </TR> </TABLE>
In this table, we only have one row and one column. The column contains the image (pony-small.jpg), a line break (<BR clear="all">) and the caption (State Fair Pony).
Now let's look at the options for a second. As you may have guessed, the border=0 option on <TABLE> makes the table borders invisible. cellpadding and cellspacing refer to the amount of space surrounding each cell in the table, and align="left" causes the table to stick to the left side of the browser window while text flows around it on the right. That covers all the options for this table, so lets get into some more complex situations.More complex situations
Here's a more interesting table:
As you can see, the borders visible for this table. Lets look at its HTML code:
<DIV align="center"> <TABLE border="5" width="90%" cellpadding="3" cellspacing="4"> <TR> <TD colspan="6" bgcolor="#cc0000"> <B><FONT color="white">Site Menu</FONT></B> </TD> </TR> <TR> <TD align="center" bgcolor="#FFCC99"> <A href=""><FONT color="#cc0000">News</FONT></A> </TD> <TD align="center" bgcolor="#FFCC99"> <A href=""><FONT color="#cc0000">Communications</FONT></A> </TD> <TD align="center" bgcolor="#FFCC99"> <A href=""><FONT color="#cc0000">Entertainment</FONT></A> </TD> <TD align="center" bgcolor="#FFCC99"> <A href=""><FONT color="#cc0000">Perspectives</FONT></A> </TD> <TD align="center" bgcolor="#FFCC99"> <A href=""><FONT color="#cc0000">Downloads</FONT></A> </TD> <TD align="center" bgcolor="#FFCC99"> <A href=""><FONT color="#cc0000">Auctions</FONT></A> </TD> </TR> </TABLE> </DIV>
It may be harder to discern where the table cells are in the code above, but they're all there. And some of them use options. The <table> has a width="90%" specified, which means the table will occupy 90% of the browser's width. If you widen the browser right now, the table will widen accordingly. I've also put <DIV align="center"> around the entire table, so it will stay horizontally centered in the browser. By the way, the table width can also be specified in pixels, so width=640 would be a 640 pixel wide table.
In the first cell (TD) of the first row (TR), where the Site Menu header is, you'll notice the colspan=6 option. This option denotes a cell that spans more than one column, so that in the second row (where the menu options are), each of the six menu options can occupy a cell that sits beneath the top row's only cell. Without colspan=6, you get an entirely different table:
There is also a rowspan option, which causes a cell to span more than one row in a table. It goes inside the <td> tag, just like colspan.
For each cell in my example table, I've specified a bgcolor, a background color for the cell. In addition to background colors, most browsers also support cells with background graphics, which are specified with background="filename" option (they tile--just like background graphics used in the <body> tag).
The only other option I've used is the align="center" for each cell in the second row. The result is apparent--the text is centered within the cell.
That's it. You've learned the table basics, and now you can try making a few on your own...Design Tip: Tables don't need those fat borders
Now lets look at a frequently used technique for beautifying tables. If you've read Invisioning Information, you might laugh at my example from above, with its fat 3D borders and "designed" look:
The 3D grid dominates and distracts. It's big and ugly. It's running the show. There should be no visual competition between the grid and the text within, but 3D table grids will always present a distraction. I think they should never be used.
Lets tone it down a bit:
This grid recedes, and actual menu options have a chance to come forward. This simple change keeps the bold design (with its use of color) while letting the most relevant information (the menu options) stand out. It's fine to stylize your tables, as long as the contents don't drown!
Here's another example:
It's the same idea applied to another situation, and the difference is pretty dramatic. The table on the right clearly emphasizes the content, while the table on the left buries it in a grid. So now that you understand the aesthetic motivation for simpler borders, I'll show you how to do it on your own site.
How to make nice and simple table borders
As usual, the actual technique is more complicated than it should be. In fact, subtle 2D borders are twice as difficult to make as ugly 3D borders. That's probably why most people use 3D borders in the first place. Here's the secret of the 2D borders:
The key is, you actually have to use two tables, a table inside of another table. The outer table is simple, with only a black background color and one table cell, which contains the inner table. The inner table (known as a "nested table") contains the actual table data, with background colors for each individual cell but no background color for the table as a whole. The cellspacing option of the inner table allows the background color of the outer table to seep through the cracks between cells. Confused yet? Lets look at the code behind it, and maybe it will make more sense...
The example's code:
Here's the inner table without any border, just the data in their cells:
<table border=0 cellspacing=1 cellpadding=3> <tr> <td colspan=2 bgcolor="#ff0000">Cell 1</td> </tr> <tr> <td bgcolor="#cccccc">Cell 2</td> <td bgcolor="#cccccc">Cell 3</td> </tr> </table>
Notice how the cellspacing option specifies the number of pixels between the cells of the table, while the cellpadding option specifics the number of pixels between the text and the border of a cell. That's why there are two separate options with two confusing names. Now I'll add the outer table around the inner table to finish the job:
<table border=0 cellspacing=0 cellpadding=0 bgcolor="#333333"> <tr> <td> <table border=0 cellspacing=1 cellpadding=3> <tr> <td colspan=2 bgcolor="#ff0000">Cell 1</td> </tr> <tr> <td bgcolor="#cccccc">Cell 2</td> <td bgcolor="#cccccc">Cell 3</td> </tr> </table> </td> </tr> </table>
That's it. If you copy my code from above and try changing the cellspacing option on the inner table, you'll notice that it changes the thickness of the 2D borders. The border width cannot be adjusted for individual cells, only for the table as a whole (although you could fudge things with a clever use of graphics, but that's another story...). I used cellspacing=1 in this example for a one pixel table cell border.Your assignment:
In many cases, entire web pages consist of one big table governing the design, and a few smaller nested tables to layout specific areas of the page. This is especially true on front pages of big web sites, where lots of information needs to be separated and organized. So here's an exercise for you: Go download the HTML from any page that uses tables extensively, and try to figure out how the tables aid layout. Turn the 3D borders on for every table, so you can see the underlying structure. Also, don't forget to experiment with the options! Good luck.