Article - Using Tables In HTML

Host your site on our high performance virtual domain and non-domain accounts.

Let Netpanel design your web site the way you want it.

Submit your web site to 15 major search engines quickly and easily at no charge.

Download some of our free 32-bit software programs for Windows.

Find every news story, article, and special feature ever published on Netpanel.

Take a moment to fill out our quick survey, and earn a free utility in the process.

Using tables in HTML
Published on 7/24/97

Tables can be very useful when applied to Internet web pages. You've probably seen many examples of them already. If you're a web designer, chances are you've used them many times before. In fact, every page on Netpanel is comprised of multi-celled tables.

Tables allow for superior alignment and positioning of text and graphics. They're also an easy way to organize large amounts of data. If you're new to creating tables, read on further as we show you how it's done.

First of all, every table needs to be surrounded by the <TABLE></TABLE> element. This element can be modified using various attributes: ALIGN, which sets the table's alignment on the page; BACKGROUND, which sets the background image to be used in the table; BGCOLOR, which sets the table's background color; BORDER, which sets the thickness of the table's borders; CELLPADDING, which sets the amount of empty space around the text/graphics in a single cell; CELLSPACING, which sets the amount of space between cells; and WIDTH, which sets the width of the table as either a percentage of the browser window, or as a number in pixels. These are the most commonly used attributes. There are others, but you won't likely ever use them.

Before we demonstrate what we've covered to this point, we also need to explain the use of the <TR></TR> and <TD></TD> elements. These two sets of tags are what actually create the cells in a table. More precisely, the <TR></TR> element creates a row in the table, and the <TD></TD> element creates a cell within that row. Both elements can be modified using many of the same attributes as the <TABLE> tag: ALIGN, BACKGROUND, and BGCOLOR. Additionally, the VALIGN attribute can be used to set the vertical positioning in the cell.

Now we will demonstrate actual uses of the aforementioned tags and attributes. The following examples will show the HTML code for the table and then the resulting table itself:

Table #1:

<TABLE ALIGN="CENTER" BORDER="1" CELLPADDING="2" CELLSPACING="2"> <TR> <TD ALIGN="CENTER" VALIGN="MIDDLE"> <P>Cell 1</P> </TD> <TD ALIGN="CENTER" VALIGN="MIDDLE"> <P>Cell 2</P> </TD> </TR> </TABLE>

Cell 1 Cell 2

Table #2:

<TABLE ALIGN="CENTER" BORDER="1" CELLPADDING="8" CELLSPACING="0"> <TR> <TD ALIGN="CENTER" VALIGN="MIDDLE" BGCOLOR="#F2C9C9"> <P>Item</P> </TD> <TD ALIGN="CENTER" VALIGN="MIDDLE" BGCOLOR="#F2C9C9"> <P>Price</P> </TD> <TD ALIGN="CENTER" VALIGN="MIDDLE" BGCOLOR="#F2C9C9"> <P>Quantity</P> </TD> <TD ALIGN="CENTER" VALIGN="MIDDLE" BGCOLOR="#F2C9C9"> <P>Total</P> </TD> </TR> <TR> <TD ALIGN="CENTER" VALIGN="MIDDLE"> <P>Car</P> </TD> <TD ALIGN="CENTER" VALIGN="MIDDLE"> <P>$15,000</P> </TD> <TD ALIGN="CENTER" VALIGN="MIDDLE"> <P>2</P> </TD> <TD ALIGN="CENTER" VALIGN="MIDDLE" BACKGROUND="../../images/dollar.gif"> <P>$30,000</P> </TD> </TR> <TR> <TD ALIGN="CENTER" VALIGN="MIDDLE"> <P>Pencil</P> </TD> <TD ALIGN="CENTER" VALIGN="MIDDLE"> <P>$0.20</P> </TD> <TD ALIGN="CENTER" VALIGN="MIDDLE"> <P>105</P> </TD> <TD ALIGN="CENTER" VALIGN="MIDDLE" BACKGROUND="../../images/dollar.gif"> <P>$21.00</P> </TD> </TR> </TABLE>

Item Price Quantity Total

Car $15,000 2 $30,000

Pencil $0.20 105 $21.00

Another useful application of tables is to align images and graphics. In Netpanel's case, we use a table to position the multiple images that make up the navigation bar at the top of every page. Tables also come in handy if you are displaying a very large graphic file. You can break the image up into smaller pieces, and use a table to reassemble them. This is demonstrated on a smaller scale below (if you use Internet Explorer, try holding the mouse over each section of the graphic):

This table shows four separate image files aligned together in a table.

This table shows the same images without the border.

As you have seen here, tables are very versatile and useful. If the concepts presented in this article seem a bit confusing at first, look over the sample code again. It shouldn't be too hard to figure out what's going on.