Text table layout specification

Text table

This interface block is used for displaying the explanation of the purpose of the page at the top left of each page and for other information about the page in the central block. The table has three columns with the widths set to 33% which means each column takes up one third of the total width of the table. The third column is always empty in the default Pixaria layout and is only present to achieve a clean layout on wide screens.

Text table layout

The diagram above lists the layout and associated HTML for the text table interface block. The only CSS class is in the table element itself 'table-text'. By applying this class to a table with the correct HTML elements, the entire layout will be correctly formatted.

Text form CSS

/*  Styles for text layout tables */

.table-text
    {
    border-collapse:collapse;
    width:100%;
    line-height:1.2em;
    text-align:left;
    padding:0px;
    border-spacing:0px;
    margin:0px;
    }

.table-text th
    {
    width:33%;    
    vertical-align:top;
    padding:2px 5px 7px 0px;
    font-weight:bold;
    letter-spacing:-1pt;
    font-size:14pt;
    text-align:justify;
    margin-top:0px;
    margin-right:8px;
    margin-left:2px;
    line-height:1.3em;
    }
    
.table-text td
    {
    width:33%;    
    vertical-align:top;
    padding:3px;
    text-align:left;
    vertical-align:top;
    }

.table-text td h1
    {
    font-weight:bold;
    font-size:10pt;
    margin-top:2px;
    }

Further reading

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

Go back to contents

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