Using Tables in HTML

Tables are the backbone of HTML based web sites. The reason that sites appear in the fashion they do is tables. Of course, I'm sure this makes precious little sense to you right now, but that's all right. By the time you finish this tutorial you'll have a better understanding of tables. The rest will be explained in tutorials to come.

Tables are comprised of two elements: the table rows which run horizontally and the table columns which run vertically. Both are used together to create a table. I've written code for a table two elements wide (or two rows) and two elements deep (two columns) in the text area below.

An Explanation of the HTML

Placement : Tables may be placed anywhere within the body of an HTML document. Code should be placed exactly where you'd like the table to appear.

The Format : All tables begin with the table tag (in <>). The TR (in <>) represents a row (horizontal) which must be made up of one or more columns (vertical), designated by the various TD (in <>) tags. These tags tell your visitors' computers to include a table whose rows are made up of the number of columns you set. After the TD (in <>) tags comes the content of that particular cell, ie. text content. Each column must be closed with a /td (in <>) tag. Once you've added the desired number of columns to a given row, the row must let your visitors' computers know it is completed through the presence of a /tr (in <>) tag. Repeat these instructions for however many rows you'd like in your table. Finally, let the computer know the table is completed by including a /table (in <>) tag.

The Table Tags : I'm sure the whole concept of tables still seems very abstract. Let's take a look at what the table from the textarea above would look like on a website (note: I'm going to place the table on a new line and center it. This code is seperate from the table code itself, but you can accomplish this effect using what you've learned in previous tutorials about line breaks and centering.

The above table contains two rows (as set by the presence of two tr tags (in <>), each with three columns (set by the presence of three td - in <> tags in each row). Each of the rows contains a text element, the top three columns are the three main characters from the 1978 Dawn of the Dead; the bottom three columns are the three main characters from the 2004 Dawn of the Dead. Your browser has added a border to the table automatically. The table has also made the columns only as long as they must be to enclose the elements they contain.

An Explanation of the HTML

Images in Tables : I added an image to the table coded in the text area above by including the image code we discussed earlier (and an alternative text element for good measure!) within the table column designations. Note that this table has just two rows and one column, basically a picture and a caption.

The image appears in the first row and a caption in the next.

Suppose we wanted to format the table so that the caption would be in bold and centered. HTML allows us to do that easily as well.

An Explanation of the HTML

Formatting in Tables : The formatting we learned in an earlier tutorial is added to the text element in the table's second row.

Our caption is now centered and bold faced.

I've used the center tag in my examples to center a table on the page. There is another method which allows us to better align tables in HTML.

An Explanation of the HTML

Aligning Tables : The align tag, added to the table tag with a space after the word table, the command align, an equals sign, quotation mark and then a value of either left, right, or center, quotation mark, > tells our visitors computer to align the table to that portion of the screen.

Notice how nothing visually changes about our tables, other than the alignment of the table itself. This function is especially useful in designing a navigation (or tool) bar.