FrontPage - tables

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 Table styles.

Before you can work with a table in FP, you need to insert  one into your HTML topic. See Using 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 Controlling table widths on this page.

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

If you want to have better control over the positioning of tables within the page, see Positioning 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 HTML 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.

 

---

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:

• Tables in HTML are formed from nested tag pairs starting with the TABLE tag set (<TABLE></TABLE>).

  Tables can even be nested within other tables, and this method was widely used for positioning HTML elements before the widespread adoption of CSS standards.

  Note

  Nesting tables for page layout is discouraged in favour of applying appropriate CSS styles. See Table styles.

• A properly formed table contains at least one TABLEROW tag set (<TR></TR>).

  The number of TABLEROW tag sets determine the number of rows within the table.

• TABLEROWs must contain one or more TABLEDEF cell tag sets (<TD></TD>).

  The number of TABLEDEF tag sets determine the number of cells within the row.

  Note

  Unlike paragraphs outside of a table, paragraphs within a table do not require paragraph tags (<P></P>). Text within cells are contained within the tabledef tags (<TD></TD>). Indeed, paragraph tags within table cells are not recommended as these will bring inappropriate formatting settings with them (which will now align from the table cell edge, and not the page edge as likely intended). Paragraphs within tables require their own styles to account for the confined space within a table cell. See Table styles.

• TABLEROWs can also contain none or more TABLEHEAD cell tag sets (<TH></TH>) in place of TABLEDEFs. TABLEHEADs are usually placed at the top and/or left edges of a table.
• Columns are not specifically created using column tags (which don't exist in HTML), as the number of columns in a table is determined by the row which contains the largest number of cells.

Examples

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

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 Table 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

 

---

Controlling table widths

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

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.

---

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

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.

Examples

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

---

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

 

---

Table styles

---

See Also

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

---

email webmaster

Copyright Lotech Solutions. All rights reserved.