PAINT SHOP PRO

SEND E-MAIL      HOME : TUTORIALS : PSP :  IMAGE SLICING          Page  1  2  3 
SCENIC-ROUTE
Page 4 
 

Hopefully, then, the following will clear up any lingering confusion. Start with this, here. 20 cells.

row 1
cell 1
row 1
cell 2
row 1
cell 3
row 1
cell 4
row 2
cell 1
row 2
cell 2
row 2
cell 3
row 2
cell 4
row 3
cell 1
row 3
cell 2
row 3
cell 3
row 3
cell 4
row 4
cell 1
row 4
cell 2
row 4
cell 3
row 4
cell 4
row 5
cell 1
row 5
cell 2
row 5
cell 3
row 5
cell 4
 

Combine cell 1 in rows 2 and 3, and also cell 3 in rows 3 and 4.

 
row 1
cell 1
row 1
cell 2
row 1
cell 3
row 1
cell 4
row 2
cell 1
rspan 2
row 2
cell 2
row 2
cell 3
row 2
cell 4
row 3
cell 1
row 3
cell 2
rspan 2
row 3
cell 3
row 4
cell 1
row 4
cell 2
row 4
cell 3
row 5
cell 1
row 5
cell 2
row 5
cell 3
row 5
cell 4
 

Now cell 4, for rows 3-5.

 
row 1
cell 1
row 1
cell 2
row 1
cell 3
row 1
cell 4
row 2
cell 1
rspan 2
row 2
cell 2
row 2
cell 3
row 2
cell 4
row 3
cell 1
row 3
cell 2
rspan 2
row 3
cell 3
rspan 3
row 4
cell 1
row 4
cell 2
row 5
cell 1
row 5
cell 2
row 5
cell 3
 

These tables, of course, do not have clearly fixed cell widths and heights, established by graphics of a certain size, as before. These are just cells with text in them. And the text can vary in size, in line height, and so on.
 
Combine a few more, including a couple spanning columns.

 
row 1
cell 1
rspan 4
row 1
cell 2
cspan 3
row 2
cell 1
cspan 2
row 2
cell 2
rspan 4
row 3
cell 1
rspan 2
row 3
cell 2
rspan 2

 
 

 
 
row 5
cell 1
row 5
cell 2
row 5
cell 3
 

Rows three and four become ambiguous, so extra cells on the right are needed to establish those rows, in this case for both Microsoft IE and Netscape. In the previous example, an older version of IE could calculate height because fixed heights were used for all cells. Here, the text in the cell determines the cell's size, unless table cell width and/or height are specifically given. So . . that's why. The spacers, here, just use 'new row' tags (<BR>), three times (that is, three blank lines per cell), based on the height of the current font.
 
Combine the center cells.

 
row 1
cell 1
rspan 4
row 1
cell 2
cspan 16
row 2
cell 1
cspan=2
row 2
cell 2
rspan 4
row 3
cell 1
rspan 2
cspan 2
row 3
cell 2
spacer
row 4
cell 1
spacer
row 5
cell 1
rspan 2
row 5
cell 2

row 6
cell 2
spacer
 

And, of course, if you also span cells 1 and 2 on row 5, you lose the definition for column two. So, a row 6 has to be added for column 'spacers'. The width of the first cell is already established above. So cell 1, row 6, just gets a blank line. The text in cell 2 is used to re-establish the width of column 2. Again, for a carved up image in a table, fixed cell widths and heights would make this all more exact. And the spacers on the right, and the one on the bottom, would be thin transparent .gifs that you couldn't see.
 
Note, too, that the colspan on the top was changed to 16, a number way beyond the number of columns, here. It doesn't expand that much because the extra columns are undefined, essentially blank. What extra width is added is the result of adding up the little space used between the cells, here. But the table is looking for 17 columns, in all. In fact, in IE 5 and NN 6, the columns seem to be determined by cell tags (<TD>), and the extra cells/columns of the large colspan, here, are ignored. But NN 4.7 will expand out to the right.
 
In other words, it's clear when using text where the table boundry is. The colored areas, if your browser shows colors in the cells here, can be thought of as what you'd see as a sliced up image in a table, when borders are not shown on the table. And if the spacers, previously and in the home page graphic, were not transparent, they'd appear sort of tacked on (as in the top of page 3 example).
 
And a minor note: while it might seem a trivial design problem, it's good practice not to leave any space on a line between close of the image tag, or whatever is in the cell, and the close of the table cell. PSP 7's image slicer handles this properly. But if you do this yourself, with a text editor, from the table reference mentioned, previously, you know that </TD> is the close for the table cell. If the cell contains just an image, say, then the closing bracket, >, for the anchor tag, or for the image tag itself, should be immediately followed by the close cell tag - i.e. ></TD>, and not > </TD>. That extra space will cause the table not to 'close up' properly, believe it or not.
 
And so . . with nothing further to add, I just hope this has shed some light on what at first might seem, as it did to me, a bit confusing.