Using Tables

Should You Use Tables?

The formatting of information should be separate from the information. Using tables to format your web pages contradicts this philosiphy. Sometimes though, tables are a great solution. They are definitely easier to implement than CSS for certain layouts.

If you are not all that familiar with CSS, tables may be a great way to lay out your first set of pages to achieve a great layout. As CSS matures though, tables are certain to become a thing of the past.

Making a Table

If you have decided to create a table, there is basic syntax you will follow to do so. First you will use a <table> tag. In this tag, you will define the size of the table(defined in the following section), padding and spacing of cells, as well as various other attributes that you may need to define the overall structure of the table.

Inside the opening and closing <table> tags, you will create columns and rows. Columns run vertically and rows run horizontally along the table. Rows are defined using the <tr> tag and each column cell is defined using a <td> tag. You define an entire row using a <tr> tag, but define columns through the <td> tags defined in multiple rows. This is particularly important to understand because you have to declare the same number of <td>'s within each <tr> tag to create a column.

Here is an example of a typical table with three rows and four columns. The beginning and ending of each row is highlighted:

View this table to see how the columns work out from this code. Alternatively, Use the form below to create a table with the number of rows and columns you would like to see. Right click in the new window and view the source of the page to see how the code would be written.

Limit rows and columns to 20 or less.

Rows Columns

Fixed vs. Relative Sizing

There are two methods to creating a table size. One is using fixed values and the other is using relative values.

Fixed values are pretty much as the wording implies, values set at a fixed number like 700px. The px stands for pixels. Some browsers render a pixel differentally and how much space a pixel will take up on a screen may vary depending on the user's screen resolution. One thing you can be sure of though is that the pixels will be uniformally rendered throughout your page. For example, 20 pixels from the left edge of the page at the top will be the same distance as 20 pixels from the left edge of the page at the bottom.

Armed with this knowledge, you can lay out a table based on pixels knowing everything will fit together properly. For example, if you have an 100 pixel wide image that you want to fit into a table that is 100 pixels wide, it will fit perfectly unless you gave cellpadding or cellspacing to the table.

Relative values are figured out by the browser when the page is loaded. If you give a table a width value of 80%, then the table will take up 80% of the width of the viewing area of the users browser. This holds true if a user resizes their browser window. For example, if a user has a browser window open at 700 pixels of veiwing width and then expands the window to 1000 pixels of viewing width, the browser would render the table at 560 pixels wide originally and then rerender the table to 800 pixels wide after the expansion.

If that wasn't confusing enough, you can apply width and height values to cells as well and mix relative sizing with fixed sizing. You can declare a table to be 300 pixels(300px) wide and then declare three column cell widths' to be 30%, 40%, and 30%. The widths will be calculate by the user's browser. You may get some strange results with this type of approach but there are other times when combining fixed values with relative values makes a lot of sense. There are too many possible combinations to delve into in this topic, but feel free to experiment with different combinations.

<tr> tags do not have a height or width attribute in them, so don't try to assign them. Also, if you need to declare a column width, you can declare it in the first <td> tag of a column and it will cascade to the rest of the cells. This holds true of the height attribute for a row too; simply declare a height for the first cell in a row and that height will cascade to the rest of the cells. Here is an examle:

The first block of cells declares Column 1's width to be 200 pixels wide, so we don't need to declare Column 1's width in the next block of cells. Similarly, the first cell in the first column declares the height of that cell to be 50 pixels high. The height of 50 pixels will cascade through the rest of the cells in that row so the row becomes 50 pixels high. You will notice in the second block of cells that there is a height attribute for the first cell. Like the first block of cells, this becomes the height of the second row.

How to Span Images Across Rows and Columns

Have you seen images, text, and form elements that don't look like they could possibly be arranged in a table? Perhaps you have seen a big curve in a graphic that looks as though it is covering two or more rows or columns. The secret to that is slicing. Basically, you cut up an image into pieces and stick those pieces into cells that are the same width and height(in pixels). Here is an image in a table that is 100 pixels wide and 100 pixels high with two rows and two columns:

Here is the same image and table with borders shown so you can see what is happenning:

rowspan and colspan Attributes

Want a header in a table? Want a sidebar description for elements? Want a footer for your table? Use the rowspan or colspan attributes. Both colspan and rowspan are attributes of cells and are used to "merge" cells together. They are declared in the <td> tag like so: <td colspan="2" rowspan="2">Some Text</td>. colspan is used to merge two or more cells in a row and rowspan is used to merge two or more cells in a column. It sounds wrong until you think of it like this: colspan says I want this particular cell to span across this many columns and rowspan says I want this cell to span across this many rows.

The best way to figure out where to put which attribute is to sketch out your table on paper with ALL the cells and then shade in which cells you want to merge. If you've managed to wipe out two or more rows and don't need the seperation of rows, get rid of the extra rows. Also, it is important to note that the merged cells have to be in a square or a rectangle. You cannot merge one cell onto a group of cells unless that group consists of a group of one row or column and you are adding a cell in the row or column respectively. Here is an example.

OK:

	group 2	group 2
group 1	group 2	group 2
group 1	cell to be added to group 2	cell to be added to group 2
group 1
cell to be added to group 1

Not OK:

	group 2	group 2
group 1	group 2	group 2
group 1		cell to be added to group 2
group 1	cell to be added to group 1

 

Then you need to write out the code for the table with ALL the cells or use the table tool under Making a Table to generate the code. Until you're an HTML ace, it is important that you make a table with ALL the cells first. You may want to number the cells in the code with their corresponding column numbers to emulate the code you will get with the table generator above. This will help you keep track of the cells you are messing with in the next step.

OK, next step is deciding if your shaded areas span across rows(horizontal), columns(vertical), or both. Find the upper left cell of each group of shaded cells on your paper and put an x through it. Now find the corresponding <td> tags for those cells in your code. Write in the colspan= and/or rowspan= attributes in those cells after you count how many rows and/or columns that those cells span. Once you have all your colspan and rowspan attributes in place, delete all the <td></td> sets in your code that correspond to the shaded cells on your sketch without x's. DON'T delete the <td></td> sets that have the x's through them, it would be a bit counterproductive. This is where numbering each cell with a column number helps. Once you start deleting cells in a big table, it gets a bit confusing as to which cells correspond to the ones on your paper.

You're done. You should have a table with correct spanning. If it didn't work, you didn't follow the directions.