Example: Adding new table styles

Note:

The text editors do not always display the correct formatting. You must always preview the document definition to verify the table layout.

In this example, Composition Center users should be able to select table styles that generate tables with the following layout:

Figure 6

Table generated in Composition Center

Since the heading row differs from the other table rows, you must define two new classes in the style sheet file. One class for the heading row and another class for the body rows.

Adding a class for the table

In the compositioncenter.css file we add a class named .CorpGreenTable for the table. The .CorpGreenTable class contains the formatting for font color, table width, thickness, and color for top and bottom borders.

.CorpGreenTable{

color:#228b22;

width:300pt;

border-top:2px solid #228b22;

border-bottom:2px solid #228b22;

}

Adding a class for the table heading

In the compositioncenter.css file we add a class named .CorpGreenHeading for the heading. The .CorpGreenHeading class contains the formatting for background and font colors.

.CorpGreenHeading{

background-color:#98fb98;

color:#000000;

}

Using the styles in Composition Center

In Composition Center, business users insert new tables by opening the Insert/Modify table dialog box and select the CorpGreenTable style. Inserted tables have the following layout:

Figure 7

The same style applied on all rows

To give the heading the CorpGreenHeading style, users click in the heading row, open the Table row properties dialog box and select the CorpGreenHeading style. Now the table has the following layout:

Figure 8

Different styles applied on heading and body rows