7.1

</table>
</div>
The content is enclosed by a <div> element. Each page contains a <form> tag, which is used to catch information entered by
the user or to perform an action when the user clicks a button.
The <form> tag has two main components: the actual table and the toolbar/buttons to perform specific actions. A page will
only contain a single overview table.
Head
The <th> tag indicates that the table cell(s) of the first row is a header cell, in this case the title for the table. In the Style.php
file an id selector with a subselector of <th> is created to avoid styling conflicts with other tables.
#tableOverview th {
background-color: <? generateSkinMainColor(); ?>;
padding: 2px;
font-weight: bold;
text-align: left;
border-width: 0 0 1px 0;
border-color: #FFFFFF #FFFFFF #FFFFFF #FFFFFF;
border-style: solid;
color: #FFFFFF
}
Subhead
The second row shows the names for the columns. Often the first column contains a check box to select and deselect (toggle)
the records of the current page in the overview.
Content
The rows (<tr> tag) that form the body of the table have the record class selector. In hierarchical overviews a second class
selector is used to specify the level in the hierarchy. The <td> tags contained by the table row can have different class selec-
tors. This depends on the type of content, examples are: text, icon and check box.
In the skins supplied with PSW the background color for the element is set when the user places the cursor over a specific row
(hovers).
#tableOverview tr.level0:hover,
#tableOverview tr.level1:hover,
#tableOverview tr.record:hover {
background-color: #E6E6FF;
}
Footer
The last table row is used to display navigation options. The navigation options become visible when the overview contains
more than the number of records set in the setRowsPerPagevariable (default 15). Please refer to setRowsPerPage for more
information about this function.
#tableOverview tr.level0:hover,
#tableOverview tr.level1:hover,
©2010 Objectif Lune Inc - 234 -