UNDERSTANDING TABLE STRUCTURE

In terms you can relate to


There is a hierarchy in tables. All data must be in a Table Date cell (<td>). Table Data cells (<td>) must be in a Table Row (<tr>). Table Rows must be in the Table. They all have opening and closing tag so when you open a table with <table>, then you must follow it with a Table Row. Since the Row can have any number of cells in it, it has to come first. So within the Row, you then have Table Data cells or you have a Table Header (<th>).

When you've added the data to any Table Data cell, then you close the cell with </td> and open the next one with <td> "data" </td> and so on. When you want to go down to the next row, then you close the Row with </tr> and open the next one with <tr> and enter you <td> cells for that row. When you've added the TD cells to that row, you then close the Row with </tr> and when you're done with the table you close the table with </table>.

It's just like putting boxes into rows, and then the row or rows of boxes into a crate. All of your data has to be in a box (<td>). You can't put a row of boxes into a single box (<td><tr>), you must put the boxes into a row (<tr><td>) When each box is filled you have to put the lid on it (</td>). When boxes are filled, the are put in the row one at a time, then the row is strapped together with a </tr> and a new row is started with <tr>.

A simple table may have only one box in the row, and only one row in the crate so you don't see the rows in a single cell table actually, but lets assume that you have several boxes in a row for now. Using our X-ray vision from the outside at one end of the crate, first we see the crate <table>, then we see the row of boxes <tr>, then we see the first box <td>. Leaving the first box </td> we see the second box <td> and leaving the second box </td> we see the third box <td>   Going out the other end we see first the other side of the last box </td> then the end of the row </tr> then the other side of the crate </table>. If our boxes were double stacked, then before leaving the crate we would see the second row of boxes <tr>, and the first box in that row <td> and go through the whole lower row to the far side of the last box where we arrive at </td></tr></table> and now we're out of the crate.

That is exactly how tables work. Maybe that explanation will help you to understand the structure of tables. Just think of them as rows of boxes stacked up inside a crate. If any data is not in a box it falls out the bottom (or sometimes the top) of the crate. Be sure that any data, be it text or images, is inside one of the table cells.
<TD> Data </TD>.

Tables can have different numbers of boxes in the rows but that has to be defined in the boxes of each row with the element "colspan=#". The same applies to rows with "rowspan=#" so that your crate doesn't have to be filled with the same number of boxes in each row or stack but if a row or stack has one less box in it, then one or more of the boxes will have to be bigger to fill up the row or stack. Don't worry about that now, understand the basics first. We can talk about the geometry later. Just remember

<table><tr><td> Data </td></tr></table>

is equal to:

<crate><row><box> contents <lid><end of row><end of crate>


BACK TO <TABLES>