FrontPage - tables

Working with tables in FrontPage

Topic status automatically displays here - do not remove.

Add me to your favorites!Bookmark this topic  Print me!Print this topic

This topic explains the minimum HTML table tags which support the W3C CSS1 and DOM3 standards, and explores some methods to coerce FrontPage (FP) into properly displaying tables within HTML topics.

Unfortunately, FP has demonstrated some strange behaviour in its handling of HTML tables, so these are discussed below along with some workarounds. FP also unfortunately provides table property dialogs which insert undesirable inline formatting.  The use of inline formatting is discouraged in favour of applying appropriate CSS styles, so we'll cover the application of appropriate styles too. See Jump down to subjectTable styles.

Before you can work with a table in FP, you need to insert  one into your HTML topic. See Jump across to separate topicUsing FrontPage to add a table.

Once you've got a table to work with, you should select a style to control the table width. See Jump down to subjectControlling table widths on this page.

If you wish to control the width of columns, see Jump down to subjectControlling column widths also on this page.

If you want to have better control over the positioning of tables within the page, see Jump down to subjectPositioning tables below.

If things don't go the way you've planned, or FP won't display the table the way you want, then you always have the option of hacking your way through the HTML code and fixing it yourself. To prepare you for doing so, see Jump down to subjectHTML Table Tags below. 

Finally, the appearance of the table is affected by which tag attributes are present or not. For details, see "FrontPage Tips and Tricks" topic <8 style="width: 9px; height: 9px;" />Working with Tables.

 

Back to Top

HTML Table Tags

There are times when FP just won't do what you want and displays tables incorrectly. At times like these, you have the choice to either back-track and then re-do the table, or you can wade into the HTML code directly. If you take the second option, you'll need to arm yourself with a basic knowledge of correct HTML syntax structure, or at least know where to find it when required. Everything you need to know about HTML table tags is provided here.

Table Structure Basics:

ExamplesExamples

Here is the HTML code for a simple table consisting of a single-cell in a single-row:

<TABLE> <TR> <TD>
      Row 1 Cell 1
    </TD> </TR> </TABLE>

Here's how that table displays:

Row 1 Cell 1

Note Note

No inline styles were applied (no attributes for any of the table tags were set), so the appearance of the table is completely determined by any pre-defined default styles for the table, tablerow, and tabledef tags, which exist in the stylesheet linked to this document. In this case, margins, borders, padding, colouring, text layout, and font are all adopted from the stylesheet. See Jump down to subjectTable styles for details.

Should you wish to add a second cell to the row, simply add another TABLEDEF tag set within the TABLEROW tag set.

Here is the HTML code for a simple table consisting of two cells in a single-row:

<TABLE>
  <TR>
    <TD>
      Row 1 Cell 1
    </TD>
<TD>       Row 1 Cell 2
</TD>   </TR>
</TABLE>

Here's how that table displays:

Row 1 Cell 1 Row 1 Cell 2

To add another row to the table, insert another TABLEROW tag set after the first.

<TABLE>
  <TR>
    <TD>
      Row 1 Cell 1
    </TD>
    <TD>
      Row 1 Cell 2
    </TD>
  </TR>
  <TR> </TR> </TABLE>

Here's how that table displays:

Row 1 Cell 1 Row 1 Cell 2

Oops! Where's that second row?

You'll need to also insert TABLEDEF cell tag sets within the TABLEROW to display anything, as you can see that the second row didn't display here at all. In fact FP "helpfully" removes the empty TABLEROW tag set from the HTML source if you've got the Reformat option checked on the Tools | Page Options | HTML Source tab.

If we add just one TABLEDEF cell tag set to the second row in the previous example, we get the following HTML:

<TABLE>
  <TR>
    <TD>
      Row 1 Cell 1
    </TD>
    <TD>
      Row 1 Cell 2
    </TD>
  </TR>
  <TR>
<TD>       Row 2 Cell 1
</TD>   </TR>
</TABLE>

Here's how that table displays:

Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1

Notice here that the second row displays, however it appears that the table expects a second cell on the same row, and when it can't find that cell, it fills the expected cell space in the table with the table border colour! (Not very pretty, but could be used to interesting affect now that you know about it. This possibility is not explored any further here.)

