Table Manners

March 1, 2000
by Gary Rosenzweig

In the days of Director 4 and 5, there was only one way to display tabular information created with Lingo. This was to use a mono-spaced font, like Courier, and line up the columns of the table with excess spaces. Figure 1 shows an example of what this looked like.

Not only were these types of tables hard to create, but they were not very versatile. For instance, if you wanted to have an entry that was wider than the allowed column width, you couldn't have it wrap around to the next line very easily. At least not without a lot of Lingo programming.

In Director 7 there is a much better way to create tables. However, I rarely see developers use it.

A sample movie is available for download in Mac or PC format. This is a Director 7 movie.

The new method involves using Director 7's ability to use HTML code as data for text members. Instead of setting the text property of a text member, you set the html property of the text member. The html is then interpreted and displayed.

This means that you can use simple things like <B> to make text bold. It also means that you can use more complex things, like <TABLE> to format text. All you need to do is build a string that contains a complete HTML document. This means it has to start with <HTML> and place visible elements in a <BODY> tag. Here is a quick example for the Message window:

myString = "<HTML><BODY><TABLE>¬
  <TR><TD>Column A</TD><TD>Column B</TD></TR>¬
  </TABLE></BODY></HTML>"
member("Table").html = myString

See how easy it is to create a table? You can even write a handler that converts a list to a table. Here is a such a handler.

on makeTable list, textMember
  html = "<HTML><BODY BGCOLOR=FFFFFF>"
  put "<TABLE>" after html
  
  repeat with i = 1 to list.count
    put "<TR>" after html
    repeat with j = 1 to list[i].count
      put "<TD>"&list[i][j]&"</TD>" after html
    end repeat
    put "</TR>" after html
  end repeat
  
  put "</TABLE>" after html
  put "</BODY></HTML>" after html
  
  member(textMember).html = html
  
end

This handler accepts a list and the name of a text member to set. The list should actually be a list of lists. Here is a handler that tests it out.

on test1
  list = []
  add list, ["1","Apples",489]
  add list, ["2","Peaches",756]
  add list, ["3","Oranges",4349]
  add list, ["4","Bananas",78]
  makeTable(list,"Table")
end

The result can be seen in figure 2. You can see that the text uses Times font, just as a Web browser with default settings would.

The best thing about this type of table is that it will allow you to have longer entries in columns and the entries will wrap around inside the column properly. The following handler calls "on makeTable" and will output a table that includes wrapped columns. You can see the result in figure 3.

on test2
  list = []
  add list, ["1","Apples",489,"Fresh macintosh ¬
    apples from Washington"]
  add list, ["2","Peaches",756,"Delivered by truck ¬
    from Georga"]
  add list, ["3","Oranges",4349,"Florida Oranges"]
  add list, ["4","Bananas",78,"From Brazil"]
  makeTable(list,"Table")
end

But the advantages of HTML tables don't stop here. You can easily set the width of each column by adding a WIDTH attribute to the TD tags. You can also set the font of the text with a FONT tag. The following handler allows you to create more customizable tables. It even accepts a list of headings so that each column has a title.

on makeComplexTable list, headings, font, ¬
widths, spacing, textMember
  html = "<HTML><BODY BGCOLOR=FFFFFF>"
  put "<TABLE CELLSPACING="&spacing&">" after html
  
   put "<TR>" after html
  repeat with i = 1 to headings.count
    put "<TD WIDTH="&widths[i]&"><B><FONT FACE='"&font&"'>¬
      "&headings[i]&"</B></FONT></TD>" after html
  end repeat
   put "</TR>" after html
  
  repeat with i = 1 to list.count
    put "<TR>" after html
    repeat with j = 1 to list[i].count
      put "<TD WIDTH="&widths[j]&"><FONT FACE='"&font&"'>¬
        "&list[i][j]&"</FONT></TD>" after html
    end repeat
    put "</TR>" after html
  end repeat
  
  put "</TABLE>" after html
  put "</BODY></HTML>" after html
  
  member(textMember).html = html
  
end

Here is a handler that tests the "makeComplexTable" handler. It needs to feed in a list of headings, the font to use, a list of widths, and also a spacing parameter. This spacing parameter is used to set the CELLSPACING attribute of the TABLE tag so that the rows and columns are spaced a little bit.

on test3
  list = []
  add list, ["1","Apples",489,"Fresh macintosh ¬
    apples from Washington"]
  add list, ["2","Peaches",756,"Delivered by truck ¬
    from Georga"]
  add list, ["3","Oranges",4349,"Florida Oranges"]
  add list, ["4","Bananas",78,"From Brazil"]
  
  
  headings = ["Number","Product","Amount","Comments"]
  
  widths = [60,80,60,140]
  
  makeComplexTable(list,headings,"Arial",widths,4,"Table")
end

Figure 4 shows the result of this test handler. You can see that you get a pretty nice table from the original Lingo list.

You don't have to stop here. You can add a BORDER attribute to the TABLE tag to draw lines between the cells in the table. You can even color in the table with a BGCOLOR attribute. The text member can easily be made scrolling, so you can create tables that go way beyond the vertical dimensions of your screen, too.

Gary Rosenzweig is the Chief Engineer, founder, and owner of CleverMedia, a game and multimedia development company in Denver, Colorado. He is the author of ten books on Macromedia Director and Flash, including his latest, Special Edition Using Director MX.