Advanced Tables attributes

As said, you can put anything in a table cell -- including a whole new table. Theoretically you could have a table within a table within a table... ad infinitum. Just remember that the new table has to be inside one cell of the one containing it.

The most usual use for this is to create a more elaborate frame for a picture, by putting it in a narrow-bordered table which is itself in a wide-bordered one. Like this:



    <CENTER><TABLE border="15" cellpadding=0
    cellspacing=0 align="center">

    <TR><TD ALIGN="center">

    <TABLE border="5" cellpadding=0 cellspacing=0
    align="center">

    <TR><TD align="center"><IMG src="mypicture.gif"
    width=100 height=113 align="center" valign="middle"></TD></TR>

    </TABLE>

    </TD>

    </TR>

    </TABLE></CENTER>

It's advisable to keep the entire code for the row containing the image on one line: if you've specified cellpadding and cellspacing as 0 this shouldn't matter, but if you forgot, the browser will display the image starting at the top left-hand corner of the cell, with some space left at the right-hand side and the bottom, if there's a line break in the code for the table.

Putting a different number of cells in different rows

I mentioned above that if you define one or more rows with fewer cells than the others, the table will actually have as many cells in each row as the largest row specifies. The undefined cells in the smaller rows are added on to the right-hand side (the end of the row).

First row has 3 cells	Cell 2	Cell 3
Second row only has 2	Cell 2
Third row only has 1

If you don't use a border you can't see them, but they're there: you can't put anything else outside the table in that space.

What you can do is to vary the size of different cells, in units of columns or rows. In other words, you can define a cell as spanning 2 or more columns or 2 or more rows. the commands are <COLSPAN> and <ROWSPAN> respectively.

This goes across the top, spanning 3 columns
Cell One	Cell Two	Cell Three

<TABLE border=2 cellspacing=3 cellpadding=3> <TR><TD colspan=3>This goes across the top, spanning 3 columns</TD></TR> <TR><TD>Cell One<TD>Cell Two<TD>Cell Three</TD></TR> </TABLE>

Since the table is defined row by row, that's pretty simple: you put one cell in the first row and 3 in the second, and use "colspan" to specify that the cell in the first row spans the entire width of the 3 cells in the second.

The ROWSPAN Command

This is a bit more complicated, logically, because you have to remember in every row which cell was already spanned by a cell in a previous column and therefore should not be defined now. Here's an example:

This cell spans 3 rows	Cell One
	Cell Two
	Cell Three

Here's what made it:

<TABLE border=2 cellspacing=3 cellpadding=5> <TR><TD rowspan="3" align="center" width="60%">This cell spans 3 rows</TD></TR> <TR><TD align="center">Cell One</TD><TD ALIGN="center">Cell Two <TD align="center">Cell Three</TD></TR> </TABLE>

The first row has 2 cells. The first of these spans 3 columns. The next 2 rows only define 1 cell each, because the space for the first cell of each is already occupied by the first cell of the first row. The browser therefore puts the single cell defined in those 2 rows to the right of the space taken up by the first-row cell (whereas usually it would put the first cell defined in a row on the left of the row).

If you don't want to get tied up in knots doing this, draw your table first and then work out which cells to define in each row, before you start.

FrontPage does a bad job of spanning cells. The problem is that you start by entering a normal table, e.g. 2 cells x 3 rows. Only after the cells are defined can you specify their attributes, including colspan or rowspan. As soon as you have a cell that spans columns, there are two many cells in the table as originally entered, and instead of deleting the extra ones, FrontPage re-distributes them into extra columns. Then it gets confused when you try to delete them. It's practically impossible to create a table with spanned columns using the WYSIWYG editor alone. You have to go in to the HTML code and edit it manually.

Word is also not very good at this type of table, though it does a pretty good job of translating "regular" tables to HTML.

Tables: Advanced

Nesting tables inside tables

Putting a different number of cells in different rows