An interesting (and sometimes frustrating) behaviour of HTML tables is that they automatically expect cells in different rows to align into columns, and will automatically resize their cells so that they do align into columns, even if you have an different number of cells on each row, or have specifically set some cell size attributes. This can cause some confusion to the unwary, as it would seem that some attributes have no affect in these circumstances.

If you required different rows of the same table to contain a different number of cells to each other, you can set the cell COLSPAN attribute to instruct the table to span a cell over more than one column. The row with the largest number of cells determines the number of columns within a table. The rows with fewer cells must stretch their cells over more columns to make up the difference, or risk having holes in the display where the table expects to find a cell and it doesn't add up.

<TABLE>
  <TR>
    <TD>
      Row 1 Cell 1
    </TD>
    <TD>
      Row 1 Cell 2
    </TD>
  </TR>
  <TR>
    <TD COLSPAN="2">
      Row 2 Cell 1
    </TD>
  </TR>
</TABLE>

Here's how that table displays:

Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1

Notice how the first (and only) cell in the second row has been stretched in size to span across the whole table.

To add more cells to a row, insert more TABLEDEF cell tag sets as in the following example:

<TABLE>
  <TR>
    <TD>
      Row 1 Cell 1
    </TD>
    <TD>
      Row 1 Cell 2
    </TD>
  </TR>
  <TR>
    <TD>
      Row 2 Cell 1
    </TD>
    <TD>
      Row 2 Cell 2
    </TD>
  </TR>
</TABLE>

Here's how that table displays:

Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 1

To complete this exercise in table HTML tags

 

Back to Top

Controlling table widths

There are three pre-defined fixed table widths for use at 400, 500, and 600 pixels each.

Note Note

A display bug within FP causes the following tables to display in Normal tab view with each cell width stretched to the width of the table class. This displays properly however, in Preview, in IE, and in HTML help. 

PixelWidth400 table style: (Assign the "PixelWidth400" class to the table tag).

Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2

PixelWidth500 table style: (Assign the "PixelWidth500" class to the table tag).

Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2

PixelWidth600 table style: (Assign the "PixelWidth600" class to the table tag).

Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2

Should any other fixed width table be required, they should be added to the LotechSolutions.css style sheet when required.

Back to Top

Controlling column widths

The number of columns within a table is dependant upon the number of tabledef tags (<TD>) within each tablerow tag set (<TR>). The columns will even themselves out to equally share the total width of the table unless you specifically set a cell width in the tabledef tag, or apply an appropriate class to a table cell.

Note Note

If conflicting widths are set, the display will adjust the cell sizes to accommodate every cell into the table, rather than adjust the table width to suit.

Multiple tables with PixelWidth500 style demonstrating 2 cells, 3 cells, 4 cells, 5 cells and 6 cells respectively.

ExamplesExamples

Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2 Row 2 Cell 3
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 4 Cell 5
Row 5
Cell 1
Row 5
Cell 2
Row 5
Cell 3
Row 5
Cell 4
Row 5
Cell 5
Row 5
Cell 6
Back to Top

Positioning tables

There are two pre-defined standard table positioning styles in the LotechSolutions.css available for instant use:

Table Header Cell Another Table Header Cell
Table Data Cell Another Table Data Cell

Indented table style: (Assign the "indented" class to the table tag).

Table Header Cell Another Table Header Cell
Table Data Cell Another Table Data Cell

You could also, (if you wished) further control the position of a table by placing it within a list, or even within another positioned table.

Enclosing tables within tables

Now what if we were to enclose a fixed width table within an normal unsized table?

Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2 Row 2 Cell 3
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 4 Cell 5
Row 5
Cell 1
Row 5
Cell 2
Row 5
Cell 3
Row 5
Cell 4
Row 5
Cell 5
Row 5
Cell 6

How about enclosing a fixed width table within a fixed width table?

Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2 Row 2 Cell 3
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 4 Cell 5
Row 5
Cell 1
Row 5
Cell 2
Row 5
Cell 3
Row 5
Cell 4
Row 5
Cell 5
Row 5
Cell 6

Or enclosing a fixed width table within an indented table?

Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2 Row 2 Cell 3
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 4 Cell 5
Row 5
Cell 1
Row 5
Cell 2
Row 5
Cell 3
Row 5
Cell 4
Row 5
Cell 5
Row 5
Cell 6

 

Back to Top

Table styles

Back to Top

See Also

FrontPage Tips and Tricks | xyz Lotech Solutions' Tips, Tricks, and Procedures

Back to Top