Step-by-Step HTML: Creating Tables

Tables

Basic Anatomy of a Table in HTML

Some of you may have been wondering how these pages have been lining up some of the content, or how the lined grids were being produced. The answer is that this tutorial has been using tables to display the data. Although they sometimes appear daunting, tables are quite easy to manage as long as you keep things organized structurally in your source. The most important thing to remember is that if the first row of your table has six columns, keep six columns for every row. If you've eaten at a restaurant or checked the TV listings to see what was on, you've used a table. If you've ever created a checklist for yourself, you've created a table. A table is simply a spreadsheet used to cross-reference data, and if you view it as such, you're going to do well.

A table is a collection of rows, used to represent records of related information, and columns, used to represent fields of data you wish to track. A table can have headings for columns, so you have a quick reference to tell you what type of data to expect in each column. A cell is the intersection of a row and column; the value in the cell should be that record's value for the field represented by that column. Sometimes a caption can help to interpret a table, so you know the purpose. Sometimes a header or footnote will be added to further explain items. HTML tables are just the same as spreadsheets, and are as easy to manipulate.

Creating a Basic Table

Until you have more experience constructing tables, it is my recommendation that you get used to creating your and

tags first, then filling in the information between; this ensures that your table is a complete item. Trust me on this (I speak from experience): if you forget to create the closing tag, the rest of your page will give you a strong reminder that the rest of the page was being treated as part of the table.

Once the table has been established, you'll need a row. Between your open and closing table tags, place a tag to represent your row. You may want to create a closing tag for your row and fill in between them, but it's not necessary; the row will be automatically closed the next time a tag is encountered. For example purposes I'll include closing tags, but I'll color them differently so you know they're optional.

The row establishes the fact that you'll have a new record, but now you need the intersections of columns and rows, so create some cells. The tag is used for a cell (think of as Table Row and as Table Data). Again, a closing tag is not necessary as a new cell will be created when the next or tag is found, but it's not a bad habit to get into. Create three cells for starters. Now create a second row, just like the first. Your code should look like this:

��

Between the open and closing tags for the cells, enter some data. For example, put a team name in the first cell of each row, a stadim address in the second, and the stadium name in the third. My table looks like this:

Tampa Bay Buccaneers	One Buccaneer Place, Tampa, FL	Raymond James Stadium
San Francisco 49ers	3Com Park, San Francisco, CA	(Candlestick forever!!)

Well, that's a little bit better. But the text seems to just flow right from one cell to another, so all the text looks jumbled or weirdly spaced. And there's nothing in the table to tell you what each column is for; you only know because I specified in text what information would be in each column. Now we need to work on the presentation, and cleaning the appearance up.

Aesthetics and Table Display

It's time to give our viewers an idea of what each column will represent, so we're going to put some headers into our table. The tag (Table Header) works in much the same way as a tag, but it makes text bold and labels your columns. Put the table headers after your table declaration, but before your data rows; you'll need to create a row, then populate it with one header for each column in your table.

We were also having issues with separating the cells, where all the text was flowing together. We can solve this by placing borders around the cells of our table. In the

tag, there is an optional attribute called "border", which can be set to a non-negative numerical value. The border is 0 by default, and each digit makes it exponentially larger. I'll set mine to "2" for example purposes. Here is how my table looks now:

��

Team Name	Stadium Address	Stadium Name
Tampa Bay Buccaneers	One Buccaneer Place, Tampa, FL	Raymond James Stadium
San Francisco 49ers	3Com Park, San Francisco, CA	(Candlestick forever!!)

It displays like this:

Team Name	Stadium Address	Stadium Name
Tampa Bay Buccaneers	One Buccaneer Place, Tampa, FL	Raymond James Stadium
San Francisco 49ers	3Com Park, San Francisco, CA	(Candlestick forever!!)

The basic table is in place. We can take some time now to clean it up and make it pretty, but as it is it could be used as a functional table. Now it's time to dig into the meat of the tags used in conjunction with tables, and to look at more advanced presentation techniques. It's a work-in-progress, so there's no active link for now (sorry!).