HTML Tables

Once upon a time, people used to control the layouts of their websites using HTML tables. Although this can still be done, you should actually use a combination of DIV and SPAN tags with CSS to accomplish this now.

Despite the outdated use for HTML tables, they still have a valid use in modern HTML, which was the original intended purpose for this tag: displaying tabular data.

A simple example of a table is a spreadsheet table that simply displays data in rows and columns. However, tables could also be complex HTML comparison tables for affiliate products or for administration systems. I use tables in the administration pages of many of my plugins to manage a list of saved ads, provide some information for each ad and then provide some action buttons to edit or delete each ad.

Even with the power of the DIV tag and CSS combined, there are still some things that you simply cannot do with it that can be done with tables. For example, if you have columns of information in a table, the table will automatically resize each column depending on the content in it and still keep all of the columns aligned. If you try to create a similar layout like this with the DIV tag and CSS, you will find that you simply must specify a predefined width for the columns if you want the columns to stay aligned (ie, DIVs aren't very good about stretching horizontally to hold their content if you want them to be positioned in a very specific manner).

Some of the above information may not seem important initially, but it would have saved me many wasted hours of coding if I had known that information upfront, so I wanted to begin the tables tutorial with this information.

Now moving on to how to code an HTML table.

First, to start a table, use the TABLE HTML opening and closing tag. All of the information in the table will go between these tags.

Next, each row of information in the table is created with TR opening and closing tags. All of the information for each of the columns within that row will be contained between these tags.

Finally, each column of information in each row is created with either TH or TD tags.

TH is used for header cells in the table. By default, the information in each header cell will be in bold text and centered in the column, although this can be altered by CSS.

TD is used for normal cells in the table. By default, the information in each of these cells will be in regular weight text (not bold) and left aligned in the column, although this can also be altered by CSS.

Here is a basic HTML table example:

TABLE, TR, TH and TD tags can also accept a number of tag attributes like WIDTH, HEIGHT, COLSPAN, and ROWSPAN.

WIDTH and HEIGHT attributes can have values that are specific numbers (in pixels) or percentages of the total width. If you specify a HEIGHT for any tag within a row, the entire row will be that height. The same applies with WIDTH and columns.

COLSPAN and ROWSPAN are used to define how many columns and/or rows a cell should take up in the table. Using these attributes, you can create more creative tables. Simply specify the value for one of these attributes as a number, which represents the number of rows/columns to occupy.

A new example is provided below incorporating these new attributes. This example also uses TH tags and TD tags: