Form table layout specification

Text form

This interface block is a used for all forms. It is a more complex table layout than the table text block however it enables you to easily customise the design of your forms.

Text form layout

The diagram above shows the table layout block for forms. It includes 'thead' and 'tbody' elements which enable finer grained CSS formatting than is possible with the 'table-text' block. Each row in the form table has a different background colour and this is catered for by the Smarty tags in the class attribute of the table row.

Text form CSS

/*  Styles for form layout tables */

.table-form
    {
    border-collapse:collapse;
    width:100%;
    padding:0px;
    border:1px solid #CCC;
    margin-bottom:20px;
    border-spacing:0px;
    }

.table-form thead th
    {
    width:33%;    
    text-align:left;
    font-size:11pt;
    color:#FFF;
    background-color:#AAA;
    padding:4px 0px 6px 4px;
    font-weight:bold;
    }
    
.table-form tbody th
    {
    height:25px;
    vertical-align:top;
    padding:8px 0px 0px 4px;
    width:33%;
    font-size:9pt;
    text-align:left;
    font-weight:bold;
    }
    
.table-form tbody td
    {
    height:25px;
    vertical-align:middle;
    height:20px;
    padding:3px;
    width:33%;    
    text-align:left;    
    }

.table-form tbody td td
    {
    padding:0px;
    }

.table-form tbody th td
    {
    padding:0px;
    }

Further reading

1. HTML and CSS specifications
2. Text table layout specification
3. Listbox table layout specification

Go back to contents

Created: Monday, September 11, 2006
Last edited: Monday, September 11, 2006