Tables

Tables have become a standard element in almost every Web page, from spacing elements to menus to image maps. Many Web developers splice large images into several smaller pieces and then assemble them into a table to improve download speed. All of these tricks are useful, but when developing for our platform, you have to take into account the finite and defined horizontal space that is available in the TV browser.

The spliced image is a good example because is it so visual. Take the photograph bears.jpg and section it into 6 pieces-three to a row and two rows-and place them into a simple table with one cell. This is shown in the following picture. (picture simulated using the WebTV Viewer).

Example of a bad table graphic

The table was purposely designed slightly wider than the screen. As a result, the TV browser wraps the elements, destroying the integrity of the image. It does not have to be a spliced image, any table behaves this way. It is obviously a problem. It is supposed to look like this:

Example of a good table graphic

There are three rules that the TV browser follows when dealing with tables.

Rule One: Images that are stored in separate cells within a table row never wrap to the next line. The browser compresses all of the images in a table row as much as needed to fit on the screen.
Example:

<TABLE name="No_Wrap_Table">
<TR>
  <TD>
    <IMG src="Big_Image1">
   </TD>
   <TD>
    <IMG src="Big_Image2">
   </TD>
   <TD>
    <IMG src="Big_Image1">
   </TD>
</TR>
</TABLE>

Rule Two: When images are in the same table cell, but are either enclosed by <NOBR> tags or within a table or cell with an explicit width, the TV browser attempts to fit the images on the same line by compressing cells to 80% of their original size, and wrapping any cells to the next line that still don't fit on the screen.
Example:

<TABLE name="Compress_Then_Wrap_Table">
<TR>
  <TD width=600>
    <NOBR>
    <IMG src="Big_Image1">
    <IMG src="Big_Image2">
    <IMG src="Big_Image1">
    </NOBR>
  </TD>
</TR>
</TABLE>

Rule Three: If images are in the same table cell, and explicit width or <NOBR> tags are not present, the TV browser wraps all images to the next line that don't fit in a 544 pixel-wide table row.
Example:

<TABLE name="Wrap_And_Do_Not_Compress_Table">
<TR>
  <TD>
    <IMG src="Big_Image1">
    <IMG src="Big_Image2">
    <IMG src="Big_Image1">
  </TD>
</TR>
</TABLE>