Debugging Tables

Tables are often used to control the placement of text and other objects on a webpage. Mistakes in the table code is a very common reason for odd web page behavior. This information will help you look at your code and identify possible problems.

A table has three main parts. The <Table> tag identifies the beginning and end of each table. The <tr> (table row) tag identifies the beginning and end of each row. The <td> (table data) tag identifies an individual cell. Content, the stuff that shows on the web page must be inside a cell. If you want it to show properly on the web page it can't slip in between the table tag and the row tag, or between the row tag and the cell tag. It must be inside the cell tags. I like knowing that <td> stands for "table data" because it helps me remember that is where the content (data) goes.

To review: Do not put a link between a table code (<table ...) and the beginning of a row (<tr). Do not put a lnk between the start of a row (<tr) and the start of a cell (<td). Do not put it immediately after the end of a cell - a cell ends with </td>, or immediately after the end of a row - a row ends with </tr>. Do put it immediately after the beginning of a cell or immediately before the end of a cell. Eeek - let's illustrate.

This is the code for a table:

<table border="1" ><tr><td>stuff inside a cell</td><td>stuff inside another cell</td></tr></table>

It looks like this:

stuff inside a cell

stuff inside another cell

Let's put some numbers inside the code so we can talk about them.

<table border="1" >1<tr>2<td>3stuff inside a cell4</td>5<td>6stuff inside another cell7</td>8</tr>9</table>

1	between beginning of table and beginning of row	bad
2	between beginning of row and beginning of cell	bad
3	between beginning of cell and ending of cell	good
4	between beginning of cell and ending of cell	good
5	between ending of cell and beginning of cell	bad
6	between beginning of cell and ending of cell	good
7	between beginning of cell and ending of cell	good
8	between end of cell and end of row	bad
9	between end of row and end of tabel	bad

Things get a bit more complicated when tables are nested. There are lots of nested tables in your shop code. What does that look like?

<table border="1" ><tr><td><table border="1"><tr><td>one cell in a nested table</td><td>second cell in a nested table</td></tr><tr><td>third cell, new row, in a nested table</td><td>fourth cell in a nested table</td></tr></table>stuff inside a cell</td><td>stuff inside another cell</td></tr></table>

one cell in a nested table second cell in a nested table third cell, new row, in a nested table fourth cell in a nested table stuff inside a cell

stuff inside another cell

Copy the code to Notepad. Save it as "testtable.htm". Leave Notepad open. Use your file browser to find the file and drag it into the web browser so you can see the table for yourself. Now experiment. Add some stuff to the table coding, save and then refresh your browser. You can help yourself see tables by adding a border to them. Using different widths of borders will help you see which table is which, just change the number in border="1" to something else.

<table border="1" >1<tr>2<td>3<table>4<tr>5<td>6one cell in a nested table</td>7<td>second cell in a nested table</td>8</tr>9<tr>10<td>third cell, new row, in a nested table11</td>12<td>fourth cell in a nested table</td>13</tr>14</table>15stuff inside a cell</td>16<td>stuff inside another cell</td></tr></table>

<table border="1" >1<tr> between beginning of table and beginning of row bad

<tr>2<td> between beginning of row and beginning of cell bad

<td>3 after beginning of cell good. If you are immediately after the beginning of a cell you know you are inside the cell.

<table>4<tr> between beginning of table and beginning of row bad. Yes, you are inside a cell, but also stuck in the wrong place in a nested table.

<tr>5<td> same problem - stuck betwen the beginning of a row and the beginning of a cell. bad You want to be inside the cell.

<td>6 Good - being immediately after the beginning of a cell ensures you are inside that cell.

</td>7<td> Whoops bad stuck between the end of one cell and the beginning of the next.

</td>8</tr> Gettig it yet? What's wrong with this one? It is outside the cell - after the ending of a cell and before the ending of the row.

</tr>9<tr> Is this one any good? Nope, it is stuck between rows.

<tr>10<td> same problem as #2

11</td> And this is a good one. Why? Because since it is before the end of the cell, it must be inside the cell. (Assuming, of course, all parts of the code are where they are supposed to be).

12<td> We don't even need to see the code in front to see that this is in a bad location. Since it is before the beginning of the cell, it must be outside the cell.

13</tr> Same clue here. We know that a cell ends with </td> but here we are right next to the end of the row </tr>- so we can't be inside a properly formed cell.

14</table> Since every table has to close its last cell and last row. Our code should never right on the inside of the ending table code.

</table>15 Good this one isn't inside the table at all. Putting your code immediately before the beginning of a table, or immediately after the end of a table usually means you won't get stuck between the wrong kinds of table code.

</td>16 Bad I don't have to see what I'm between to know that if my code is outside the end of a table cell, then I can't be inside the cell.

Check out some of the great HTML tutorial resources.